来源:https://gitee.com/whvse/treetable-lay
官方演示:https://whvse.gitee.io/treetable-lay/
1.说明
作者发布了两个版本的组件.
出于需求的需要,未使用官方所推荐的layui.use()相关方式进行调用.使用非模块化方式（即所有模块一次性加载)进行调用
需要特别注意,在使用treeTable-lay时的数据是不进行分页的,后端接口不需要实现分页.量级大的数据最好不用tree形式展示.如果强行使用分页,显示与搜索时的效果不太理想.
2.引用
3.代码
var layui_table_tree={
//表格渲染结束后的树状表格对象
tableins: null,
//用于创建表格的参数
table_para: {
elem: '#table_div'
//容器唯一 id. id 是对表格的数据操作方法上必要的传递条件
, id: "tableTree_id"
//请求参数
,para:''
,url:"${request.contextPath}/role/getAl"
,data:null // 数据
,tree: {
//是否是pid形式的数据
isPidData:true
// 折叠图标显示在第几列
,iconIndex: 1
// 设定id的字段名
,idName:"id"
//设定pid的字段名，children形式数据不需要
, pidName:'parent_id'
//自定义默认展开的字段名
,openName:'name'
},
cols: null
},
//设置表格渲染的核心参数 url和表头信息,url参数
set_table_data: function (url, cols, para) {
layui_table_tree.table_para.url = url;
layui_table_tree.table_para.cols = cols;
layui_table_tree.table_para.para = para;
},
//设置表格渲染的核心参数 url和表头信息,url参数,tree显示设置
set_table_data_tree: function (url, cols, para,tree) {
layui_table_tree.table_para.url = url;
layui_table_tree.table_para.cols = cols;
layui_table_tree.table_para.para = para;
layui_table_tree.table_para.tree = tree;
},
//更新表格的参数
update_table_para:function(para){
if(para!=null){
for(var key in para){
layui_table_tree.table_para[key]=para[key];
}
}
},
//通过设置的url与参数相关信息,加载tree展示需要的数据
load_tree_data(para){
layui_table_tree.update_table_para(para);
var url=layui_table_tree.table_para.url;
var para=layui_table_tree.table_para.para;
$.ajaxSettings.async=false;
$.getJSON(url, para,function (o) {
if (o.code == 0) {
layui_table_tree.table_para.data=o.data;
}
});
$.ajaxSettings.async=true;
},
//表格渲染
table_render: function () {
layui_table_tree.tableins = layui.treeTable.render(layui_table_tree.table_para);
},
//加载表格数据并渲染
table_load_render:function(para){
layui_table_tree.load_tree_data(para);
layui_table_tree.table_render();
},
//表格搜索 search_para: 请求的参数
search: function (search_para) {
layui_table_tree.table_para.para=search_para;
layui_table_tree.table_load_render();
},
// 展开全部
expandAll:function(){
layui_table_tree.tableins.expandAll();
},
// 折叠全部
foldAll:function(){
layui_table_tree.tableins.foldAll();
},
//取消复选框 父元素到子元素的联动
closeCheckboxParentLinkage:function () {
var nullFunc=function(){
};
layui_table_tree.tableins.__proto__.checkSubCB=nullFunc;
},
//取消复选框 全部父子联动
closeCheckboxAllLinkage:function () {
var nullFunc=function(){
};
layui_table_tree.tableins.__proto__.checkSubCB=nullFunc;
layui_table_tree.tableins.__proto__.checkParentCB=nullFunc;
},
//设置点击表格行,进行选中
click_line_checked: function () {
// 监听行单击事件
layui.treeTable.on('row(table_div)', function(obj){
var tr=obj.tr;
var input= tr.children().eq(0).find("input").next('.layui-form-checkbox')
var input_radio= tr.children().eq(0).find("input").next('.layui-form-radio');
input.click()
input_radio.click();
});
},
//获取当前选中行的数据
get_checked_data: function () {
return layui_table_tree.tableins.checkStatus()
},
//获取当前选中行的数据的id
get_checked_data_id: function () {
var table_data = layui_table_tree.get_checked_data();
return paraGetId(table_data);
},
//要求选中一条数据,且返回id
selectOne: function () {
var table_data = layui_table_tree.get_checked_data();
if (table_data == null) {
layer.msg("无法获取选中数据", {icon: 2});
return null;
}
if (table_data.length != 1) {
if (table_data.length == 0) {
layer.msg("至少要选中一条数据", {icon: 2});
} else {
layer.msg("只能选择一条数据", {icon: 2});
}
return null;
}
var one_id = paraGetOneId(table_data);
if (one_id == null) {
layer.msg("无法获取选中行id", {icon: 2});
return null;
}
return one_id;
},
//要求选中多条数据,且返回id
selectMany: function () {
var table_data = layui_table_tree.get_checked_data();
if (table_data == null) {
layer.msg("无法获取选中数据", {icon: 2});
return null;
}
if (table_data.length < 1) {
layer.msg("至少要选中一条数据", {icon: 2});
return null;
}
var many_id = paraGetId(table_data);
if (many_id == null) {
layer.msg("无法获取选中行id", {icon: 2});
return null;
}
return many_id;
},
//设置选中
setChecked:function (ids) {
layui_table_tree.tableins.setChecked(ids)
}
}
引用到的方法 paraGetOneId和paraGetId
//获取字面量数组的第一个id项
function paraGetOneId(para) {
if (para.length == 0) {
return null;
} else {
var temp = para[0];
return temp.id;
}
}
//获取字面量数组的id项
function paraGetId(para) {
var ids = [];
if (para.length == 0) {
return null;
}
for (var i = 0; i < para.length; i++) {
ids.push(para[i].id)
}
return ids;
}
4. 页面使用
5.展示效果
6.还需完善的地方
暂不能实现一个页面展示两个表格.因为创建的是同一个表格对象
在表格文本比较长的时候,可能会没有原table的省略效果,造成表格样式出错.暂时的解决方法是在col上增加style:' overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'
