tableTree.html · QW去/tableTree

代码拉取完成,页面将自动刷新

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 51

QW去/tableTree

forked from 二锅头/tableTree

代码 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

文件

master

分支 (1)

管理

master

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

分支 1

标签 0

tableTree

tableTree.html

tableTree.html 9.06 KB

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>示例demo</title>
 <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<input type="text" class="layui-input" id="aassss">
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
</body>
<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
 <button type="button" lay-event="tableTreeEdit" id="btn1" class="layui-btn layui-btn-sm">添加最上级节点</button>
 <button type="button" lay-event="tableTreeEdit" id="btn2" class="layui-btn layui-btn-sm">获取勾选数据</button>
 <button type="button" lay-event="tableTreeEdit" id="btn3" class="layui-btn layui-btn-sm">获取全部数据</button>
 <button type="button" lay-event="tableTreeEdit" id="btn4" class="layui-btn layui-btn-sm">折叠字典管理</button>
 <button type="button" lay-event="tableTreeEdit" id="btn5" class="layui-btn layui-btn-sm">展开字典管理</button>
 <button type="button" lay-event="tableTreeEdit" id="btn6" class="layui-btn layui-btn-sm">关闭所有叶子节点</button>
 <button type="button" lay-event="tableTreeEdit" id="btn7" class="layui-btn layui-btn-sm">展开所有叶子节点</button>
 <button type="button" lay-event="tableTreeEdit" id="btn8" class="layui-btn layui-btn-sm">获取表格树配置</button>
 <button type="button" lay-event="tableTreeEdit" id="btn9" class="layui-btn layui-btn-sm">重载表格树</button>
 <button type="button" lay-event="tableTreeEdit" id="btn10" class="layui-btn layui-btn-sm">删除增加角色</button>
 </br>
 <button type="button" lay-event="tableTreeEdit" id="btn11" class="layui-btn layui-btn-sm">重置搜索</button>
 <button type="button" lay-event="tableTreeEdit" id="btn12" class="layui-btn layui-btn-sm">刷新</button>
 <button type="button" lay-event="tableTreeEdit" id="btn13" class="layui-btn layui-btn-sm">权限管理排序</button>
 </div>
</script>
<script src="layui/layui.js"></script>
<script>
 layui.config({
 base: 'module/'
 }).extend({
 tableEdit:'js/tableEdit' //表格树依赖我另外写的tableEdit模块,本项目就有。
 ,tableTree:'js/tableTree'
 }).use(['table','layer',"tableTree"], function () {
 var table = layui.table
 ,$ = layui.$
 ,tableTree = layui.tableTree
 ,layer = layui.layer
 ,treeTable = tableTree.render({
 elem: '#tableId'
 ,id:'tableTree'
 ,url:'module/json/data.json'
 ,height: 'full-90'
 ,size:'sm'
 ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
 title: '提示'
 ,layEvent: 'LAYTABLE_TIPS'
 ,icon: 'layui-icon-tips'
 }]
 ,page: true
 ,treeConfig:{ //表格树所需配置
 showField:'treeName' //表格树显示的字段
 ,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的,且不能为空。
 ,treepid:'pid'//父级id字段名称
 ,iconClass:'layui-icon-right' //小图标class样式 窗口图标 layui-icon-layer
 ,showToolbar: true //展示工具栏 false不展示 true展示
 }
 ,cols: [[
 {type:'checkbox'}
 ,{field:'treeName',title: '名称',width:300}
 ,{field:'id',title:'id',sort:true,event:'id',config:{type:'input'},width:120}
 ,{field:'sort', title: '排序',event:'sort',width:70,config:{type:'input'}}
 ,{field:'url',title:'路径',event:'url',config:{type:'input'},width:150}
 ,{field:'permissionId ',width:150, title: '权限标识',event:'permissionId',config:{type:'input'}}
 ,{field:'createDate', title: '创建时间',event:'date',width:120,config:{type:'date',dateType:'date'}}
 ,{field:'type',title:'类型',event:'type',config:{type:'select',data:[{name:1,value:'菜单'},{name:2,value:'按钮'}]},width:150}
 ]],done:function () {
 treeTable.closeAllTreeNodes();
 treeTable.openTreeNode(1)
 }
 });
 /**
 *表格的增删改都会回调此方法
 * 与table.on(tool(lay-filter))用法一致。
 **/
 tableTree.on('tool(tableEvent)',function (obj) {
 var field = obj.field; //单元格字段
 var value = obj.value; //修改后的值
 var data = obj.data; //当前行数据
 var event = obj.event; //当前单元格事件属性值
 //event为del为删除 add则新增 edit则修改 async则为异步请求数据。
 //这个三个值固定死了,切莫定义与之三个重复的event。
 if(event !== 'del' && event !== 'add' && event !== 'type' && event !== 'async'){
 var update = {};
 update[field] = value;
 obj.update(update);
 console.log(obj)
 }
 if(event === 'type'){
 obj.update({type:value.value});
 }
 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'}]);
 }
 if(event === 'id'){
 $(this).parents('tr').attr('tree-id',value);
 }
 });

