Layui(五) 表單賦值

一、目的：選中表格行數據——>彈出iframe層——>顯示該員詳細信息（包含表格信息）

①、表格數據：

②、iframe層數據：（部門數據正確是因爲已經改好了賦值方法，X組數據是錯誤的，因爲職位在表格中並未顯示，所以外界不知道是否錯誤。）

二、問題：表單賦值可以更改輸入框數據，但是不能更改動態生成的下拉菜單數據

 

 

三、過程：

①、主頁面JS：

 else if (obj.event === 'edit') {
                layer.open({
                    type: 2
                    , title: '人員信息'
                    , content: 'edit-iframe.html'
                    , maxmin: true
                    , area: ['850px', '800px']
                    , btn: ['確定', '取消']
                    , success: function (layero, index) {
                        var iframe = window['layui-layer-iframe' + index]; // 找到iframe層
                        //將該行數據傳到子頁面 ,通過ID查值是爲了便於子頁面做判斷
                        iframe.child(data,$('#edituser').attr('value'));
                    }
                    , yes: function (index, layero) {
                        //點擊確認觸發 iframe 內容中的按鈕提交
                        var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                        submit.click();
                    }
                });
            }

②、iframe層   接收數據JS:

 // 賦值到全局變量，便於layui.use內部使用
    //res 接收主頁面的傳值
   var res = '',
        u_name 接收按鈕的值，便於判斷（獲取下拉值的時候做判斷）
        u_name = '';

    // 獲取主頁面的值
    function child(data, n) {
        //接受主頁面值
        res = data;
        //接受主頁面按鈕名稱
        u_name = n;
    }

③、iframe層  下拉菜單JS

//獲取部門 可以使用form方法調用，我使用能快速讀懂的方法 ————頁面加載則執行
            $(document).ready(function () {
                $.ajax({
                    url: 'http://192.168.1.123:8977/get_dept'
                    , method: 'GET'
                    , datatype: 'json'
                    , success: function (r) {
                        // 用於option標籤的拼接
                        var html = '';
                         // 遍歷接口部門值和行數據部門值，匹配則設置其爲選中狀態
                        $.each(r.data, function (i, d) {
                          // 通過全局變量的按鈕值判斷是哪個按鈕觸發，因爲是兩個按鈕公用一個界面
                            if (u_name === '修改') {
                                  //匹配則設置該值爲選中狀態
                                if (d.ID === res.deptid) {
                                    html += '<option value="' + d.ID + '" selected>' + d.DeptName + '</option>';            
                                } else {
                                       // 否則正常順序生成option
                                    html += '<option value="' + d.ID + '">' + d.DeptName + '</option>';
                                }
                            } else {
                                // 沒匹配上也正常順序生成option
                                html += '<option value="' + d.ID + '">' + d.DeptName + '</option>';
                            }
                            // 將生成的option放到ID= dept的標籤下
                            $('#dept').html(html);
                        });
                        // 用於動態生成時刷新表單
                       form.render('select');
                    }
                })
            });

④、iframe層 表單賦值JS:

 //如果主頁面有傳值，則爲修改，更改form默認值  （同樣頁面加載則執行——$(function () {})）
            $(function () {
                // 如果主頁面有傳值則設默認值，否則也沒值可設置
                if (Object.keys(res).length > 0) {
                    //設置密碼框中的默認值 lay-filter="form-list" --form-list可以隨便取名
                    form.val('form-list', {
                        // 以下是通過input標籤name屬性查找標籤,格式爲：
                        “標籤的name值”:“你要設置的值”
                        "worknum": res.worknum,
                        "name": res.name,
                        "sex": res.sex,
                        "dept": res.deptid,
                        "time_group": res.time_group,
                        "working_state": res.status,
                        "pwd": res.CardplusPwd,
                        "entrytime": res.entrytime,
                        "valid_term": res.validterm,
                        "card_num": res.cardnum
                    });
                } else {
                    //設置密碼框中的默認值（另一個按鈕生成的默認值）
                    form.val('form-list', {
                        "pwd": "8888"
                    });
                }
            });