layui table利用参数新增,修改,删除,查询,双击数据行获取本行数据等。模块化使用layui table表格,通过二次封装实现语法上的解耦使用layui table,使用参数就可以以及外部的方法调用即可实现对layui table表格的操作,通过封装,把更多自主权交给页面自定义,layui:v:2.3.0。感谢layui的作者贤心。
演示效果如下:
以上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 "#"+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' "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表格数据的新增,修改,删除,查询,双击获取行数据方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“layui table表格数据的新增,修改,删除,查询,双击获取行数据方式”评论...
更新动态
2025年11月03日
2025年11月03日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]