/**
 *监听复选框选中状态
 **/
 tableTree.on('checkbox(tableEvent)', function(obj){
 console.log(obj.checked); //当前是否选中状态
 console.log(obj.data); //选中行的相关数据
 console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
 console.log(obj.data);
 });
 var isAsc = true;
 table.on('toolbar(tableEvent)', function(obj){
 var id = $(this).attr("id");
 if(id==="btn1"){
 //data可以为空,为空则创建空行,否则按照data数据生成行
 treeTable.addTopTreeNode();//新增最上级节点
 }else if(id === 'btn2') {
 console.log(treeTable.getCheckedTreeNodeData()) //获取选中行的树状数据
 }else if(id === 'btn3') {
 console.log(treeTable.getTableTreeData())//获取表格树所有数据
 }else if(id === 'btn4') {
 treeTable.closeTreeNode('6'); // 根据tr或者树id关闭相对应树节点
 }else if(id === 'btn5') {
 treeTable.openTreeNode(6); // 根据tr或者树id展开相对应树节点
 }else if(id === 'btn6') {
 treeTable.closeAllTreeNodes(); //关闭所有树节点
 }else if(id === 'btn7') {
 treeTable.openAllTreeNodes(); //展开所有树节点
 }else if(id === 'btn8') {
 console.log(treeTable.getTreeOptions()); //获取表格配置
 }else if(id === 'btn9'){
 treeTable.reload(); //表格树进行reload
 }else if(id === 'btn10') {
 treeTable.delTreeNode('19'); //根据tr元素或者节点id删除节点及相关叶子节点
 }else if(id === 'btn11') {
 treeTable.clearSearch(); //重置搜索
 }else if(id === 'btn12') {
 //传了数据进去进行刷新,那么会把原来的数据给删除了,
 //然后把传进去的数据进行更新进去
 treeTable.refresh();
 }else if(id === "btn13"){
 treeTable.sortByTreeNode(28,'sort',isAsc); //指定节点或节点id排序
 isAsc = !isAsc;
 }
 });

/**
 * 整个表格树排序,与layui进行了整合。
 */
 table.on('sort(tableEvent)', function(obj){
 treeTable.sort({field:obj.field,desc:obj.type === 'desc'})
 });

$('#aassss').on('change',function () {
 treeTable.keywordSearch(this.value); //关键词搜索树
 });
 });
</script>
</html>

一键复制编辑原始数据按行查看历史

二锅头提交于 2020年06月25日 13:59 +08:00 . 修复bug

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>示例demo</title>
 <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<input type="text" class="layui-input" id="aassss">
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
</body>
<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
 <button type="button" lay-event="tableTreeEdit" id="btn1" class="layui-btn layui-btn-sm">添加最上级节点</button>
 <button type="button" lay-event="tableTreeEdit" id="btn2" class="layui-btn layui-btn-sm">获取勾选数据</button>
 <button type="button" lay-event="tableTreeEdit" id="btn3" class="layui-btn layui-btn-sm">获取全部数据</button>
 <button type="button" lay-event="tableTreeEdit" id="btn4" class="layui-btn layui-btn-sm">折叠字典管理</button>
 <button type="button" lay-event="tableTreeEdit" id="btn5" class="layui-btn layui-btn-sm">展开字典管理</button>
 <button type="button" lay-event="tableTreeEdit" id="btn6" class="layui-btn layui-btn-sm">关闭所有叶子节点</button>
 <button type="button" lay-event="tableTreeEdit" id="btn7" class="layui-btn layui-btn-sm">展开所有叶子节点</button>
 <button type="button" lay-event="tableTreeEdit" id="btn8" class="layui-btn layui-btn-sm">获取表格树配置</button>
 <button type="button" lay-event="tableTreeEdit" id="btn9" class="layui-btn layui-btn-sm">重载表格树</button>
 <button type="button" lay-event="tableTreeEdit" id="btn10" class="layui-btn layui-btn-sm">删除增加角色</button>
 </br>
 <button type="button" lay-event="tableTreeEdit" id="btn11" class="layui-btn layui-btn-sm">重置搜索</button>
 <button type="button" lay-event="tableTreeEdit" id="btn12" class="layui-btn layui-btn-sm">刷新</button>
 <button type="button" lay-event="tableTreeEdit" id="btn13" class="layui-btn layui-btn-sm">权限管理排序</button>
 </div>
