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){
     //默认更新完的回调
});

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