Layui表格table关闭拖拽列宽、禁用拖拽列宽 table 模块是Layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。我们在使用过程中，如果需要关闭Layui表格table拖拽列宽、禁用拖拽列宽，可以用到unresize参数：是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。实例：这里设置为unresize: false,即可.layui.use(['form', 'table'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table.render({ elem: '#currentTableId', url: '', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [[ {type: "checkbox", width: 50}, {field: 'id', width: 80, title: 'ID', sort: true}, {field: 'username', minwidth: 80, title: '账号'}, {field: 'admin_realname', minwidth: 80, title: '姓名'}, {field: 'created_at', width: 150, title: '管理员级别'}, {field: 'created_at', title: '添加时间', width: 160, sort: true}, {field: 'updated_at', width: 160, title: '最近修改', sort: true}, {field: 'stop', width: 80, title: '状态', sort: true}, {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} ]], limits: [10, 15, 20, 25, 50, 100], limit: 15, page: true, unresize: false, // skin: 'line', response: { statusName: 'code' //规定数据状态的字段名称，默认：code ,statusCode: 200 //规定成功的状态码，默认：0 ,msgName: 'msg' //规定状态信息的字段名称，默认：msg ,countName: 'count' //规定数据总数的字段名称，默认：count ,dataName: 'data' //规定数据列表的字段名称，默认：data } }); });

Layui如何使用折叠表格，以及默认自动折叠 我们有时在开发项目是需要用到树形接口，这时我们可以Layui的树形表格treetable插件。参数说明：参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级HTML代码：<div> <div> <div> <script type="text/html" id="toolbarDemo"> <div> <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button> <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button> </div> </script> <table id="munu-table" lay-filter="munu-table"></table> </div> </div> </div> <!-- 操作列 --> <script type="text/html" id="auth-state"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>Js代码：<script> layui.use(['table', 'treetable'], function () { var $ = layui.jquery; var table = layui.table; var treetable = layui.treetable; // 渲染表格 layer.load(2); treetable.render({ toolbar: '#toolbarDemo', treeColIndex: 1, treeSpid: -1, treeIdName: 'id', treePidName: 'pid', elem: '#munu-table', url: '{:url("union/Permission/getPermission")}', // url: '__STATIC__/union/api/menus.json', page: false, treeDefaultClose: true, cols: [[ {type: 'numbers'}, {field: 'name', minWidth: 200, title: '权限名称'}, {field: 'ac', title: '方法'}, {field: 'co', title: '控制器'}, {field: 'url', title: '菜单url'}, {field: 'ico', title: '图标'}, {field: 'sort', width: 80, align: 'center', title: '排序号'}, { field: 'isMenu', width: 80, align: 'center', templet: function (d) { if (d.is_menu == 1) { return '<span class="layui-badge layui-bg-gray">按钮</span>'; }else if (d.is_menu == 2) { return '<span class="layui-badge layui-bg-gray">其他</span>'; }else { return '<span class="layui-badge-rim layui-bg-blue">菜单</span>'; } }, title: '类型' }, {templet: '#auth-state', width: 120, align: 'center', title: '操作'} ]], done: function () { layer.closeAll('loading'); } }); $('#btn-expand').click(function () { treetable.expandAll('#munu-table'); }); $('#btn-fold').click(function () { treetable.foldAll('#munu-table'); }); //监听工具条 table.on('tool(munu-table)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'del') { layer.msg('删除' + data.id); } else if (layEvent === 'edit') { layer.msg('修改' + data.id); } }); }); </script>Json结构数据格式：{ "code": 0, "msg": "", "count": 19, "data": [ { "authorityId": 1, "authorityName": "系统管理", "orderNumber": 1, "menuUrl": null, "menuIcon": "layui-icon-set", "createTime": "2018/06/29 11:05:41", "authority": null, "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 0, "parentId": -1 }, { "authorityId": 2, "authorityName": "用户管理", "orderNumber": 2, "menuUrl": "system/user", "menuIcon": null, "createTime": "2018/06/29 11:05:41", "authority": null, "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 0, "parentId": 1 }, ] }

Layui表格如何显示图片或者图标 Layui如何显示图片或者图标？这个很简单,可以使用 templet 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期格式，图片地址转成图片，图标显示等。显示图片：{{ d.vod_pic }}为图片地址{field: 'article_pic',title: '封面',width: 100,templet:'<div><img src="https://www.tpxhm.com/fdetail/{{ d.vod_pic }}" width="100%"></div>' },显示图标：{{ d.icon }}为图标地址 {field: 'icon',title: '图标',width: 100,templet:'<div><i class="fa {{ d.icon }}"></i></div>' },

解决session或cookie过期时Layui不跳出iframe框架问题 用过layui都会遇到登录页面问题，如果是session或者cookie过期时，用户还停留在操作页面，这时后端会加判断跳到登录，而layui还是在iframe框架下打开登录页面，而我们需要的是关闭所有页面，并跳到iframe页面，这时可以通过以下代码来实现，在login.html页面加入如下js代码。<script > $(document).ready(function () { if (window != top) { top.location.href = location.href; } }); </script>

layui如何自定义layedit富文本编辑器工具栏 layui自带了layedit富文本编辑器，我们在使用过程中有时候不需要全部工具，或者想自定义工具栏，该如何弄呢？以下方法教大家自定义自己的layedit编辑器。步骤1：定义存放编辑器的盒子<div class="layui-form-item layui-form-text"> <label>小程序内容</label> <div> <textarea name="min_content" class="layui-textarea content" id="content" style="display:none" placeholder="请输入META描述" >{php}if( isset($sys_config->min_content) != '' ) echo $sys_config->min_content ;{/php}</textarea> </div> </div>步骤2：实例化layedit<script> layui.use(['layedit','form'], function () { var form = layui.form ,layer = layui.layer ,$ = layui.$; var layedit = layui.layedit; layedit.set({ //暴露layupload参数设置接口 --详细查看layupload参数说明 uploadImage: { url: '/Attachment/LayUploadFile', accept: 'image', acceptMime: 'image/*', exts: 'jpg|png|gif|bmp|jpeg', size: '10240' } , uploadVideo: { url: '/Attachment/LayUploadFile', accept: 'video', acceptMime: 'video/*', exts: 'mp4|flv|avi|rm|rmvb', size: '20480' } //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作， //传递参数： //图片： imgpath --图片路径 //视频： filepath --视频路径 imgpath --封面路径 , calldel: { url: '/Attachment/DeleteFile' } //开发者模式 --默认为false , devmode: true //插入代码设置 , codeConfig: { hide: true, //是否显示编码语言选择框 default: 'javascript' //hide为true时的默认语言格式 } , tool: [ 'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face' , '|', 'left', 'center', 'right', '|', 'link', 'unlink','images', 'image_alt', 'video', 'anchors' , '|','table', 'fullScreen'] , height: '90%' }); var layedit = layedit.build('content'); }); </script>