layui table表格数据的新增,修改,删除,查询,双击获取行数据
layui table利用参数新增,修改,删除,查询,双击数据行获取本行数据等。模块化使用layui table表格，通过二次封装实现语法上的解耦使用layui table，使用参数就可以以及外部的方法调用即可实现对layui table表格的操作，通过封装，把更多自主权交给页面自定义,layui:v:2.3.0。感谢layui的作者贤心。演示效果如下：
以上json显示不完整是录屏的原因，请见谅！
var Table = function(ops){
this.dataList = [];
this.table = {};
this.tid = ops.id;
}
Table.prototype = {
getRowItemById: function (id) {
var _item = null;
var list = this.dataList
for (var i = 0; i < list.length; i++) {
var item = list[i];
item.id == id ? _item = item : ''
break;
}
return _item;
},
deleteRowItem: function (id) {
var list = this.dataList;
for (var i = list.length - 1; i >= 0; i--) {
if (list[i].id == id) {
list.splice(i, 1);
}
}
this.reloadTable();
},
updateRowItem: function (item,key,callback) {
var id = item[key]; //item:ajax获取的json； key:用于自定义标示数据行的flag，唯一；
var idkey = this.idkey;
var tid = this.tid;
var arr = this.dataList;
for(var ii =0;ii如何使用：
var table = new Table({id:'mo_table'});
table.initialize(function(tableObj){
var col = [
/*{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'}*/
]
var ops = {
elem: '#mo_table'//自定义dom
,id:'mo_table'
,data: []
,cols: [col]
,page: true
,height: 200
}
table.rederTable(ops,function () {
var row = {
"birthday":"2018-08-14 08:00:00",
"deptName":"陕西省",
"createtime":"2018-08-22 16:14:33",
"roleid":"6",
"sex":1,
"deptid":25,
"phone":"15822256985",
"sexName":"男",
"name":"测试二",
"roleName":"代理商管理员",
"statusName":"启用",
"id":94,
"vehicleId":94,
"account":"ceshi2",
"email":"[email protected]",
"status":1,
"longitude":'108',
"latitude":'38'
}
table.addRowItem(row)
table.bindRowDBclick(
'#mo_table',
function (evt,list,rowData) {
layer.msg(JSON.stringify(rowData))
//doanything here //双击行的回调
})
});
})
//data为行数据json
table.updateRowItem(data,"id",function(data){
//默认更新完的回调
});
代码仅供参考，涉及到代码质量问题请忽略，这只是一个实现的思路。如需扩展其他方法，你可以在原型中添加即可。如果需要转载请保留出处，谢谢！