</script>
<script src="layui/layui.js"></script>
<script>
 layui.config({
 base: 'module/'
 }).extend({
 tableEdit:'js/tableEdit' //表格树依赖我另外写的tableEdit模块,本项目就有。
 ,tableTree:'js/tableTree'
 }).use(['table','layer',"tableTree"], function () {
 var table = layui.table
 ,$ = layui.$
 ,tableTree = layui.tableTree
 ,layer = layui.layer
 ,treeTable = tableTree.render({
 elem: '#tableId'
 ,id:'tableTree'
 ,url:'module/json/data.json'
 ,height: 'full-90'
 ,size:'sm'
 ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
 title: '提示'
 ,layEvent: 'LAYTABLE_TIPS'
 ,icon: 'layui-icon-tips'
 }]
 ,page: true
 ,treeConfig:{ //表格树所需配置
 showField:'treeName' //表格树显示的字段
 ,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的,且不能为空。
 ,treepid:'pid'//父级id字段名称
 ,iconClass:'layui-icon-right' //小图标class样式 窗口图标 layui-icon-layer
 ,showToolbar: true //展示工具栏 false不展示 true展示
 }
 ,cols: [[
 {type:'checkbox'}
 ,{field:'treeName',title: '名称',width:300}
 ,{field:'id',title:'id',sort:true,event:'id',config:{type:'input'},width:120}
 ,{field:'sort', title: '排序',event:'sort',width:70,config:{type:'input'}}
 ,{field:'url',title:'路径',event:'url',config:{type:'input'},width:150}
 ,{field:'permissionId ',width:150, title: '权限标识',event:'permissionId',config:{type:'input'}}
 ,{field:'createDate', title: '创建时间',event:'date',width:120,config:{type:'date',dateType:'date'}}
 ,{field:'type',title:'类型',event:'type',config:{type:'select',data:[{name:1,value:'菜单'},{name:2,value:'按钮'}]},width:150}
 ]],done:function () {
 treeTable.closeAllTreeNodes();
 treeTable.openTreeNode(1)
 }
 });
 /**
 *表格的增删改都会回调此方法
 * 与table.on(tool(lay-filter))用法一致。
 **/
 tableTree.on('tool(tableEvent)',function (obj) {
 var field = obj.field; //单元格字段
 var value = obj.value; //修改后的值
 var data = obj.data; //当前行数据
 var event = obj.event; //当前单元格事件属性值
 //event为del为删除 add则新增 edit则修改 async则为异步请求数据。
 //这个三个值固定死了,切莫定义与之三个重复的event。
 if(event !== 'del' && event !== 'add' && event !== 'type' && event !== 'async'){
 var update = {};
 update[field] = value;
 obj.update(update);
 console.log(obj)
 }
 if(event === 'type'){
 obj.update({type:value.value});
 }
 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'}]);
 }
 if(event === 'id'){
 $(this).parents('tr').attr('tree-id',value);
 }
 });

 /**
 *监听复选框选中状态
 **/
 tableTree.on('checkbox(tableEvent)', function(obj){
 console.log(obj.checked); //当前是否选中状态
 console.log(obj.data); //选中行的相关数据
 console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
 console.log(obj.data);
 });
 var isAsc = true;
 table.on('toolbar(tableEvent)', function(obj){
 var id = $(this).attr("id");
 if(id==="btn1"){
 //data可以为空,为空则创建空行,否则按照data数据生成行
 treeTable.addTopTreeNode();//新增最上级节点
 }else if(id === 'btn2') {
 console.log(treeTable.getCheckedTreeNodeData()) //获取选中行的树状数据
 }else if(id === 'btn3') {
 console.log(treeTable.getTableTreeData())//获取表格树所有数据
 }else if(id === 'btn4') {
 treeTable.closeTreeNode('6'); // 根据tr或者树id关闭相对应树节点
 }else if(id === 'btn5') {
 treeTable.openTreeNode(6); // 根据tr或者树id展开相对应树节点
 }else if(id === 'btn6') {
 treeTable.closeAllTreeNodes(); //关闭所有树节点
 }else if(id === 'btn7') {
 treeTable.openAllTreeNodes(); //展开所有树节点
 }else if(id === 'btn8') {
 console.log(treeTable.getTreeOptions()); //获取表格配置
 }else if(id === 'btn9'){
 treeTable.reload(); //表格树进行reload
 }else if(id === 'btn10') {
 treeTable.delTreeNode('19'); //根据tr元素或者节点id删除节点及相关叶子节点
 }else if(id === 'btn11') {
 treeTable.clearSearch(); //重置搜索
 }else if(id === 'btn12') {
 //传了数据进去进行刷新,那么会把原来的数据给删除了,
 //然后把传进去的数据进行更新进去
 treeTable.refresh();
 }else if(id === "btn13"){
 treeTable.sortByTreeNode(28,'sort',isAsc); //指定节点或节点id排序
 isAsc = !isAsc;
 }
 });

 /**
 * 整个表格树排序,与layui进行了整合。
 */
 table.on('sort(tableEvent)', function(obj){
 treeTable.sort({field:obj.field,desc:obj.type === 'desc'})
 });

 $('#aassss').on('change',function () {
 treeTable.keywordSearch(this.value); //关键词搜索树
 });
 });
</script>
</html>