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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。