layui操作及遇到的問題

一.業務操作

(1).checkbox監聽事件

<div class="layui-input-inline" style="width: 300px;">
    <input type="checkbox" name="menuIdss" lay-filter="systemMenu" data-id="1" title="男" checked>
    <input type="checkbox" name="menuIdss" lay-filter="systemMenu"  data-id="2"  title="女">
</div>

var systemMenu = [1];
//權限列表 選擇
form.on('checkbox(systemMenu)', function(sys) {
    var elem = sys.elem;
    var newDate = [];
    if (elem.checked == true) {
        systemMenu.push(elem.dataset.id);
    } else {
        for (var i = 0; i < systemMenu.length; i++) {
            if (elem.dataset.id != systemMenu[i]) {
                newDate.push(systemMenu[i]);
            }
        }
        systemMenu = newDate;
    }
    

});

console.log(systemMenu) checkbox的值

 (2).上傳文件

<button name="file" type="button" class="btn btn-Other btn-lg"  id="btnImport" >導入</button>

 layui.use('upload', function() {
            var $ = layui.jquery,
                upload = layui.upload;
            upload.render({
                elem: '#btnImport',
                url: ylzBizID.importExcel(), //改成您自己的上傳接口
                accept: "file",
                acceptMime: ".xls,.xlsx",
                exts: "xls|excel|xlsx",
                before: function(obj) { //obj參數包含的信息，跟 choose回調完全一致，可參見上文。
                    layer.load(); //上傳loading
                    $("#formSearch input").val('');
                },
                done: function(res) {
                    if (res.success == true) {
                        layer.msg('導入成功');
                        searchData();
                        layer.closeAll('loading');
                    } else {
                        layer.closeAll('loading');
                    }
                },
                error: function(index, upload) {
                    layer.closeAll('loading'); //關閉loading
                }
            });
        })

參考材料

(3).table

    table.render({
        elem: '#dataTable',
        url: diseaseUrl.getSysDoctorList,
        page: {
            theme: '#1E9FFF',
        },
        method: 'post',
        request: {
            pageName: 'pageIndex',
            limitName: 'pageSize',
        },
        cols: [
            [ {
                field: 'deptname',
                title: '科室',
            }
        ],
        response: {
            countName: "total"
        }
    });

A.單擊 或是雙擊

//監聽行單擊事件
table.on('row(dataTable)', function(obj){
         var data = obj.data;
})
//監聽雙擊事件 雙擊事件爲：rowDouble
table.on('rowDouble(dataTable)', function(obj){
         var data = obj.data;
})

B. table的數據

 var  intTable =  layui.table.cache.dataTable;//最後一個table的id
console.log(intTable,'費用表單')

C.獲取選中的值

 var selectData = layui.table.checkStatus('dataTable').data;// dataTable是table的id
console.log(selectData,'選中的數據')

 

二.問題

1.控制檯報錯JSON parse error: Unrecognized token 'pageIndex': was expecting ('true', 'false' or 'null')

這是後端要求返回的數據格式是json

加這個就好contentType: 'application/json',

    table.render({
        elem: '#dataTable',
        url: diseaseUrl.getSysDoctorList,
        page: {
            theme: '#1E9FFF',
        },
        contentType: 'application/json',
        method: 'post',
        request: {
            pageName: 'pageIndex',
            limitName: 'pageSize',
        },
        cols: [
            [ {
                field: 'deptname',
                title: '科室',
            }
        ],
        response: {
            countName: "total"
        }
    });

2.Select2和layui-form衝突問題(會出現2個下拉框)

#deptidList + .layui-unselect.layui-form-select{
    display: none;
}
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">科室</label>
       <div class="layui-input-inline">
            <select id="deptidList" name="deptid"  class="example" style="width:200px">
                <option></option>
            </select>
        </div>
    </div>
</div>

$("#deptidList").select2({
    ajax: {
        url: diseaseUrl.getSysDoctorDeptList,
        dataType: 'json',
        type:'GET',
        delay: 250,
        data: function (params) {
            return {
                deptname: params.term == undefined? "":params.term,
            };
        },
        processResults: function (data) {
            var arr=[],newData = data.data;
            console.log(data,'sshudata')
            if(newData.length>0){
                for(var i=0;i<newData.length;i++){
                    arr.push({"id":newData[i].deptid,"text":newData[i].deptname})
                }
            }
            // 後端返回值改成 select2插件想要的格式
            return {
                results: arr
            };
        },
        cache: true
    }, 
    placeholder:'請選擇科室',//默認文字提示
    formatResult: function formatRepo(repo){return repo.text;}, // 函數用來渲染結果
    formatSelection: function formatRepoSelection(repo){return repo.text;}, // 函數用於呈現當前的選擇
    allowClear: true//允許清空
});
$("#deptidList").next().next().remove();