layui操作及遇到的问题

墨蓝 2021-08-27 19:03 490阅读 0赞

一.业务操作

(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
                    }
                });
            })

[参考材料][Link 1]

(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,'选中的数据')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

二.问题

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();

[Link 1]: https://www.cnblogs.com/hunmeng/p/11181578.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/6317f3ebb4e647fd978b0f8a4fbe537a.png