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加ASP二级域名转向的代码
May 17 Javascript
javascript中万恶的function实例分析
May 25 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS实现的自定义map方法示例
May 17 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
Vue和Flask通信的实现
May 19 Vue.js
解决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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
VBScript版代码高亮
2006/06/26 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
VUE前后端学习tab写法实例
2019/08/06 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
Python中random模块用法实例分析
2015/05/19 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python中对数据进行各种排序的方法
2019/07/02 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python实现二分查找算法
2020/09/18 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
大学生自我鉴定范文模板
2014/01/21 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
淘宝好评语句大全
2014/12/31 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
SQL Server删除表中的重复数据
2022/05/25 SQL Server