layui 常见使用及注意

左手的ㄟ右手 2021-09-19 02:00 2044阅读 0赞

# 一.注意 #

1.layui-nav-itemed  这个加上就是默认展开  菜单

# 二.菜单 #

1.菜单数据类型

[
    	{
    		"name": "审核管理",
    		"id":1,//这个每个菜单都要不一样
    		"icon": "",//这个字体图标
    		"url": "shgl",//菜单路劲
    		"children": null// 子集
    	},
    	{
    		"name": "打印寄件管理",
    		"icon": "",
    		"id":2,
    		"url": "dyjj",
    		"children": [
    			{
    				"name": "首页2",
    				"icon": "",
    				"id":3,
    				"url": "dyjj",
    				"children": null
    			},
    			{
    				"name": "首页3",
    				"icon": "",
    				"id":4,
    				"url": "dyjj",
    				"children": null
    			}
    		]
    	}
    ]

# 三.table操作 #

## 1.简单的操作 ##

layui.use(['form', 'jquery', 'laydate', 'layer', 'table'], function() {
    	var table = layui.table;
    	//表格的渲染
    	var params={
    		status:1,
    		pageIndex:1,
    		pageSize:9999
    	}
    	table.render({
    		elem: '#hospUserTable',//table的id
    		url: diseaseUrl.getSysUserList,//数据接口
    		page: true, //开启分页
    		height: window.innerHeight/2,//容器高度
    		method:'post',
    		where: params,
    		cols:[[//表头
    			 {
    				field: 'sortNo',
    				title: '序号',
    				width: 60,
    				align: 'center',
    				templet: function(d) {
    					return d.LAY_INDEX;
    				}
    			}, {
    				field: 'name',
    				title: '姓名',
    				width: 100
    			},  {
    				field: 'sex',
    				title: '性别',
    				width: 80,
    				templet: function(d) {
    					if (d.sex == "1") {
    						return "男";
    					} else if (d.sex == "0") {
    						return "女";
    					}else{
    						return "全部";
    					}
    				}
    			},{
    				title: '操作',
    				width: 200,
    				templet: function(d) {
    					var html='';
    						html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updateAccount">修改配置</a>';
    						if (d.status == '1') {
    							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>';
    						} else if (d.status == '0') {
    							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">恢复</a>';
    						}
    					return html;
    				}
    			}
    		]],
         	done: function(res, curr, count){
    		    //如果是异步请求数据方式，res即为你接口返回的信息。
    		    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    		    console.log(res);
    		    
    		    //得到当前页码
    		    console.log(curr); 
    		    
    		    //得到数据总量
    		    console.log(count);
    	  	}
    	});
    	
    })

## 2.toolbar - 绑定列工具条 ##

