代码拉取完成,页面将自动刷新
定制化开发请加qq 1424173603
方法名 | 是否参数 | 功能 | 描 述 |
---|---|---|---|
on | 有 | 方法注册 | event:事件名称 callback:回调方法 |
callbackFn | 有 | 注册方法回调 | event:事件名称 params:回调参数 |
render | 有 | 表格树实例化 | 在layui table render参数基础上加上 treeConfig属性 |
json
treeConfig:{ //表格树配置
showField:'name' //树形显示字段
,treeid:'id' //节点id
,treepid:'pid'//节点父级id
,iconClass:'layui-icon-layer' //小图标class样式
,showToolbar: true //展示工具栏 false不展示 true展示
}
方法名 | 功能描述 |
---|---|
reload | 表格重载 参数详解layui table reload方法 |
refresh | 表格局部刷新 data(数组):节点数据 为空时以现有数据局部刷新 |
sort | 表格树节点逐级排序 field:排序字段 desc => true降序、false升序 |
sortByTreeNode | 指定节点/节点id逐级排序 params:节点/节点id field:排序字段 isAsc:true升序 false降序 |
addTopTreeNode | 增加最上级节点 data(object) 增加单个节点 |
delTreeNode | 指定节点/节点id删除节点及其叶子节点 |
getCheckedTreeNodeData | 获取选中节点数据 |
getTableTreeData | 获取整个表格树数据 |
closeTreeNode | 指定节点/节点id折叠节点 |
openTreeNode | 指定节点/节点id展开节点 |
closeAllTreeNodes | 折叠所有节点 |
openAllTreeNodes | 展开所有节点 |
getTreeOptions | 获取表格树参数配置 |
keywordSearch | 关键词检索 关键词参数 |
clearSearch | 重置表格树到检索前折叠状态 |
tableTree.on('tool(tableEvent)',function (obj) {
var field = obj.field; //单元格字段
var value = obj.value; //修改后的值
var data = obj.data; //当前行数据
var event = obj.event; //当前单元格事件
if(event === 'update'){
obj.update(value); //数据更新
}
//event为del为删除 add则新增 async则异步请求数据
if(event === 'del'){
obj.del(); //删除节点及其子节点
}
if(event === 'add'){ //点击操作栏加号图标时触发
//异步、同步都可以使用
//obj.add(arr)生成表格树,arr参数为数组,数组中元素的treeid字段值重复则被过滤掉
obj.add([]) //参数不传或为空数组时 => 新增空行
}
if(event === 'async'){ //点击方向箭头小图标时触发
//可ajax异步请求后台数据,回调obj.async(arr)生成表格树,arr参数为数组
//数组中元素的treeid字段值重复则被过滤掉
obj.async([{"id":'abc',"treeName":'abc',"permissionId ":'abc',"sort":'3333',createDate:'2020-02-02',type:'1'}]);
}
});
tableTree.on('checkbox(tableEvent)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
});
table.on('toolbar(tableEvent)', function(obj){
treeTable.addTopTreeNode(); //新增最上级节点
treeTable.getCheckedTreeNodeData(); //获取选中行的树状数据
treeTable.getTableTreeData(); //获取表格树所有数据
treeTable.closeTreeNode('5'); //指定tr/节点id折叠节点
treeTable.openTreeNode(5); //指定tr/节点id展开相对应树节点
treeTable.closeAllTreeNodes(); //折叠所有节点
treeTable.openAllTreeNodes(); //展开所有节点
treeTable.getTreeOptions(); //获取表格配置
treeTable.reload(); //表格树reload
treeTable.delTreeNode('1'); //指定tr/节点id删除节点及相关叶子节点
treeTable.clearSearch(); //重置搜索前表格树折叠状态
treeTable.refresh(rs); //传数据刷新、不传刷新当前表格树,但不重载。
treeTable.sortByTreeNode(5,'sort',false); //指定节点/节点id和字段对其叶子节点逐级排序
});
table.on('sort(tableEvent)', function(obj){
treeTable.sort({field:obj.field,desc:obj.type === 'desc'}) //整个表格树节点及其叶子逐级排序
});
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型