layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
layuitable利用参数新增,修改,删除,查询,双击数据行获取本行数据等。模块化使用layuitable表格,通过二次封装实现语法上的解耦使用layuitable,使用参数就可以以及外部的方法调用即可实现对layuitable表格的操作,通过封装,把更多自主权交给页面自定义,layui:v:2.3.0。感谢layui的作者贤心。
演示效果如下:
以上json显示不完整是录屏的原因,请见谅!
varTable=function(ops){ this.dataList=[]; this.table={}; this.tid=ops.id; } Table.prototype={ getRowItemById:function(id){ var_item=null; varlist=this.dataList for(vari=0;i=0;i--){ if(list[i].id==id){ list.splice(i,1); } } this.reloadTable(); }, updateRowItem:function(item,key,callback){ varid=item[key];//item:ajax获取的json;key:用于自定义标示数据行的flag,唯一; varidkey=this.idkey; vartid=this.tid; vararr=this.dataList; for(varii=0;ii 如何使用:
vartable=newTable({id:'mo_table'}); table.initialize(function(tableObj){ varcol=[ /*{type:'checkbox',width:80}, {title:'账号',field:'account'}, {title:'姓名',field:'name'}, {title:'性别',field:'sexName'}, {title:'角色',field:'roleName'}, {title:'部门',field:'deptName'}, {title:'邮箱',field:'email',event:'setSign',style:'cursor:pointer;'}, {title:'电话',field:'phone'}, {title:'创建时间',field:'createtime',sort:true}, {title:'状态',field:'statusName'}, {title:'操作',toolbar:'#cellHandle'}*/ ] varops={ elem:'#mo_table'//自定义dom ,id:'mo_table' ,data:[] ,cols:[col] ,page:true ,height:200 } table.rederTable(ops,function(){ varrow={ "birthday":"2018-08-1408:00:00", "deptName":"陕西省", "createtime":"2018-08-2216:14:33", "roleid":"6", "sex":1, "deptid":25, "phone":"15822256985", "sexName":"男", "name":"测试二", "roleName":"代理商管理员", "statusName":"启用", "id":94, "vehicleId":94, "account":"ceshi2", "email":"524585857@qq.com", "status":1, "longitude":'108', "latitude":'38' } table.addRowItem(row) table.bindRowDBclick( '#mo_table', function(evt,list,rowData){ layer.msg(JSON.stringify(rowData)) //doanythinghere//双击行的回调 }) }); }) //data为行数据json table.updateRowItem(data,"id",function(data){ //默认更新完的回调 });代码仅供参考,涉及到代码质量问题请忽略,这只是一个实现的思路。如需扩展其他方法,你可以在原型中添加即可。
以上这篇layuitable表格数据的新增,修改,删除,查询,双击获取行数据方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。