大连响应式网站建设,网站建设先进,南昌集团网站建设,怎么样自己做网站赚钱年入40万概述后台框架中使用树状表格是非常常用的操作#xff0c;layUI本身并没有这种组件。 第三方的treetable.js做到了完美的实现#xff0c;但是不能实现在双击时异步加载数据#xff0c;本文就是站在了巨人的肩膀上实现的异步加载的树状表格~1. 使用说明本组件基于treetable.js…概述后台框架中使用树状表格是非常常用的操作layUI本身并没有这种组件。 第三方的treetable.js做到了完美的实现但是不能实现在双击时异步加载数据本文就是站在了巨人的肩膀上实现的异步加载的树状表格~1. 使用说明 本组件基于treetable.js组件进行编写最大的区别在treetable.js无法进行异步加载而本组件则使用异步加载树状表格。 因此若无异步加载需求建议直接使用treetable.js有异步加载需求时可使用本组件。 由于treetable.js的源码进行过修改因此不能使用官方下载的原版本如需使用可私聊作者获取2. 使用需知2.1 本组件依赖于treetable.js【重中之重】 由于本组件依赖于treetable.js,因此使用本组件时需首先引入treetable.js方可使用。 但由于treetable.js的源码进行过修改因此不能使用官方下载的原版本如需使用可私聊作者获取。 代码示例layui.config({base: ../../common/
}).extend({index: lib/index,treetable: ../lib/extend/treetable, // 使用异步加载treetableAsync必须先引入treetabletreetableAsync : ../lib/extend/treetableAsync
})2.2 本组件基于layUIAdmin进行使用 本组件使用中的Ajax请求基于layUIAdmin的admin.req()进行。 如果不使用layUIAdmin需要自行调整源码。2.3 本组件的方法支持treetable.js的所有方法 本组件中所用的所有方法均基于支持treetable.js中所使用的方法因此在treetable.js中可以调用的方法均可使用treetableAsync调用。 例如treetableAsync.expandAll(#dataList);
// 等同于
treetable.expandAll(#dataList);2.4 本组件不支持的其他方法均可使用layui-table组件的方法。 本组件及treetable.js所不支持的方法均可使用layUI原生的数据表格组件的相应方法。 本组件不支持列表的toolbar操作则可以使用table原生的事件监听//列表操作
table.on(tool(dataList), function (obj) {
})2.4 组件源码 本组件源码附上大家有疑问可以评论留言。layui.define([index,form,treetable,jquery,treetable],function(exports){var treetable layui.treetable,table layui.table,form layui.form,$ layui.jquery,setter layui.setter,view layui.view,admin layui.admin;var tableData [];var treetableAsync {render : function(param){var provincesUrl param.url;function init(id){admin.req({url: provincesUrl id,type:get,success:function(r){param.data tableData r.data;tableInit();}});}init(param.treeSpid);// 渲染表格function tableInit(){treetable.render(param);}$(body).on(dblclick,.layui-table-body .layui-table tr,function(){var top $(.layui-table-body).scrollTop();var pid $(this).find(div[class$param.treeIdName]).text();var index $(this).index();admin.req({url: provincesUrl pid,type:get,success:function(r){var isInit false;for(var i0; ir.data.length; i){var isPush true;for(var j0; jtableData.length; j){if(r.data[i][param.treeIdName] tableData[j][param.treeIdName]){isPush false;}}if(isPush){tableData.push(r.data[i]);isInit true;}}if(isInit){param.data tableData;tableInit();expandSelfAndParent(index);$(.layui-table-body).scrollTop(top);}}});});function expandSelfAndParent(index){treetable.toggleRows($(.layui-table-body .layui-table tr).eq(index).find(.treeTable-icon));var tpid $(.layui-table-body .layui-table tr).eq(index).find(.treeTable-icon).attr(lay-tpid);var trs $(.layui-table-body .layui-table tr);var j -1;for(var i0; itrs.length; i){if($(trs[i]).find(.treeTable-icon).attr(lay-tid) tpid){treetable.toggleRows($(.layui-table-body .layui-table tr).eq(i).find(.treeTable-icon));if($(trs[i]).find(.treeTable-icon).attr(lay-tpid) ! 0){ji}break;}}if(j ! -1){init(j)}}},toggleRows:function($dom, linkage){treetable.toggleRows($dom, linkage);},getEmptyNum:function(pid, data){treetable.getEmptyNum(pid, data);},checkParam:function(param){treetable.checkParam(param);},expandAll:function(dom){treetable.expandAll(dom);},foldAll:function(dom){treetable.foldAll(dom);}}exports(treetableAsync, treetableAsync);}) 初次之外本组件所有方法属性均与treetable.js完全相同请熟读treetable.js的帮助文档。【附】 非异步加载的treetable.js使用方式 实现layui的树形表格treeTable1.简介 在layui数据表格之上进行扩展实现。演示地址https://whvse.gitee.io/treetable-lay/ 还有一个BOM表结构的树形表格树形表格2欢迎查看。2.使用方法2.1.引入模块 下载module/treetable-lay整个文件夹放在你的项目里面然后使用模块加载的方式使用layui.config({base: module/
}).extend({treetable: treetable-lay/treetable
}).use([treetable], function () {var treetable layui.treetable;});2.2.渲染表格table idtable1 classlayui-table lay-filtertable1/tablescript
layui.use([treetable], function () {var treetable layui.treetable;// 渲染表格treetable.render({treeColIndex: 2, // treetable新增参数treeSpid: -1, // treetable新增参数treeIdName: d_id, // treetable新增参数treePidName: d_pid, // treetable新增参数treeDefaultClose: true, // treetable新增参数treeLinkage: true, // treetable新增参数elem: #table1,url: json/data1.json,cols: [[{type: numbers},{field: id, title: id},{field: name, title: name},{field: sex, title: sex},{field: pid, title: pid},]]});
});
/script注意 可以使用url传递数据也可以使用data传递数据如果使用url传递数据参数是where字段 跟layui数据表格的使用方式一致。数据格式 总而言之就是以id、pid的形式不是以subMenus的形式当然id、pid这两个字段的名称可以自定义{code: 0,msg: ok,data: [{id: 1,name: xx,sex: male,pid: -1},{id: 2,name: xx,sex: male,pid: 1}]
}2.3.参数说明 layui数据表格的所有参数都可以用除此之外treetable新增的参数有参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级treeColIndex 树形图标箭头和文件夹、文件的图标显示在第几列 索引值是cols数组的下标。treeSpid 最上级的父级id比如你可以规定pid为0或-1的是最顶级的目录。treeIdName treetable是以id和pid字段来渲染树形结构的如果你的数据没有id和pid字段你可以指定id和pid字段的名称。treePidName pid在你的数据字段中的名称。treeDefaultClose 默认是全部展开的如果需要默认全部关闭加上treeDefaultClose:true即可。treeLinkage 父级展开时是否自动展开所有子级2.4.注意事项不能使用分页功能即使写了page:true也会忽略该参数。不能使用排序功能不要开启排序功能。table.reload()不能实现刷新请参考demo的刷新。除了文档上写的http://treetable.xxx的方法之外其他数据表格的方法都使用http://table.xxx。建议删除和修改请求完后台之后请刷新重新渲染表格最好不要使用obj.delete方式删除。2.5.其他方法全部展开treetable.expandAll(#table1);全部折叠 javascript treetable.foldAll(#table1);2.6.如何修改图标 通过css来修改图标content是图标的unicode字符。修改文件夹图标/** 未展开 */
.treeTable-icon .layui-icon-layer:before {content: e638;
}/** 展开 */
.treeTable-icon.open .layui-icon-layer:before {content: e638;
}修改文件图标.treeTable-icon .layui-icon-file:before {content: e621;
}修改箭头的图标/** 未展开 */
.treeTable-icon .layui-icon-triangle-d:before {content: e623;
}/** 展开 */
.treeTable-icon.open .layui-icon-triangle-d:before {content: e625;
}如何获取content2.7.截图 树形表格1 树形表格2
