layer之数据表格

2024-11-08 技术教程

最近开发使用到了layer,第一次接触,把开发中遇到的问题,和使用的方法记录下来.

数据表格的展示.如下图显示.

2.1

2.2 导入layer包,在这里不多说,参考官网.http://www.layui.com/doc/

2.3 先从简单的来显示数据,最后,再来,删除,许可流转....循环渐进.

看代码

<tableid="datagrid"class="layui-table"lay-filter="Grid"></table><scripttype="text/javascript">layui.use(['table'],function(){vartable=layui.table;//加载table.render({elem:'#datagrid',//这个是上面table的idurl:'这里是你的action',cols:[[{type:'checkbox'},field:'index',title:'序号',width:80,templet:'#indexTpl',sort:true},{field:'id',title:'操作',align:'center',templet:'#checkboxisgs',width:250},{field:'tsmxId',title:'推送详情',templet:'#checkboxistsmx',sort:true,width:150},{field:'flag',title:'公示/未公示',templet:'#checkboxists',sort:true,width:120},{field:'zzjgdm',title:'统一社会信用代码或组织机构代码',sort:true,width:200},{field:'sqlx',title:'分类',width:300}{field:'zhusuo',title:'机构地址',width:300},{field:'sqlb',title:'说明',width:300}]],page:true,//是否分页height:500,height:'full-272',});}先说一下返回的数据格式:{"count":53,"data":[{"caoR":"admin","id":17,"icon":"","parentId":0,"title":"系统设置","paiXu":0,"caoDate":"2017-12-28","spread":"false","href":"//","islock":"0"},{"caoR":"admin","id":19,"icon":"","parentId":17,"title":"角色管理","paiXu":1,"caoDate":"2017-12-25","spread":"false","href":"jsp/sysbase/rolemanager.jsp","islock":"0"}],"code":0,"msg":""}其中count:是总条数msg:可以写自己想返回的错误信息另外想分页时候,后台接受参数为:page当前页limit当前页条数默认10</script><scripttype="text/html"id="indexTpl">{{d.LAY_TABLE_INDEX+1}}</script>这个序号是针对当前页来分比如说第一页序号1-10第二页仍然是1-10那么怎么让序号叠加?代码:{type:'numbers',title:'序号',width:80,sort:true},只需要把上面的序号监听,换成这句就可以了.怎么添加?<divclass="layui-btn-groupTable"><buttonclass="layui-btnlayui-btn-normal"data-type="add"><iclass="layui-icon"></i>添加</button></div>var$=layui.$,active={add:function(){varcheckStatus=table.checkStatus('datagrid')layer.open({title:"增加信息",type:2,maxmin:true,area:['680px','580px'],content:'添加页面',//下面这句是,添加页面关闭后,刷新本页面.end:function(){location.reload();}});},}在table中如何显示?流转详情,删除?代码如下:<scripttype="text/html"id="checkboxisgs"><buttonclass="layui-btnlayui-btn-xs"lay-event="flowInfo">许可详情</button>{{#if(d.sjly=='3'&&d.flag=='2'){}}<buttonclass="layui-btnlayui-btn-editlayui-btn-xs"lay-event="update">编辑</button><buttonclass="layui-btnlayui-btn-dangerlayui-btn-xs"lay-event="remove">删除</button>{{#}else{}}<buttonclass="layui-btnlayui-btn-disabledlayui-btn-xs"lay-event="">编辑</button><buttonclass="layui-btnlayui-btn-disabledlayui-btn-xs"lay-event="">删除</button>{{#}}}</script>这里仅仅是在talbe中显示删除.流转详情.?怎么触发事件?代码参考://监听事件table.on('tool(Grid)',function(obj){//注：tool是工具条事件名，test是table原始容器的属性lay-filter="对应的值"vardata=obj.data;//获得当前行数据varlayEvent=obj.event;//获得lay-event对应的值（也可以是表头的event参数对应的值）if(layEvent==='remove'){//编辑varid=data.id;layer.confirm('确定要删除？',{title:"系统提示",anim:1,icon:3,closeBtn:0},function(index){//这里可以写自己方法.layer.alert("删除成功！",{title:"系统提示",icon:1,closeBtn:0},function(index){//关闭删除窗口,并刷新tabletable.reload("Load");});});}elseif(layEvent==='update'){//编辑}怎么知道监听是那个事件?其中layEvent==='update'中update,就是监听不同触发的事件,进行判断的.Grid是:<tableid="datagrid"class="layui-table"lay-filter="Grid"></table>中lay-filter的值.