符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要介绍layui中table表格如何实现新增,修改,删除,查询,双击获取行数据方式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专注于企业全网营销推广、网站重做改版、梅江网站定制设计、自适应品牌网站建设、H5技术、商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为梅江等各大城市提供网站开发制作服务。
layui table利用参数新增,修改,删除,查询,双击数据行获取本行数据等。模块化使用layui table表格,通过二次封装实现语法上的解耦使用layui table,使用参数就可以以及外部的方法调用即可实现对layui table表格的操作,通过封装,把更多自主权交给页面自定义,layui:v:2.3.0。
演示效果如下:
以上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://bjjierui.cn/article/ggjhij.html