table.render({
    	cols: [[{
    				title: '操作',
    				width: 200,
    				templet: function(d) {
    					var html='';
    						html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updateAccount">修改配置</a>';
    						if (d.status == '1') {
    							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>';
    						} else if (d.status == '0') {
    							html+='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">恢复</a>';
    						}
    					return html;
    				}
    			}
    	]]
    });
    这个可以换成下面这个
    
    table.render({
    	cols: [[
    		{field:'id', title:'ID', width:100},
    		{ title: '操作',width:150, toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
    	]]
    });
    <script type="text/html" id="barDemo">
    	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updateAccount">修改配置</a>
    	
    	{
       {#  if(d.status == '1'){ }}
    		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>
    	{
       {#  } }}
    	{
       {#  if(d.status == '0'){ }}
    		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">恢复</a>
    	{
       {#  } }}
    </script>
    
    //这个操作 列表操作
        table.on('tool(hospUserTable)', function(obj){
        	var layEvent = obj.event;
        	var meetingId = obj.data.meetingId;
        	if( layEvent === 'updateAccount') { //查看明细
        		$.ajax({
    			    url:diseaseUrl.getSysUserListByUserId,
    			    type:'post',
    			    data:{
    			    	id:obj.data.id
    			    },
    			    success:function(res){
    			    	//操作
    		    		
    			    }
    			})
        	}else if( layEvent === 'delete'){
    			//操作
    		}
        });

## 3.固定返回数据格式 ##

{
    	"code": 0,//这个必须是0
    	"msg": "",
    	"count": 1000,//数据总量
    	"data": [{}, {}],//数据
        
    }

##  4.基础方法 ##

> table.set(options); //设定全局默认参数。options即各项基础参数
    > table.on('event(filter)', callback); //事件监听。event为内置事件名（详见下文），filter为容器lay-filter设定的值
    > table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
    > table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
    > table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
    > table.reload(id, options); //表格重载
    > table.resize(id); //重置表格尺寸
    > table.exportFile(id, data, type); //导出数据

## 5.搜索按钮 ##

// 搜索
    $('#search').on('click', function(){
    	var params = {
    	    pageIndex: 1,
    	    pageSize: 20
    	};
    	var name = $('#name').val();
    	var account = $('#account').val();
    	table.reload('hospUserTable', {
    		url: diseaseUrl.getSysUserList
    		,where: params
    	});
    });

## 6.数据表格table在选项卡tabs中分页条不显示 ##

加个内部样式就好

## 7.横向滚动 ##

body .layui-table-box, body .layui-table-view {
    	::-webkit-scrollbar {
    		height:15px !important;
    	}
    	::-webkit-scrollbar-thumb{
    		background: #f2f2f2 !important;
    	}
    }
    body .layui-table-body {
    	overflow-x: auto !important;
    }

## 8.表格偶数行背景颜色 ##

table.render({
    	elem: '#tables',
    	done: function (res, curr, count) {// 表格渲染完成之后的回调
    		var that = this.elem.next();
    		res.data.forEach(function (item, index) {
    			//console.log(item.empName);item表示每列显示的数据
    			if (index%2==0) {
    				var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "##f2f2f2");
    			} else{
    				var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#fff");
    			} 
    		});
    	}
    });

## 9.后端返回的数据格式 ##

按照layui的table格式data必须是数组格式。但如果data是对象的情况下，可以使用parseData。注意这个parseData属性必须是2.4.0版本layui才可以使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

## 10.单击 或是双击 ##

//监听行单击事件
    table.on('row(dataTable)', function(obj){
             var data = obj.data;
    })
    //监听双击事件 双击事件为：rowDouble
    table.on('rowDouble(dataTable)', function(obj){
             var data = obj.data;
    })

## 11. table的数据 ##

var  intTable =  layui.table.cache.dataTable;//最后一个table的id
    console.log(intTable,'费用表单')

## 12.获取选中的值 ##

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][]

## 13.layui table异步数据接口不支持跨域，不支持多层数据嵌套的替代办法  ##

使用ajax 请求数据并且获取数据 赋值给table

## 14.table中提示信息（鼠标移上显示） ##

table.render({
    	cols: [[
            {
                field: 'name',
                title: '审核名称',
                align: 'center',
                templet: function(d) {
                    var text = "";
                    if (d.feedbackContent == '') {
                        text = d.checkName;
                    } else {
                        text = "<span style='color:#f00;cursor: pointer;' data-text='" + d.feedbackContent +
                            "' onmouseover='showProStatus(this)' lay-event='proStatus'>" + d.checkName +
                            "<i>!</i></span>";
                    }
                    return text;
                }
            },
    	]]
    });
    
    // table 的鼠标移上的效果
    function showProStatus(obj) {
        layui.use(['element', 'form', 'jquery', 'laydate', 'layer', 'table'], function() {
            var $ = layui.jquery;
            layer.tips($(obj).attr('data-text'),$(obj), {
                tips: 1,
                time: 1000
            });
        }
    }

## 15.禁用table拖拽列宽 ##

unresize:true,// 默认是false，是可以拖

table.render({
    	cols: [[
            {
                field: 'name',
                title: '审核名称',
                align: 'center',
                 unresize:true,// 默认是false，是可以拖
    
            },
    	]]
    });

# 四.form操作 #

##  1. 解决取消按钮自动刷新 ##

function cancleFn(event){
         event.stopPropagation();
         event.preventDefault();
     }

# 2.表单赋值 #

2.5.5之后有*form.val('filter', object);*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

之前可以

$.fn.extend({
        /*表单赋值 */
        setform: function (jsonValue) {
            var obj = this;
            $.each(jsonValue, function (name, ival) {
                var $input = obj.find("input[name=" + name + "]");
                if ($input.attr("type") == "radio" || $input.attr("type") == "checkbox") {
                    $input.each(function () {
                        if (Object.prototype.toString.apply(ival) == '[object Array]') { // 是复选框，并且是数组  
                            for (var i = 0; i < ival.length; i++) {
                                if ($(this).val() == ival[i])
                                    $(this).attr("checked", "checked");
                            }
                        } else {
                            if ($(this).val() == ival)
                                $(this).attr("checked", "checked");
                        }
                    });
                } else if ($input.attr("type") == "textarea") { // 多行文本框  
                    obj.find("[name=" + name + "]").html(ival);
                } else {
                    obj.find("[name=" + name + "]").val(ival);
                }
            });
        },
        /*文本赋值 */
        setText: function (jsonValue) {
            var obj = this;
            $.each(jsonValue, function (name, ival) {
                obj.find("span[data-name=" + name + "]").text(ival);
            });
        }
    })
    
    
    var data = { "type1": "1"};
    $('#registerCnt').setform(data);
    form.render();

**select 赋值的时候要在哪后面加form.render();**

**下拉框绑定回车键事件（form 有enter的事件）**

//绑定搜索事件
        form.on('select(trade_type)', function (data) {
            $("#search").trigger("click");
        });

## 3.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的值

## 4.上传文件 ##

<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]

## 5.layUI-layDate时间控件点击闪烁问题 ##

//列表时间选择
    	layui.use('laydate', function(){
    		var laydate = layui.laydate;
    		//执行一个laydate实例
    		laydate.render({
    			 elem: '' //指定元素
    			,trigger: 'click' //自动弹出控件的事件，采用click弹出
    		});
    	});

**在绑定时间控件中加入 trigger:‘click’** 即可

**选中时间后的事件回调**

laydate.render({
            elem: '#dateRange',
            theme: '#1E9FFF',
            trigger: 'click',
            done: function (value, date) {
                $("#search").trigger("click");
            }
        });

# 五.弹出框 #

1.关闭

layer.closeAll();

# 六.问题 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210812/1c0b6a97b7814b558b416b684869a97a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210812/0f345dd75656439a8b6cfcc7731c5571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210812/2ca30f032035448abace8d54c8e5c5de.png
[Link 1]: https://www.cnblogs.com/hunmeng/p/11181578.html