layer之数据表格-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

layer之数据表格

最近开发使用到了layer,第一次接触,把开发中遇到的问题,和使用的方法记录下来.
我们提供的服务有：成都网站建设、成都做网站、微信公众号开发、网站优化、网站认证、景德镇ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的景德镇网站制作公司

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

2.1

layer之数据表格

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

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

看代码




layui.use(['table'],function(){
    var table = layui.table; // 加载
    table.render({
	elem: '#datagrid',  // 这个是上面table的id 
	url: '这里是你的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
        






	{{d.LAY_TABLE_INDEX+1}}

这个序号是针对当前页来分 比如说第一页  序号1-10  第二页仍然是1-10
那么怎么让序号叠加?
代码:
    {type:'numbers', title: '序号', width:80,sort: true},
    只需要把上面的序号监听,换成这句就可以了.
    


怎么添加?

	
		添加

var $ = layui.$,active = { add: function(){ var checkStatus = table.checkStatus('datagrid') layer.open({ title: "增加信息", type: 2, maxmin: true, area: ['680px', '580px'], content: '添加页面', // 下面这句是,添加页面关闭后,刷新本页面. end: function () { location.reload(); } }); }, } 在table中如何显示? 流转详情,删除? 代码如下:

许可详情 {{# if(d.sjly == '3'&&d.flag=='2'){ }} 编辑删除 {{# }else{ }} 编辑删除 {{# } }} 这里仅仅是在talbe中显示删除.流转详情.?怎么触发事件? 代码参考: //监听事件 table.on('tool(Grid)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） if(layEvent === 'remove'){ //编辑 var id = data.id; layer.confirm('确定要删除？',{title: "系统提示",anim: 1,icon: 3,closeBtn: 0},function(index){ // 这里可以写自己方法. layer.alert("删除成功！",{title: "系统提示",icon: 1,closeBtn: 0},function(index){ //关闭删除窗口,并刷新table table.reload("Load"); }); }); }else if(layEvent === 'update'){ //编辑 } 怎么知道监听是那个事件? 其中 layEvent === 'update' 中update,就是监听不同触发的事件,进行判断的. Grid 是: 中 lay-filter 的值.

当前名称：layer之数据表格
转载注明：http://lswzjz.com/article/phoidh.html

新闻中心

其他资讯