-
Layui复杂表格
2019-06-08 01:24:28开发工具与关键技术：MVC ...把控制器搭建好了就开始写页面的代码，这里要把layui表格用到的css、js插件拷贝到项目，然后显示所有里，然后引入进来。 <link href="~/Plugins/layui/css/layui.cs...展开全文开发工具与关键技术：MVC
作者：文泽钦
撰写时间：2019年5月3日星期一常见的表格只有一行表头的，但我们今天做一个复杂表格，先看看单表头的效果，等一会写完复杂表格再看复杂的表格。
把控制器搭建好了就开始写页面的代码，这里要把layui表格用到的css、js插件拷贝到项目，然后显示所有里，然后引入进来。<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" /> <script src="~/Plugins/jquery-3.2.1.min.js"></script> <script src="~/Plugins/layui/layui.js"></script>然后给装表格的一个容器，打了这个容器，页面上也是不会有内容显示的。
<div class="container-fluid"> @*在超小（手机等移动端）上强制换行并设置边距*@ <div class="w-100 mb-2 d-inline d-sm-none"></div> @*装表格的一个容器*@ <div class="row"> <div class="col-12"> @* 表格id *@ <table id="tabEmployee" lay-filter="tabEmployee"></table> </div> </div> </div>效果图：
因为我们只是给它一个容器，还没有往容器里面装东西，现在开始往容器里装东西。声明一个变量接收表格数据，声明一个变量用于表格初始化。这里会用到两属性，一个是一行rowspan要占用两行或两行以上的类，一个是合并列colspan，就是一行占用两列或两列以上的类。
这两个类要咋样用呢，一个表头要占用两行时就用rowspan；表头再表头事就用colspan，colspan后面不用添加专属名称。<script> var tabEmployee;//声明一个变量放表格数据 var layer, layuiTable; $(function () { //加载layui模块 layui.use(['layer', 'table'], function () { layer = layui.layer, layuiTable = layui.table; //初始化表格 tabEmployee = layuiTable.render({ elem: '#tabEmployee',//表格id url: "",//路径 cols: [[//表头 { type: "checkbox", rowspan: "2", fixed: "left" },//多选框,fixed:"left"固定在左边 { type: "numbers", rowspan: "2", title: "序号" }, { field: "EmployeeNumber", rowspan: "2", title: "编号", align: "center" }, { field: "EmployeeName", rowspan: "2", title: "姓名", width: 150, align: "center" }, { colspan: "3", title: "信息", align: "center" }, { colspan: "2", title: "工作", align: "center" }, { field: "Remark", rowspan: "2", title: "备注", align: "center" }, ], [ //对应{colspan: "3", title: "信息", align: "center"}表头 { field: "Phone",title: "电话", align: "center" }, { field: "Cellphone",title: "手机", align: "center" }, { field: "Address", title: "地址", align: "center" }, //{对应colspan: "2", title: "工作", align: "center"}表头 { field: "DeoartmentName", title: "部门", align: "center" }, { field: "PositionName", title: "职位", align: "center" }, ]], page: { limit: 10,//指定每页显示的条数 limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项 }, data:[],//空数据原 }); }); }); </script>看看效果：
复杂表格初始就这样完成了，最后搞清楚rowspan和colspan这两个类，这复杂表格也就不复杂了。
-
layui通过下拉框动态渲染多级表头
2019-07-24 16:28:39layui通过下拉框动态渲染多级表头之前遇到的坑 直接上图解决方法 之前遇到的坑 直接上图 选择第二个下拉框时 选回第一个下拉框时 表头全乱了 原本写法是 通过监听下拉框控制表格重载 报错 解决方法 通过监听...展开全文layui通过下拉框动态渲染多级表头
之前遇到的坑 直接上图
选择第二个下拉框时
选回第一个下拉框时 表头全乱了
原本写法是 通过监听下拉框控制表格重载 报错解决方法
通过监听下拉框 然后每次都重新表格实例化覆盖掉
// 监听 开支项目下拉框 form.on("select(select_kaizhi)",function(data){ switch(data.value){ case "个人办公用品": renderCols(data.value) break; case "省内差旅费": renderCols(data.value) break; case "招待费": renderCols(data.value) break; case "宣传用品费": renderCols(data.value) break; case "内部会议费": renderCols(data.value) break; case "教育培训费": renderCols(data.value) break; } })function renderCols(name){ if(name=="个人办公用品" || name=="省内差旅费" || name=="宣传用品费"){ var arr=[[ // 个人办公用品 省内差旅费 宣传用品费 { field:"val01",title:"部门",rowspan:"2",align:'center' }, { field:"val02",title:name+"",colspan:"3",align:'center' } ],[ { field: 'val02',title: '2019年预算',align: 'center'}, { field: 'val03',title: '实际执行数',align: 'center'}, { field: 'val04',title: '预算执行率%',align: 'center'} ]] TableReload(arr) } if(name=="招待费"){ var arr=[[ { field:"val01",title:"部门",rowspan:"3",align:'center' }, { title:"招待费",colspan:"6",align:'center' } ],[ { title:"商务接待",colspan:"3",align:'center' }, { title:"公务接待",colspan:"3",align:'center' } ],[ { field: 'val02',title: '2019年预算',align: 'center'}, { field: 'val03',title: '实际执行数',align: 'center'}, { field: 'val04',title: '预算执行率%',align: 'center'}, { field: 'val05',title: '2019年预算%',align: 'center'}, { field: 'val06',title: '实际执行数%',align: 'center'}, { field: 'val07',title: '预算执行率%',align: 'center'} ]] TableReload(arr) } }function TableReload(cols){ // 表格实例化 tableObj = table.render({ elem: '#data_table', id:'data_table', title: '部门费用预算表', cols: cols, cellMinWidth: 100, toolbar: '#toolbar', defaultToolbar: ['exports'], totalRow: false , page: true , limit: 50 , limits: [50, 100, 200, 1000] , skin: 'line', data: [], even: true }); }后面表头数据就完美解决了
之前用表格重载的方法table.reload(); 解决不了
后面用控制DOM 节点的方法 每次删除再添加 还是报错
借鉴：https://www.cnblogs.com/yysbolg/p/10654281.html
-
TP5.1 Layui (无限级)树形表格treetable
2018-08-29 16:09:01演示地址： https://whvse.gitee.io/treetable-lay/... 例子： TP5.1 + Layui 2.4.0 一、模板代码： <!DOCTYPE html> <html> <head> <meta charse...展开全文演示地址： https://whvse.gitee.io/treetable-lay/
项目地址： https://gitee.com/whvse/treetable-lay例子： TP5.1 + Layui 2.4.0
一、模板代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>导航菜单</title> <link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all"> <script src="__STATIC__/layui/layui.js"></script> <link rel="stylesheet" href="__ADMIN__/css/index.css" media="all"> </head> <body style="background-color: #FFFFFF;"> <!-- 你的HTML代码 --> <!-- 表格 --> <div class="layui-fluid"> <div style="margin-top: 20px;"> <div class="layui-btn-group"> <button class="layui-btn " id="btn-expand"><i class="layui-icon layui-icon-down"></i> 全部展开</button> <button class="layui-btn " id="btn-fold"><i class="layui-icon layui-icon-left"></i> 全部折叠</button> <button class="layui-btn " id="btn-refresh"><i class="layui-icon layui-icon-loading"></i> 刷新表格</button> </div> <div class="layui-inline"> <input class="layui-input" id="edt-search" value="" placeholder="输入关键字"> </div> <button class="layui-btn" id="btn-search" type="button">搜索</button> </div> <!-- 操作列 --> <table id="table1" class="layui-table" lay-filter="table1"></table> <script type="text/html" id="toolbarDemo"> <!--<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>--> <div class="layui-btn-group"> <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 增加</button> <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</button> <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</button> </div> </script> <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> <!-- 表格end --> <script> layui.config({ base: '__STATIC__/menu/' }).extend({ treetable: 'treetable-lay/treetable' }).use(['layer', 'table', 'treetable','form','jquery'], function () { var $ = layui.jquery; var table = layui.table; var form = layui.form; // var element = layui.element; var layer = layui.layer; var treetable = layui.treetable; // 渲染表格 var renderTable = function () { layer.load(2); treetable.render({ treeColIndex: 1, treeSpid: -1, treeIdName: 'id', treePidName: 'pid', treeDefaultClose: true, treeLinkage: false, elem: '#table1', //url: '__STATIC__/json/menus.json', url: '{:url('menujsondata')}', toolbar:'#toolbarDemo', page: false, cols: [[ {type: 'checkbox'}, {field: 'title', minWidth: 200, title: '名称'}, {field: 'sort', width: 80, align: 'center', title: '排序号'}, {field: 'hide', width: 80, align: 'center', templet: function (d) { if (d.hide == 1) { return '<span class="layui-badge layui-bg-blue">隐藏</span>'; } else { return '<span class="layui-badge-rim">显示</span>'; } }, title: '显隐' }, {templet: '#auth-state', width: 120, align: 'center', title: '操作'} ]], done: function () { layer.closeAll('loading'); } }); }; renderTable(); //全部展开 $(document).on("click","#btn-expand",function(){ treetable.expandAll('#table1'); }); //全部折叠 $(document).on("click","#btn-fold",function(){ treetable.foldAll('#table1'); }); //刷新表格 $(document).on("click","#btn-refresh",function(){ renderTable(); }); //搜索 $(document).on("click","#btn-search",function(){ var keyword = $('#edt-search').val(); var searchCount = 0; $('#table1').next('.treeTable').find('.layui-table-body tbody tr td').each(function () { $(this).css('background-color', 'transparent'); var text = $(this).text(); if (keyword != '' && text.indexOf(keyword) >= 0) { $(this).css('background-color', 'rgba(250,230,160,0.5)'); if (searchCount == 0) { treetable.expandAll('#table1'); $('html,body').stop(true); $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500); } searchCount++; } }); if (keyword == '') { layer.msg("请输入搜索内容", {icon: 5}); } else if (searchCount == 0) { layer.msg("没有匹配结果", {icon: 5}); } }); //头工具栏事件 table.on('toolbar(table1)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'add': layer.ready(function(){ layer.open({ type: 2, title: '增加', maxmin: true, area: ['80%', '70%'], content: '{:url('add')}', cancel: function(){ //刷新网页 //重新加载表格数据 self.location='{:url('index')}'; } }); }); //layer.msg('增加' + obj.config.id); break; case 'edit': var data = checkStatus.data; var dataall = ''; //data = JSON.stringify(data); //循环把所有要删除的ID整成12,13,545 for(var i=0;i<data.length;i++){ dataall += data[i].id+","; } dataall=dataall.substring(0,dataall.length-1) // console.log(dataall) // layer.alert(dataall); break; case 'del': var data = checkStatus.data; var dataall = ''; //data = JSON.stringify(data); //循环把所有要删除的ID整成12,13,545 for(var i=0;i<data.length;i++){ dataall += data[i].id+","; } dataall=dataall.substring(0,dataall.length-1) // console.log(dataall) layer.alert(dataall); break; }; }); //监听工具条 table.on('tool(table1)', function (obj) { var data = obj.data; console.log(data) var layEvent = obj.event; if (layEvent === 'del') { layer.msg('删除' + data.id); } else if (layEvent === 'edit') { layer.msg('修改' + data.id); } }); }); </script> </body> </html>注意：
1、插件路径
2、数据源的路径
二、控制器代码
<?php namespace app\admin\controller; use think\Controller; use think\Validate; use think\Db; use think\db\Where; class Menu extends Common{ /** * 栏目列表 */ public function index(){ // $res = Db::name('menu')->where('level',1)->order('sort desc')->select(); // menujson(0,'ok',$res); return $this->fetch(); } /** * 导航菜单JSON数据 */ public function menujsondata(){ $res = Db::name('menu')->select(); foreach($res as $k => $rs){ $data[$k]['id']=$rs['id']; $data[$k]['title']=$rs['title']; $data[$k]['sort']=$rs['sort'];//排序 $data[$k]['icon']=$rs['icon']; $data[$k]['hide']=$rs['hide']; $data[$k]['pid']=$rs['pid']; } json(0,'',$count,$data); } /** * 添加栏目、保存 */ public function add(){ $id=input('id'); $pid=input('pid'); //$level1=input('level'); //$level=input('level'); //$this->assign('level',$level); //当前 //$level2=input('level'); //$this->assign('level2',$level2); // $levelx=$level+1; // $this->assign('levelx',$levelx); //取得一级栏目 //$column_rs=Db::name('column')->where('level',$level1)->order('sort','desc')->select(); //$this->assign('column_rs',$column_rs); // $res = Db::name('menu')->where('level',1)->order('sort desc')->select(); // $this->assign('name',$data); if($id){ $rs=Db::name('menu')->field('id,level,pid,title,position,hide,sort')->where('id',$id)->find(); $this->assign('rs',$rs); } if (request()->isPost()){ //$title=input('title'); $data = input('post.'); if(!$data['pid']){ $data['pid']= -1; } $validate = Validate::make([ 'title' => 'require|max:30', ]); if (!$validate->check($data)) { $this->error('错误:'.$validate->getError()); } $rsi=db('menu')->insert($data); if($rsi){ $this->success('成功！',url('add',['pid'=>$pid,'level'=>$level-2])); }else{ $this->error('失败'); } return; } return $this->fetch(); } }三、数据库
例子： TP5.1 + Layui 2.4.0(增强版)(完全代码)
1、模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>导航菜单</title> <link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all"> <script src="__STATIC__/layui/layui.js"></script> <link rel="stylesheet" href="__ADMIN__/css/index.css" media="all"> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" href="__ADMIN__/css/font-awesome.css"> <style> </style> </head> <body style="background-color: #FFFFFF;"> <!-- 你的HTML代码 --> <!-- 表格 --> <div class="layui-fluid"> <!-- 操作列 --> <div id="m_id"> <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table> </div> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-group"> <button class="layui-btn layui-btn-primary layui-btn-xs" onclick="add(null);"><i class="layui-icon layui-icon-add-1"></i>增加</button> <button class="layui-btn layui-btn-primary layui-btn-xs" id="btn-fold" data-id="1"><i class="layui-icon layui-icon-align-left"></i>折叠/展开</button> <button class="layui-btn layui-btn-primary layui-btn-xs" onclick="refresh();"><i class="layui-icon layui-icon-edit"></i>刷新</button> <button class="layui-btn layui-btn-primary layui-btn-xs" onclick="delAll();"><i class="layui-icon layui-icon-delete"></i>删除</button> </div> </script> <script type="text/html" id="auth-state"> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <!-- 这里的 显示/隐藏 --> <script type="text/html" id="switchTpl"> <input type="checkbox" name="hide" value="{{d.id}}" lay-skin="switch" lay-text="隐藏|显示" lay-filter="sexDemo" {{ d.hide == 1 ? 'checked' : '' }}> </script> <!-- 位置 --> <script type="text/html" id="positionTpl"> {{# if(d.position == 2){ }} <span style="color: #01AAED;"> 底部</span> {{# } else if(d.position == 3) { }} <span style="color: #FF5722;">都在</span> {{# } else { }} 顶部 {{# } }} </script> <!-- 表格end --> <script> var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null; layui.config({ base: '__STATIC__/menu/treegrid/' }).extend({ treeGrid:'treeGrid' }).use(['jquery','treeGrid','layer', 'table'], function(){ var $=layui.jquery; table = layui.table; treeGrid = layui.treeGrid;//很重要 form = layui.form; layer=layui.layer; ptable=function(){ treeGrid.render({ id:tableId ,elem: '#'+tableId //,height: '' //固定值 ,idField:'id' //,url:'__STATIC__/json/treegrid_data.json' ,url:'{:url('menujsondata')}' ,toolbar:'#toolbarDemo' ,cellMinWidth: 100 ,treeId:'id'//树形id字段名称 ,treeUpId:'pId'//树形父id字段名称 ,treeShowName:'name'//以树形式显示的字段 ,cols: [[ {type:'checkbox'} ,{width:60,title: '增加', align:'center'/*toolbar: '#barDemo'*/ ,templet: function(d){ var html=''; var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>'; return addBtn; } } //,{field:'id',width:70, title: 'id'} ,{field:'sort', edit:'text',width:70, title: '排序'} ,{field:'name', edit:'text', title: '名称'} //,{field:'icon', title: '图标', event: 'addIcon', style:'cursor: pointer;'} ,{field:'url', edit:'text', title: 'pid',width:180, title: '网址'} ,{field:'icon', title: '图标', event: 'addIcon', style:'cursor: pointer;', width: 60 ,templet: function(d){ return '<i class="fa fa-'+ d.icon +'" style="font-size: 20px; color: #1E9FFF;"></i>' } } ,{field:'position', title: '位置', event: 'addPosition', style:'cursor: pointer;', width: 60, templet: '#positionTpl'} ,{field:'hide', title:'显/隐', width:85, templet: '#switchTpl', unresize: true} ,{templet: '#auth-state', width: 70, align: 'center', title: '操作'} ]] ,page:false }); }; ptable(); //折叠/展开 $(document).on("click","#btn-fold",function(){ var map=treeGrid.getDataMap(tableId); var data_id2 = $(this).attr("data-id") var m; if(data_id2 == 1){ m = true;; $(this).attr("data-id",2) }else if(data_id2 == 2){ m = false; $(this).attr("data-id",1) }; // console.log(map) $.each(map, function(i) { if(map[i].pId){ var a = map[i].pId; var o= map[a]; treeGrid.treeNodeOpen(o,m); // treeGrid.treeNodeOpen(o,!o.is_open); } }); }); treeGrid.on('tool('+tableId+')',function (obj) { if(obj.event === 'del'){ console.log(obj) //删除行 del(obj); }else if(obj.event==="add"){ //添加行 add(obj); }else if(obj.event==="addIcon"){ //添加图标 addicon(obj); }else if(obj.event==="addPosition"){ //添加位置 addPosition(obj); } }); //更新 显示/隐藏 操作 form.on('switch(sexDemo)', function(obj){ //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis); console.log(this.value + '|' + this.name + '：'+ obj.elem.checked, obj.othis) var id=this.value; var field=this.name; var value = obj.elem.checked; if(value){ value =1; }else{ value =0; } //console.log(value); //更新后台数据 $.ajax({ type: "post", url: "{:url('edit')}", data: {id:id,title:value,field:field,action:'ajax_update'}, success:function(data){ layer.msg(data['msg']); }, error:function(){ layer.msg('更新失败！'); } }); }); }); //单个删除 function del(obj) { var pdata=obj?obj.data:null; //alert(pdata.id) layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'}, function(index){ //确定回调 obj.del(); //更新后台数据 $.ajax({ type: "post", url: "{:url('del')}", data: {id:pdata.id}, success:function(data){ if(data[0]==1){ layer.msg(data[1]); // self.location='{:url('index')}'; }else{ layer.msg('失败！'+data[1]); //table.render({});//重新渲染 } }, error:function(){ layer.msg('更新失败！'); } }); layer.close(index); },function (index) { //取消回调 layer.close(index); } ); } var i=1000; //添加 function add(pObj) { //console.log(pObj) var pdata=pObj?pObj.data:null; //console.log(pdata); var param={}; param.name='请修改标题'; //param.id=++i; param.pId=pdata?pdata.id:null; // treeGrid.addRow(tableId,pdata?pdata.LAY_TABLE_INDEX+1:0,param); //更新后台数据 $.ajax({ type: "post", url: "{:url('add')}", data: {id:param.id,pid:param.pId,title:param.name,action:'ajax_add'}, success: function(data){ layer.msg(data['msg']); var id=154; //param.name='请修改标题'; param.id=data['menuid']; //param.pId=pdata?pdata.id:null; treeGrid.addRow(tableId,pdata?pdata.LAY_TABLE_INDEX+1:0,param); //执行重载 //ptable() }, error: function(){ layer.msg('更新失败!'); } }); } //更新图标 function addicon(pibj) { //console.log(pObj) var pdata=pibj?pibj.data:null; //console.log(pdata); //console.log(pdata.id); layer.ready(function(){ layer.open({ type: 2, title: '更新图标', maxmin: true, area: ['80%', '70%'], content: '{:url('add')}?action=ajax_update&field=icon&id='+pdata.id, cancel: function(){ //刷新网页 //重新加载表格数据 //self.location='{:url('index')}'; ptable() } }); }); } //更新位置 function addPosition(ppbj) { //console.log(pObj) var pdata=ppbj?ppbj.data:null; //console.log(pdata); //console.log(pdata.id); layer.ready(function(){ layer.open({ type: 2, title: '更新位置', maxmin: true, area: ['80%', '70%'], content: '{:url('add')}?action=ajax_update&field=position&id='+pdata.id, cancel: function(){ //刷新网页 //重新加载表格数据 ptable() } }); }); } function print() { console.log(treeGrid.cache[tableId]); var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", { time:3000 ,offset: 'auto'//顶部 ,shade: 0 }); } //刷新 function refresh() { ptable() } //批量删除 function delAll() { //alert('1') var checkStatus = treeGrid.checkStatus(tableId) //console.log(JSON.stringify(data)) var dataall=''; data = checkStatus.data; //循环把所有要删除的ID整成12,13,545 for(var i=0;i<checkStatus.data.length;i++){ dataall += data[i].id+","; } dataall=dataall.substring(0,dataall.length-1) //alert(dataall) //layer.alert(dataall); layer.confirm('真的删除行么', function(index){ //obj.del(); //id= data.id; layer.close(index); $.ajax({ url:'{:url('del')}', type:"post", data:{id:dataall}, async:true, success:function(data){ if(data[0]==1){ layer.msg(data[1]); //table.reload(treeTable) //self.location='{:url('index')}'; }else{ layer.msg('失败！'+data[1]); // } //table.reload(treeTable) ptable() }, error:function(){ layer.msg('页面跳转失败！'); } }); }); } // function openorclose() { // var map=treeGrid.getDataMap(tableId); // //var o= map['257','259']; // // // treeGrid.treeNodeOpen(o,!o.is_open); // } function getCheckData() { var checkStatus = treeGrid.checkStatus(tableId) ,data = checkStatus.data; layer.alert(JSON.stringify(data)); } function getCheckLength() { var checkStatus = treeGrid.checkStatus(tableId) ,data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); } </script> </body> </html>2、控制器代码
<?php namespace app\admin\controller; use think\Controller; use think\Validate; use think\Db; use think\db\Where; class Menu extends Common{ /** * 栏目列表 */ public function index(){ // $res = Db::name('menu')->where('level',1)->order('sort desc')->select(); // menujson(0,'ok',$res); return $this->fetch(); } /** * 导航菜单JSON数据 */ public function menujsondata(){ $res = Db::name('menu')->order('sort', 'desc')->select(); $count = count($res); foreach($res as $k => $rs){ $data[$k]['id']=$rs['id']; $data[$k]['name']=$rs['title']; //先判断是否有下级数据 有则加上参数is_open $where1['pid']=$rs['id']; $checkRepeat=checkRepeat('menu',$where1,0);//一种有条件(比如自身修改)的查询重复 if($checkRepeat){ $data[$k]['is_open']=false;//true=展开 false=收起 } $data[$k]['sort']=$rs['sort'];//排序 $data[$k]['icon']=$rs['icon']; $data[$k]['hide']=$rs['hide']; $data[$k]['position']=$rs['position']; $data[$k]['pId']=$rs['pid']; } json(0,'',$count,$data); } /** * 添加栏目、保存 */ public function add(){ $id=input('id'); $this->assign('id',$id); $pid=input('pid'); $title=input('title'); $action=input('action'); $this->assign('action',$action); $field=input('field'); $this->assign('field',$field); if($id){//更新图标要用 //列出数据 $rs=Db::name('menu')->field('id,icon,position')->where('id',$id)->find(); $this->assign('rs',$rs); } //ajax 更新标题 if($action=="ajax_add" && $title){ // echo ($id."|".$pid."|".$title);die; $data_ajax['title']=$title; if($pid){ $data_ajax['pid']=$pid; } //$rs=db('menu')->insert($data_ajax); $menuid=db('menu')->insertGetId($data_ajax); if($menuid){ $arr['code']=1; $arr['msg']="添加成功"; $arr['title']=$title; $arr['menuid']=$menuid; //$se="更新成功"; }else{ $arr['code']=2; $arr['msg']="添加失败"; $arr['title']=$title; $arr['menuid']=''; } return $arr;die; } //$level1=input('level'); //$level=input('level'); //$this->assign('level',$level); //当前 //$level2=input('level'); //$this->assign('level2',$level2); // $levelx=$level+1; // $this->assign('levelx',$levelx); //取得一级栏目 //$column_rs=Db::name('column')->where('level',$level1)->order('sort','desc')->select(); //$this->assign('column_rs',$column_rs); // $res = Db::name('menu')->where('level',1)->order('sort desc')->select(); // $this->assign('name',$data); // if($id){ // $rs=Db::name('menu')->field('id,level,pid,title,position,hide,sort')->where('id',$id)->find(); // $this->assign('rs',$rs); // } // // if (request()->isPost()){ // // // //$title=input('title'); // $data = input('post.'); if(!$data['pid']){ $data['pid']= -1; } // $validate = Validate::make([ // 'title' => 'require|max:30', // ]); // // if (!$validate->check($data)) { // $this->error('错误:'.$validate->getError()); // } // $rsi=db('menu')->insert($data); // // if($rsi){ // $this->success('成功！',url('add',['pid'=>$pid,'level'=>$level-2])); // }else{ // $this->error('失败'); // } // // return; // } return $this->fetch(); } /** * 编辑栏目、保存 */ public function edit(){ $action=input('action'); $id=input('id'); $field=input('field'); $title=input('title'); $icon=input('icon'); $url=input('url'); $sort=input('sort'); $hide=input('hide'); //$position=input('position'); //dump($title);die; //$spread=input('spread'); //$controller=input('controller'); $pid=input('pid'); //ajax 更新标题 if($action=="ajax_update" && $id){//更新字段值 $field=$field=="name"?"title":$field;//当字段是name是要转换成数据库对应的字段title $rs=Db::name('menu')->where('id', $id)->update([$field => $title]); if($rs){ $arr['code']=1; $arr['msg']="更新成功"; $arr['title']=$title; //$se="更新成功"; }else{ $arr['code']=2; $arr['msg']="更新失败"; $arr['title']=$title; } if($field=="icon" || $field=="position"){//更新icon图标、位置 return $arr['msg'];die; }else{ return $arr;die; } } if($pid=="a"){ $pid=0; } // $level=input('level'); // // if(!$id){ // $this->error('错误：ID非空！'); // } // // if (request()->isPost()){ // // $rs=Db::name('column') // ->where('id', $id) // ->update(['title' => $title,'icon' => $icon,'url' => $url,'sort' => $sort,'hide' => $hide,'position' => $position,'spread' => $spread,'controller' => $controller,'pid' => $pid]); // // // if($rs){ // //$this->success('成功！',url('add')); // $this->success('成功！',url('column/add',['id'=>$id,'pid'=>$pid,'level'=>$level-1])); // }else{ // $this->error('失败！'); // } // // return; // } // // return $this->fetch(); // return view(add); } //栏目列表 读出接口数据 public function columntable() { $pid=input('pid'); $flid=input('flid'); $ts_id=input('ts_id');//上报教学站 $page=input('page');//页数 $limit=input('limit');//一页多少条记录 $type=input('type');//搜索分类 $key=input('key');//搜索关键词 $where = new Where; if($key==""){//不搜索 //级别 if($pid){ $where['pid'] = $pid; }else{ $where['pid'] = 0; } }else{//搜索 //类别 if($type=="id"){ $where[$type] = $key; }else{ $where['flid'] = $flid; $where[$type] = ['like',"%".$key."%"]; } } $rs=Db::name('menu')->where($where)->order('id desc')->limit($limit)->page($page)->select(); $rs1=Db::name('menu')->where($where)->select(); $count = count($rs1);//取得记录集总条数 json(0,'数据返回成功',$count,$rs); } //通用删除 public function del(){ $id=input('id');//id $dataname="menu";//表名 if(!$id && !$dataname){ $this->error('错误：参数不为空！'); } $del_info=del($dataname,$id,1,$dataname,'pid'); $del_info = explode(',',$del_info); if($del_info[0]==1){//1=成功 $date=[1,$del_info[1]]; }elseif($del_info[0]==2){//失败 $date=[0,$del_info[1]]; } return $date; } //图标 public function icon(){ return $this->fetch(); } }3、treeTable插件代码有修改
修改treeTable代码在这里打包下载：https://download.csdn.net/download/haibo0668/10638716
插件放置路径按上面例子放
修改dltable.js位置：
1、增加修改字段参数
that.layBody.on('change', '.'+ELEM_EDIT, function(){
2、原代码有BUG，如果第一个数组PID有值，就只会显示一条数据
Class.prototype.resetData=function(list) {
4、edu_menu表代码
/* Navicat MySQL Data Transfer Source Server : 本机 Source Server Version : 50553 Source Host : localhost:3306 Source Database : edu_cms Target Server Type : MYSQL Target Server Version : 50553 File Encoding : 65001 Date: 2018-09-01 16:26:08 */ SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for `edu_menu` -- ---------------------------- DROP TABLE IF EXISTS `edu_menu`; CREATE TABLE `edu_menu` ( `id` int(11) NOT NULL AUTO_INCREMENT, `model` tinyint(11) DEFAULT '1' COMMENT '模型 1产品(要购买) 2文章 3单页 4bbs 5留言 6招聘', `icon` varchar(100) DEFAULT NULL COMMENT '图标', `title` varchar(30) DEFAULT NULL COMMENT '标题', `pid` int(11) DEFAULT NULL COMMENT '父类id', `pid_all` varchar(300) DEFAULT NULL COMMENT '所有上级的父类id 18,19,15', `hide` tinyint(1) DEFAULT '0' COMMENT '显示是否 0显示 1隐藏', `url` varchar(150) DEFAULT NULL COMMENT '链接', `sort` int(11) DEFAULT '0' COMMENT '排序', `level` int(11) DEFAULT '0' COMMENT '层次', `position` tinyint(4) DEFAULT '1' COMMENT '位置 1顶部 2底部 3都在', `enterprise_id` int(11) DEFAULT NULL COMMENT '企业ID', `add_user_id` int(11) DEFAULT NULL COMMENT '添加者ID', `time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '创建时间', PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=445 DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of edu_menu -- ---------------------------- INSERT INTO `edu_menu` VALUES ('433', '1', null, '人力', '377', '377', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:00'); INSERT INTO `edu_menu` VALUES ('431', '1', null, '会计', '377', '377', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:05'); INSERT INTO `edu_menu` VALUES ('291', null, 'thermometer-0', '图书商城', null, null, '0', '', '1', '0', '1', null, null, '2018-08-31 18:45:19'); INSERT INTO `edu_menu` VALUES ('432', '1', null, '教师', '377', '377', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:03'); INSERT INTO `edu_menu` VALUES ('327', null, null, '录播课程', null, null, '0', null, '10', '0', '2', null, null, '2018-08-31 18:19:32'); INSERT INTO `edu_menu` VALUES ('435', '1', null, '行业新闻', '382', '382', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:18'); INSERT INTO `edu_menu` VALUES ('342', null, null, '首页', null, null, '0', null, '300', '0', '1', null, null, '2018-08-31 19:16:28'); INSERT INTO `edu_menu` VALUES ('419', '1', null, '中学', '417', '349,417', '0', null, '0', '2', '1', null, null, '2018-09-01 15:50:23'); INSERT INTO `edu_menu` VALUES ('418', '1', null, '小学', '417', '349,417', '0', null, '0', '2', '1', null, null, '2018-09-01 15:50:25'); INSERT INTO `edu_menu` VALUES ('439', '1', null, '公司简介', '384', '384', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:41'); INSERT INTO `edu_menu` VALUES ('349', '3', null, '直播课程', null, null, '1', null, '200', '0', '3', null, null, '2018-09-01 12:47:42'); INSERT INTO `edu_menu` VALUES ('427', '1', null, 'JS教程', '426', '291,426', '0', null, '0', '2', '1', null, null, '2018-09-01 15:51:39'); INSERT INTO `edu_menu` VALUES ('438', '1', null, '请修改标题', '384', '384', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:33'); INSERT INTO `edu_menu` VALUES ('357', null, null, '请修改标题2', '355', null, '0', null, '0', '0', '1', null, null, '2018-08-31 10:12:50'); INSERT INTO `edu_menu` VALUES ('421', '1', null, '中学2', '420', '327,420', '0', null, '0', '2', '1', null, null, '2018-09-01 15:50:56'); INSERT INTO `edu_menu` VALUES ('420', '1', null, '教师1', '327', '327', '0', null, '0', '1', '1', null, null, '2018-09-01 15:50:45'); INSERT INTO `edu_menu` VALUES ('417', '1', null, '教师', '349', '349', '0', null, '0', '1', '1', null, null, '2018-09-01 15:50:17'); INSERT INTO `edu_menu` VALUES ('377', null, null, '讲师团队', null, null, '0', null, '0', '0', '1', null, null, '2018-08-31 18:48:39'); INSERT INTO `edu_menu` VALUES ('434', '1', null, '公司新闻', '382', '382', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:20'); INSERT INTO `edu_menu` VALUES ('382', null, null, '新闻资讯', null, null, '0', null, '0', '0', '1', null, null, '2018-08-31 19:07:03'); INSERT INTO `edu_menu` VALUES ('384', null, null, '关于我们', null, null, '0', null, '0', '0', '1', null, null, '2018-08-31 19:08:15'); INSERT INTO `edu_menu` VALUES ('428', '1', null, 'PHP教程', '426', '291,426', '0', null, '0', '2', '1', null, null, '2018-09-01 15:51:30'); INSERT INTO `edu_menu` VALUES ('426', '1', null, '计算机', '291', '291', '0', null, '0', '1', '1', null, null, '2018-09-01 15:51:26'); INSERT INTO `edu_menu` VALUES ('414', '1', null, '请修改1', '413', '349,413', '0', null, '0', '2', '1', null, null, '2018-09-01 15:49:19'); INSERT INTO `edu_menu` VALUES ('413', '1', null, '自考', '349', '349', '0', null, '0', '1', '1', null, null, '2018-09-01 15:49:01'); INSERT INTO `edu_menu` VALUES ('415', '1', null, '本科', '413', '349,413', '0', null, '0', '2', '1', null, null, '2018-09-01 15:49:16'); INSERT INTO `edu_menu` VALUES ('416', '1', null, '专科', '413', '349,413', '0', null, '0', '2', '1', null, null, '2018-09-01 15:49:12'); INSERT INTO `edu_menu` VALUES ('422', '1', null, '小学2', '420', '327,420', '0', null, '0', '2', '1', null, null, '2018-09-01 15:50:51'); INSERT INTO `edu_menu` VALUES ('423', '1', null, '自考1', '327', '327', '0', null, '0', '1', '1', null, null, '2018-09-01 15:51:06'); INSERT INTO `edu_menu` VALUES ('424', '1', null, '研究生', '423', '327,423', '0', null, '0', '2', '1', null, null, '2018-09-01 15:51:14'); INSERT INTO `edu_menu` VALUES ('425', '1', null, '博士', '423', '327,423', '0', null, '0', '2', '1', null, null, '2018-09-01 15:51:10'); INSERT INTO `edu_menu` VALUES ('429', '1', null, '自考', '291', '291', '0', null, '0', '1', '1', null, null, '2018-09-01 15:51:43'); INSERT INTO `edu_menu` VALUES ('430', '1', null, '专科升本科密级', '429', '291,429', '0', null, '0', '2', '1', null, null, '2018-09-01 15:51:48'); INSERT INTO `edu_menu` VALUES ('436', '1', null, '公告', '382', '382', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:16'); INSERT INTO `edu_menu` VALUES ('440', '1', null, '公司地址', '384', '384', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:39'); INSERT INTO `edu_menu` VALUES ('441', '1', null, '联系我们', '384', '384', '0', null, '0', '1', '1', null, null, '2018-09-01 15:52:37');调用方法：
控制代码：
$res = Db::name('menu')->field('id as value,title as name,pid')->whereNull('pid')->order(['sort'=>'desc'])->select(); foreach($res as $k => $rs){ $rs['children']=getList2($rs['value']); $res[$k]= $rs; } echo json_encode($res);getList2函数
/** * 无限级分类 * getList2返回的数据都是二级、3级、4级、5级、6级等数据;一级在调用那边实现 * 导航菜单引用 */ function getList2($id) { $tree = ''; $list=Db::name('menu')->field('id as value,title as name,pid')->where('pid',$id)->select(); foreach($list as $key => $val ){ if($val['pid']!=0){ $val['children'] = getList2($val['value']); $tree[] = $val; } } return $tree; //echo json_encode($tree); }模板代码：
<div class="layui-form-item"> <label class="layui-form-label">分类</label> <div class="layui-input-block"> <select name="city" xm-select="select15_2"> <option value="">请选择, 此处是联动多选</option> </select> </div> </div><!-- 引入分类 多选样式 开始 --> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="__STATIC__/menu/formSelects/formSelects-v4.css"/> <script src="__STATIC__/menu/formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var formSelects = layui.formSelects; formSelects.config({ success: function(id, url, val, result){ console.log("success回调: " + url, id); }, error: function(id, url, val, err){ console.log("err回调: " + url, id); } }); formSelects.data('select15_2', 'server', { type: "post", url: '{:url('menu/menujsondata')}', data:{action:'category'}, linkage: true, linkageWidth: 130, }); </script> <!-- 引入分类 多选样式 结束 -->/** * 格式函数 专门把数据录格式成为layui 数据表格的格式 */ function json($code,$msg="",$count,$data=array()){ $result=array( 'code'=>$code, 'msg'=>$msg, 'count'=>$count, 'data'=>$data ); //输出json echo json_encode($result); exit; }
-
layui框架table 数据表格的方法级渲染详解
2020-10-18 04:40:03今天小编就为大家分享一篇layui框架table 数据表格的方法级渲染详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 -
Layui渲染多级表头和设置表格颜色
2019-07-29 21:58:03Layui渲染多级表头和设置表格颜色 开发工具与关键技术：VS MVC 作者：木林森 撰写时间：2019年7 月29 日 在做项目的过程中，我遇到了许多多级表头的渲染，因为之前也做过很多layui表格的渲染，我就以为两个表头的...展开全文Layui渲染多级表头和设置表格颜色
开发工具与关键技术：VS MVC
作者：木林森
撰写时间：2019年7 月29 日
在做项目的过程中，我遇到了许多多级表头的渲染，因为之前也做过很多layui表格的渲染，我就以为两个表头的渲染和一个表头的一样，但是当我写两个表的渲染时，想要的样式却迟迟弄不出来。后来我又自己写HTML，设定好一级表头的样式，给它一个固定的宽度，然后在二级表头处又设置一定的宽度，那样虽然弄出了想要的样式，但是当表格的列数过多时，它就会出现页面“抽搐”的现象，所以最后我还是上网搜索了layui的网站，功夫不负有心人吧，我很快就找到了方法，下面看看我是怎么做的吧
首先跟一个表的渲染一样，先var声明一个全局变量，然后就是最重要的一步——多表头的渲染了，它是写在cols 里面的，简要样式：cols:[[一级表头],[二级表头]]，例子代码如图1：
图1
其实多级表头最重要的就是图中标出的colspan，它代表的是横跨下一级表头的单元格数，除了横跨的外还有一个纵向的，纵向的用rowspan，它使用的方法和横跨的一样，colspan和rowspan也就决定了该表是否为多级表头。
看完代码，那看看效果如何吧，效果如图2：
图2
咦，好像哪里不对，是不是样式完成了效果却不明显呢，又一个问题出现了，话不多说盘它！
即然是设置多级表头，那我就给表头设置样式好了，记得好像可以用done设置，要不试试？
先看看代码有没有错（图3）：再看看效果（图4）：
图3图4
咦……怎么还是很丑，难道还要设置行的样式？且先写着看看：
图5图6
好像还可以，但是为何一级表头的顶部边框会没有呢，难道刚才设置的th对一级表头不起作用？尝试n种一级表头的设置后，我还是弄不出那个……所以请看到这里的小伙伴提点一下我，拜托了，我会看评论的。
当然在一级表头处设置不了，我就得换种思路了，一级表头的顶部边框不就是意味着能在表格头部工具栏设置底部边框嘛，那就试试，看看能不能得到想要的效果喽。
设置工具栏的代码如图7
图7
效果如图8
图8
看来效果还是可以的，但是那个问题我还没有找到方法，所以在线求解，希望知道如何解答的小伙伴不吝赐教！
-
layui数据表格data无法渲染多层嵌套JSON数据格式
2020-07-27 16:02:54layui的数据表格接口只能获取到data属性的最外层数据，我们项目中返回的JSON数据branchInfo和customerInfo都在第二层，这时就和layui要求的数据格式发生了冲突，但为了不修改后台json的数据格式，解决方案： ... -
LayUi 折叠表格
2018-12-13 13:32:44技术交流群：958923746，有学习视频，文档等。 <#include "/common/layout.html"....layui-tree-head{ cursor: pointer; } </style> <script src="/plug -
layui表格使用总结（表头表内容主体不对齐、多级表头等）
2021-08-23 16:01:12layui表格有三种渲染方式，此文使用的是方法渲染。以下功能均是基于方法渲染。 一、排序 为某列排序，在table渲染时，首先要开启排序，然后添加initSort参数，并添加要排序的字段名： <table id="layTable" ... -
用layui做二级，三级，多级联动表单
2018-11-10 18:53:05TIP：作者这里以二级联动为例 ... ... <div class="layui-form-item"> <label for="trade" class="layui-form-label"> <span class="x. -
关于layUI多级表头的异常
2019-12-19 15:12:05记录下使用layUI多级表头时犯的一个错误，其实主要原因是我多写了一个逗号 “ , ” 导致报错的，我的表格只有2级表头，在第二级时多写了一个逗号 错误提示： layui.all.js?v=1.1.1:179 Laytpl Error：TypeError:... -
layui下拉框多级联动的实现
2019-07-09 15:22:47下拉框多级联动的实现 -
JS_layui数据表格分组展示控件
2021-11-08 10:39:57虽然layui已经下架了，但是相信还是有很多伙伴在使用，但是layui table表格没有分组显示功能。 本资源对原layui table控件进行了扩展，增加了分组展示功能。 * layui分组表格控件，用于实现页面数据分组，并以树形... -
用layui创建表格
2021-05-15 20:12:11下面我来给大家看一下所利用jq和layui来创建的表单 ...渲染表格的方法有3种{ 方法渲染 table.render()：基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器 自动渲染: 所谓的自动渲染，即：在一段 -
layui数据表格表头的判断
2020-05-28 10:50:41layui的数据表格可以在你查出数据之后直接解析展示数据，非常的方便。 但是在获取数据的时候数据的type不同，或者数据对应的属性不同，在设置表头的时候就会有点难受 我们可以这样设置在弹出表之前可以先去判断数据... -
基于layui table返回的值的多级嵌套的解决方法
2020-10-16 08:55:05今天小编就为大家分享一篇基于layui table返回的值的多级嵌套的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 -
简单使用layui完成表格
2019-05-17 09:26:45一、layui及数据表格的简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，而且门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈... -
layui动态表格导出复杂表头
2021-01-19 15:23:37第一次导出动态表格复杂表头有点懵逼，一直百度都不符合要求，知道找到一篇文章终于解决我的问题。这边有个简单的文档可以看下：http://excel.wj2015.com/ 以下是我自己总结的解决办法(需下载excel.js文件)： 链接... -
00029-layui 表格table 操作列支持下拉按钮(菜单)，多级下拉按钮(菜单)，dropdown
2020-09-15 14:04:49用到dropdown 控件： 地址： ...引入css,js: <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/dropdown....layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).us -
layui的树形表格
2019-07-19 22:57:06layui树形表格treetable treetable文件下载地址：https://github.com/whvcse/treetable-lay 下载好把treetable-lay引入你的项目 目前官方还没有提供treetable的API文档 使用方法 首先要引入我们下载的模板文件,base... -
改造 layui 表格组件实现多重排序
2020-07-15 22:06:58layui的表格组件目前只支持单列排序，在实际应用中并不能很好的支撑我们的业务需求。今天一时手痒，决定改造一番以支持多重排序。 实现思路也比较简单，只需要用一个数组来存放所有排序的列，再把这个数组传到... -
【Layui】动态生成多级表头，求解决
2020-11-09 10:52:07现在有一需求，需要根据数据库返回的数据的数量来动态生成表头 <p style="text-align:center"><img alt="" height="169" src=... 图片上红框框住的位置是需要动态生成的 我现在在代码中写死了 ... ... -
layui中的动态表格
2021-01-09 17:38:30支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能.... -
layui动态表格 layui-table-col-special
2019-03-27 09:14:00使用layui动态表格时，用到复杂表头，如果colspan=1时，会出现一例空白列，根本问题应该是layui 在复杂表头时, colspan 必须大于1，解决办法是，修改colspan为2，然后添加一列空白列 {title: '', field:'', hide: ... -
layui多层表头功能实现
2020-10-19 14:49:39在使用layui创建表格时，需要使用layui中的数据表格多层表头的方法。多层表头是由： colspan和rowspan这个两个参数配合使用。 例子：一个学院中的专业信息要包含着专业名称和专业编号。 效果图如下： 代码： 思路... -
针对layui表格二级显示问题可以这样处理
2020-05-21 15:52:41} } 然后输出到前台 layui 表格中 输出两列 {field: 'pid', title: '父类', width:180, }, {field: 'pid', title: '子类', width:150, } 然后判断 PID 是否为0 不为0 则显示子栏目 为0显示父栏目 {{# if(d.pid == ... -
Layui表格的扩展
2019-05-28 08:58:35在做项目的时候需要用到动态数据表格的时候很多，用layui的数据表格就非常方便了，layui里面有自定义表格和数据表格，数据表格用起来也很简单。首先就是开始的渲染，这个渲染又分方法渲染和自动渲染，一般用的是方法... -
Layui表格绑定
2019-04-26 22:33:11开发工具与关键技术：VS C# 作者：梁茵茵 撰写时间：2019年 4月 26日 为了用户在页面上更方便查询数据，就使用了一个表格来绑定数据库的数据...还可以支持排序、支持多级表头、支持单元格的自定义模板、支持对表格... -
Layui如何将嵌套子对象放入表格
2019-07-11 15:20:54Layui如何将嵌套子对象放入表格 注意：field字段可要可不要，添加属性字段 templet: '<div>{{d.bridgeType.content}}</div>'，d表示获取的data数据 {field: 'bridgeType', title: '桥型', width: 150, ... -
基于layui的下拉列表的数据回显方法
2020-10-16 08:04:57今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 -
layui table数据表格 导出excel 格式化导出数据 支持复杂表头导出
2021-08-12 10:06:51script type="text/javascript" src="${ctx}/static/layui-v2.5.6/layui.js"></script> //触发按钮 <button type="button" onclick="toExcel()">导出结果</button> //表格样式 <div> ...
收藏数
208
精华内容
83