189 8069 5689

layui中table表格如何实现新增,修改,删除,查询,双击获取行数据方式

这篇文章主要介绍layui中table表格如何实现新增,修改,删除,查询,双击获取行数据方式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联专注于企业全网营销推广、网站重做改版、梅江网站定制设计、自适应品牌网站建设、H5技术、商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为梅江等各大城市提供网站开发制作服务。

layui table利用参数新增,修改,删除,查询,双击数据行获取本行数据等。模块化使用layui table表格，通过二次封装实现语法上的解耦使用layui table，使用参数就可以以及外部的方法调用即可实现对layui table表格的操作，通过封装，把更多自主权交给页面自定义,layui:v:2.3.0。

演示效果如下：

layui中table表格如何实现新增,修改,删除,查询,双击获取行数据方式

以上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":"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){
   //默认更新完的回调
});
layui是什么
layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。
以上是“layui中table表格如何实现新增,修改,删除,查询,双击获取行数据方式”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
            
            
                        

            名称栏目：layui中table表格如何实现新增,修改,删除,查询,双击获取行数据方式            

            网站路径：http://cdxtjz.com/article/ggjhij.html

其他资讯