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<arr.length;ii++){

var _arr = arr[ii];

var index = ii;

if(_arr[idkey] == id){

arr[index] = item;

var $div = $("#"+tid).next()

var $tr = $div.find('.layui-table-body table.layui-table').find('tr').eq(index);

var $tds = $tr.find('td');

for(var i =0;i<$tds.length;i++){

var $td = $tds.eq(i);

var $field = $td.attr('data-field');

var $itemValue = item[$field];

var $tdValue = $td.find('div').html();

if($itemValue!=$tdValue){

$td.find('div').html($itemValue);

}

continue;

}

if (callback) {

callback(item)

}

dbClickTableItem: function (callback) {

addRowItem: function (item) {

var list = this.dataList;

list.unshift(item);

this.reloadTable();

reloadTable: function (callback) {

var list = this.dataList;

this.table.reload(this.tid, {

data: list

});

clearTable: function () {

this.dataList = [];

this.reloadTable();

rederTable: function (ops, callback) {

this.table.render(ops);

typeof callback == 'function' ? callback() : '';

initialize: function (callback) {

var _ = this;

layui.use('table', function () {

var table = layui.table;

_.table = table;

typeof callback == 'function' ? callback(_.table) : '';

})

bindRowDBclick: function (el, callback) {

var _this = this;

var $d = $('body');

$d.on('dblclick', "tbody tr", function (e) {

var target = e;

var $index = $(this).index();

var $tr = $(el).next().find("tbody tr")[$index];

if (this == $tr) {

var list = _this.dataList;

var rowData = list[$index];

callback(target, list, rowData)

} else {

console.error('Illegal operation without registration\n' +

'\n')

}

})

}

如何使用：

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":"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))

//doanything here //双击行的回调

})

});

})

//data为行数据json

table.updateRowItem(data,"id",function(data){

//默认更新完的回调

});

代码仅供参考，涉及到代码质量问题请忽略，这只是一个实现的思路。如需扩展其他方法，你可以在原型中添加即可。如果需要转载请保留出处，谢谢！