快捷導(dǎo)航

layui table表格數(shù)據(jù)的新增,修改,刪除,查詢,雙擊獲取行數(shù)據(jù)方式

更新時(shí)間：2019年11月14日 17:44:28 作者：Museions

今天小編就為大家分享一篇layui table表格數(shù)據(jù)的新增,修改,刪除,查詢,雙擊獲取行數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

layui table利用參數(shù)新增,修改,刪除,查詢,雙擊數(shù)據(jù)行獲取本行數(shù)據(jù)等。模塊化使用layui table表格，通過二次封裝實(shí)現(xiàn)語(yǔ)法上的解耦使用layui table，使用參數(shù)就可以以及外部的方法調(diào)用即可實(shí)現(xiàn)對(duì)layui table表格的操作，通過封裝，把更多自主權(quán)交給頁(yè)面自定義,layui:v:2.3.0。感謝layui的作者賢心。

演示效果如下：

以上json顯示不完整是錄屏的原因，請(qǐng)見諒！

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:用于自定義標(biāo)示數(shù)據(jù)行的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: '賬號(hào)', 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: '創(chuàng)建時(shí)間', field: 'createtime',sort: true},
    {title: '狀態(tài)', 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":"測(cè)試二",
      "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 //雙擊行的回調(diào)
 
      })
  });
 
})
 
//data為行數(shù)據(jù)json
table.updateRowItem(data,"id",function(data){
   //默認(rèn)更新完的回調(diào)
});

代碼僅供參考，涉及到代碼質(zhì)量問題請(qǐng)忽略，這只是一個(gè)實(shí)現(xiàn)的思路。如需擴(kuò)展其他方法，你可以在原型中添加即可。

以上這篇layui table表格數(shù)據(jù)的新增,修改,刪除,查詢,雙擊獲取行數(shù)據(jù)方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: