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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
vue实现购物车加减
May 30 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
如何过滤高亮显示非法字符
2006/10/09 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php动态函数调用方法
2015/05/21 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
python中的sort方法使用详解
2014/07/25 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
怎样声明子类
2013/07/02 面试题
酒吧创业计划书
2014/01/18 职场文书
毕业留言寄语大全
2014/04/10 职场文书
机械系毕业生求职信
2014/05/28 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
欠款证明
2015/06/24 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL