广州网站建设的地方推荐,用区块链来做网站,朔州网络推广,无锡网站建设推广目录
一#xff1a;事件
二#xff1a;头部工具栏事件
三#xff1a;排序切换事件 四#xff1a;列拖拽宽度后的事件
五#xff1a;列筛选#xff08;显示或隐藏#xff09;后的事件
六#xff1a;行单击和双击事件
七#xff1a;行右键菜单事件 八#xff1a;…目录
一事件
二头部工具栏事件
三排序切换事件 四列拖拽宽度后的事件
五列筛选显示或隐藏后的事件
六行单击和双击事件
七行右键菜单事件 八单元格编辑事件
九单元格工具事件
十复选框事件
十一单选框事件
十二尾部分页栏事件 一事件
table.on(event(filter), callback);
参数 event(filter) 是事件的特定结构。 event 为事件名支持的事件见下表。filter 为元素属性 lay-filter 对应的值。参数 callback 为事件执行时的回调函数并返回一个包含各项成员的 object 类型的参数。
event描述toolbar头部工具栏事件sort排序切换事件colResized 2.8列拖拽宽度后的事件colToggled 2.8列筛选显示或隐藏后的事件row / rowDouble行单击和双击事件rowContextmenu 2.8行右键菜单事件edit单元格编辑事件tool 单元格工具事件。可在该事件中实现行的更新与删除操作。checkbox复选框事件radio单选框事件pagebar 2.7尾部分页栏事件
二头部工具栏事件
table.on(toolbar(filter), callback);
点击头部工具栏区域设定了属性为 lay-event 的元素时触发。如
!-- 原始容器 --
table idtest lay-filtertest/table!-- 工具栏模板 --
script typetext/html idtoolbarDemodiv classlayui-btn-containerbutton classlayui-btn layui-btn-sm lay-eventadd添加/buttonbutton classlayui-btn layui-btn-sm lay-eventdelete删除/buttonbutton classlayui-btn layui-btn-sm lay-eventupdate编辑/button/div
/scriptscript
layui.use(function(){var table layui.table;// 渲染table.render({elem: #test,toolbar: #toolbarDemo,// … // 其他属性});// 头部工具栏事件table.on(toolbar(test), function(obj){var options obj.config; // 获取当前表格属性配置项var checkStatus table.checkStatus(options.id); // 获取选中行相关数据console.log(obj); // 查看对象所有成员// 根据不同的事件名进行相应的操作switch(obj.event){ // 对应模板元素中的 lay-event 属性值case add:layer.msg(添加);break;case delete:layer.msg(删除);break;case update:layer.msg(编辑);break;};});
});
/script
三排序切换事件
table.on(sort(filter), callback); 点击表头排序时触发它通常在设置 autoSort: false 基础属性时使用以呈现后端的排序而不是默认的前端排序。
var table layui.table;// 禁用前端自动排序以便由服务端直接返回排序好的数据
table.render({elem: #test,autoSort: false, // 禁用前端自动排序。// … // 其他属性
});// 触发排序事件
table.on(sort(test), function(obj){console.log(obj.field); // 当前排序的字段名console.log(obj.type); // 当前排序类型desc降序、asc升序、null空对象默认排序console.log(this); // 当前排序的 th 对象// 尽管我们的 table 自带排序功能但并没有请求服务端。// 有些时候你可能需要根据当前排序的字段重新向后端发送请求从而实现服务端排序如table.reload(test, {initSort: obj, // 记录初始排序如果不设的话将无法标记表头的排序状态。where: { // 请求参数注意这里面的参数可任意定义并非下面固定的格式field: obj.field, // 排序字段order: obj.type // 排序方式}});
}); 四列拖拽宽度后的事件
table.on(colResized(filter), callback);
在表头列分割线拖拽宽度后触发。
var table layui.table;// 渲染
table.render({elem: #test,// … // 其他属性
});// 列拖拽宽度后的事件
table.on(colResized(test), function(obj){var col obj.col; // 获取当前列属性配置项var options obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员
});
五列筛选显示或隐藏后的事件
table.on(colToggled(filter), callback);
点击头部工具栏右上角的字段筛选列表时触发。
var table layui.table;// 渲染
table.render({elem: #test,// … // 其他属性
});// 列筛选显示或隐藏后的事件
table.on(colToggled(test), function(obj){var col obj.col; // 获取当前列属性配置项var options obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员
});
六行单击和双击事件
行单击事件table.on(row(filter), callback);行双击事件table.on(rowDouble(filter), callback);
单击或双击 table 行任意区域触发两者用法相同。
var table layui.table;// 渲染
table.render({elem: #test,// … // 其他属性
});// 行单击事件
table.on(row(test), function(obj){var data obj.data; // 得到当前行数据var index obj.index; // 得到当前行索引var tr obj.tr; // 得到当前行 tr 元素的 jQuery 对象var options obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员// obj.del() // 删除当前行// obj.update(fields, related); // 修改行数据// obj.setRowChecked(opts); // 设置行选中状态
});
七行右键菜单事件
table.on(rowContextmenu(filter), callback);
右键单击行时触发。
table classlayui-hide idID-table-onrowContextmenu/table
script
layui.use([table, dropdown, util], function(){var table layui.table;var dropdown layui.dropdown;var util layui.util;// 渲染table.render({elem: #ID-table-onrowContextmenu,defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单url: /static/json/table/user.json, // 此处为静态模拟数据实际使用时需换成真实接口page: true,cols: [[{field:id, title:ID, width:80, fixed: left, unresize: true},{field:username, title:用户, width:120},{field:sex, title:性别, width:80},{field:city, title:城市, width:100},{field:sign, title:签名},{field:experience, title:积分, width:80, sort: true}]],});// 行单击事件table.on(rowContextmenu(ID-table-onrowContextmenu), function(obj){var data obj.data; // 得到当前行数据var index obj.index; // 得到当前行索引var tr obj.tr; // 得到当前行 tr 元素的 jQuery 对象var options obj.config; // 获取当前表格基础属性配置项// console.log(obj); // 查看对象所有成员// 右键操作dropdown.render({trigger: contextmenu,show: true,data: [{title: Menu item 1, id: AAA},{title: Menu item 2, id: BBB}],click: function(menuData, othis) {// 显示选中的相关数据 - 仅用于演示layer.alert(util.escape(JSON.stringify({dropdown: menuData,table: obj.data})));}});// obj.del() // 删除当前行// obj.update(fields, related); // 修改行数据obj.setRowChecked({selectedStyle: true}); // 标注行选中状态样式});
});
/script 八单元格编辑事件
table.on(edit(filter), callback);
单元格被编辑且值发生改变时触发。
var table layui.table;
var layer layui.layer;// 单元格编辑事件
table.on(edit(test), function(obj){var field obj.field; // 得到修改的字段var value obj.value // 得到修改后的值var oldValue obj.oldValue // 得到修改前的值 -- v2.8.0 新增var data obj.data // 得到所在行所有键值var col obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增console.log(obj); // 查看对象所有成员// 值的校验if(value.replace(/\s/g, ) ){layer.tips(值不能为空, this, {tips: 1});return obj.reedit(); // 重新编辑 -- v2.8.0 新增}// 编辑后续操作如提交更新请求以完成真实的数据更新// …// 更新当前缓存数据var update {};update[field] value;obj.update(update, true); // 参数 true 为 v2.7 新增功能即同步更新其他包含自定义模板并可能存在关联的列视图
});
九单元格工具事件
单元格工具事件「单击触发」 table.on(tool(filter), callback);单元格工具事件「双击触发」 table.on(toolDouble(filter), callback);
单击或双击单元格中带有 lay-event 属性的元素时触发。在表格主体的单元格中经常需要进行很多的动态操作比如编辑、删除等操作这些均可以在单元格工具事件中完成。
!-- 表头某列 templet 属性指向的模板 --
script typetext/html idtoolEventDemoa classlayui-btn layui-btn-xs lay-eventdetail查看/aa classlayui-btn layui-btn-xs lay-eventedit编辑/aa classlayui-btn layui-btn-danger layui-btn-xs lay-eventdel删除/a!-- 支持任意的 laytpl 组件语法如 --{{# if(d.auth 2){ }}a classlayui-btn layui-btn-xs lay-eventcheck审核/a{{# } }}
/scripttable idtest lay-filtertest/table script
layui.use(function(){var table layui.table;// 渲染table.render({elem: #test,cols: [[{title: 操作, width: 200, templet: #toolEventDemo}]]// … // 其他属性});// 单元格工具事件table.on(tool(test), function(obj){var data obj.data; // 得到当前行数据var index obj.index; // 得到当前行索引var layEvent obj.event; // 获得元素对应的 lay-event 属性值var tr obj.tr; // 得到当前行 tr 元素的 jQuery 对象var options obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员// 根据 lay-event 的值执行不同操作if(layEvent detail){ //查看// do somehing} else if(layEvent del){ //删除layer.confirm(确定删除吗, function(index){obj.del(); // 删除对应行tr的 DOM 结构并更新缓存layer.close(index);// 向后端发送删除请求执行完毕后可通过 reloadData 方法完成数据重载/*table.reloadData(id, {scrollPos: fixed // 保持滚动条位置不变 - v2.7.3 新增});*/});} else if(layEvent edit){ //编辑// do something// 同步更新缓存对应的值// 该方法仅为前端层面的临时更新在实际业务中需提交后端请求完成真实的数据更新。obj.update({username: 123,title: abc}); // 若需更新其他包含自定义模板并可能存在关联的列视图可在第二个参数传入 trueobj.update({username: 123}, true); // 注参数二传入 true 功能为 v2.7.4 新增// 当发送后端请求成功后可再通过 reloadData 方法完成数据重载/*table.reloadData(id, {scrollPos: fixed // 保持滚动条位置不变 - v2.7.3 新增});*/}});
});
/script
十复选框事件
able.on(checkbox(filter), callback);
当 table 开启复选框且点击复选框时触发。
var table layui.table;// 复选框事件
table.on(checkbox(test), function(obj){console.log(obj); // 查看对象所有成员console.log(obj.checked); // 当前是否选中状态console.log(obj.data); // 选中行的相关数据console.log(obj.type); // 若触发的是全选则为all若触发的是单选则为one
}); 十一单选框事件
table.on(radio(filter), callback);
当 table 开启单选框且点击单选框时触发。
var table layui.table;// 单选框事件
table.on(radio(test), function(obj){console.log(obj); // 当前行的一些常用操作集合console.log(obj.checked); // 当前是否选中状态console.log(obj.data); // 选中行的相关数据
});
十二尾部分页栏事件
table.on(pagebar(filter), callback);
点击尾部分页栏自定义模板中属性为 lay-event 的元素时触发。用法跟 toolbar 完全一致
var table layui.table;// 渲染
table.render({elem: #demo,pagebar: #pagebarDemo // 分页栏模板所在的选择器// … // 其他参数
});// 分页栏事件
table.on(pagebar(test), function(obj){console.log(obj); // 查看对象所有成员console.log(obj.config); // 当前实例的配置信息console.log(obj.event); // 属性 lay-event 对应的值
});
