layui怎么實現(xiàn)表單關(guān)聯(lián)-創(chuàng)新互聯(lián)

layui是什么：

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)公司堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計、成都做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，小程序開發(fā)，軟件定制網(wǎng)站設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。layui 首個版本發(fā)布于2016年秋，她區(qū)別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準(zhǔn)確地說，她更多是為服務(wù)端程序員量身定做，你無需涉足各種前端工具的復(fù)雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

什么是表單關(guān)聯(lián)：

比如有兩個layui表格，把第一個表格的數(shù)據(jù)查詢出來后，然后點擊表單里的某一條數(shù)據(jù)，根據(jù)這一條數(shù)據(jù)的主鍵id，查詢第二張表單的數(shù)據(jù)，并把數(shù)據(jù)回填。

第一步先準(zhǔn)備好兩張表，把數(shù)據(jù)對應(yīng)的表頭設(shè)計好。

這是我準(zhǔn)備好的兩張表，一張是VIP表，另一張是VIP積分調(diào)整表，一會呢我們點擊VIP表單的數(shù)據(jù)查詢出積分調(diào)整表單的數(shù)據(jù)，這兩張表單的數(shù)據(jù)查詢方法我已經(jīng)也是在控制器那邊寫好了的，現(xiàn)在看看頁面上是需要顯示出那些數(shù)據(jù)的。

頁面上的表單就是這樣顯示的，調(diào)整記錄表還是無數(shù)據(jù)，是因為我在上面表單初始化的時候把調(diào)整表單的請求路徑給注銷掉了，更多條件查詢的方法查不多，就是把這個查詢路徑加了一個條，滿足什么條件就開始查詢。

下面是表單關(guān)聯(lián)事件，是一個監(jiān)聽事件，這個事件一定是要寫在加載layui模塊的方法里。這里代碼的意思是獲取VIP表里的某一行數(shù)據(jù)，給它一個點擊事件聲明一個變量，并給這個變量賦值，賦值的時候一般都是給id賦值，一會根據(jù)這個id去查詢出調(diào)整表的數(shù)據(jù)。能不能查詢出數(shù)據(jù)，可以在控制臺中輸出這個剛剛所賦值看一下。

//獲取VIP表行事件
            layuiTable.on('row(tabVip)', function (obj)
             {
                  var data = obj.data;//獲取點擊行數(shù)據(jù)
                  //標(biāo)注選中樣式
           		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
           		
                    ////***單擊選中單選框
                    obj.tr.find('div.layui-unselect.layui-form-radio')[0].click();
                    
                    var vipId = data.VipID;//vip類型id
                    
                    //控制臺輸出看看是否能獲取到VIPid
                    console.log(vipId);
                    
                    //調(diào)整記錄附件，根據(jù)VIPid查詢對應(yīng)的調(diào)整記錄信息
                    tabAdjustmentRecord.reload
                    ({
                        //查詢路徑
                        url: '/DailyAffairs/VIPManege/AdjustmentRecord',
                        where:
                         { //設(shè)定異步數(shù)據(jù)接口的額外參數(shù)，比如設(shè)置多條件查詢的參數(shù)
                            vipId: vipId
                        },
                        //從第一頁開始
                        page:
                         {
                            curr:1
                        }
                    });
                });

我們看看效果先：

我點擊的是第二條數(shù)據(jù)，所以控制臺輸出的id是2，這樣證明我們是把id獲取成功的；要是VIP表的VIPid沒有獲取到，調(diào)整表是沒有數(shù)據(jù)的，這是就要控制臺輸出是否有id輸出，沒有id輸出，就看看id有沒有獲取錯，或者有沒有把id傳到控制器那邊，查詢調(diào)整記錄的控制器有沒有寫上接收對應(yīng)的id。

以上就是layui關(guān)聯(lián)表單的方法的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

文章標(biāo)題：layui怎么實現(xiàn)表單關(guān)聯(lián)-創(chuàng)新互聯(lián)
分享路徑：http://www.muchs.cn/article48/djpoep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、全網(wǎng)營銷推廣、電子商務(wù)、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司