layui table表格数据的新增,修改,删除,查询,双击获取行数据方式


Posted in Javascript onNovember 14, 2019

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

演示效果如下:

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

代码仅供参考,涉及到代码质量问题请忽略,这只是一个实现的思路。如需扩展其他方法,你可以在原型中添加即可。

以上这篇layui table表格数据的新增,修改,删除,查询,双击获取行数据方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
ExtJS下grid的一些属性说明
Dec 13 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
JS同步、异步、延迟加载的方法
May 05 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 #Javascript
layui写后台表格思路和赋值用法详解
Nov 14 #Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 #Javascript
layui 弹出层值回传解决方式
Nov 14 #Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 #Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 #Javascript
浅析Vue 防抖与节流的使用
Nov 14 #Javascript
You might like
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php去除数组中重复数据
2014/11/18 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
layui文件上传实现代码
2017/05/20 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
TensorFlow实现模型评估
2018/09/07 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
如何通过命令行进入python
2020/07/06 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
会计专业自我鉴定
2014/02/10 职场文书
安全责任书模板
2014/07/22 职场文书
赔偿协议书范本
2014/09/12 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle