1.说明
- 作者发布了两个版本的组件.
第一个是在2018年的1.0版本,基于Layui的table完成的实现
第二个是在2019年发布2.0版本,仍然基于的Layui,但对底层进行了一定的重写,不再使用table进行实现.
当前文章是对2.0版本的使用封装(最后更新时间2019-12-27)
这两个版本的使用差异有些大.若使用1.0版本,可以参考https://gitee.com/stylefeng/guns的使用方式
- 出于需求的需要,未使用官方所推荐的layui.use()相关方式进行调用.使用非模块化方式（即所有模块一次性加载)进行调用
- 需要特别注意,在使用treeTable-lay时的数据是不进行分页的,后端接口不需要实现分页.量级大的数据最好不用tree形式展示.如果强行使用分页,显示与搜索时的效果不太理想.
2.引用
<!-- layui的样式包 -->
<link rel="stylesheet" href="${request.contextPath}/skins/layui/css/layui.css" media="all"/>
<!-- layui的js,模块化使用 -->
<!--<script type="text/javascript" src="${request.contextPath}/skins/layui/layui.js"></script>-->
<!--layui的js,可非模块化 -->
<script type="text/javascript" src="${request.contextPath}/skins/layui/layui.all.js"></script>
<!-- 基于layui的树状表格 1.0 -->
<!--<link rel="stylesheet" href="${request.contextPath}/skins/layui/treetable-lay/treetable.css" media="all"/>-->
<!--<script type="text/javascript" src="${request.contextPath}/skins/layui/treetable-lay/treetable.js"></script>-->
<!-- 基于layui的树状表格 2.0 -->
<link rel="stylesheet" href="${request.contextPath}/skins/js/treeTable/treeTable.css" media="all"/>
<script type="text/javascript" src="${request.contextPath}/skins/js/treeTable/treeTable.js"></script>
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. 页面使用
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta content="always" name="referrer">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<#include "../../common/header.html">
</head>
<body>
<!--最外面的灰底框,用于与ifram区别开-->
<div class="col-xs-12 lightgray_div">
<!--白底框-->
<div class="col-xs-12 white_div">
<!--搜索框-->
<div class="col-xs-12 search_div">
<div class="input-group g-fr">
<form id="inquire" class="form-inline ">
<div class="input-group ">
<input type="text" class="form-control" id="name" name="name" placeholder="角色名称">
</div>
<button type="button" class="layui-btn" style="height: 30px" id="btn_search" onclick="table_func.search()"><i
class="layui-icon layui-icon-search"></i></button>
</form>
</div>
</div>
<div class="col-xs-12" style="overflow:auto " >
<div>
<div class="layui-table-tool" style="margin-bottom: -11px;margin-top: 10px">
<div class="layui-table-tool-temp">
<div style="margin-bottom: -5px">
<div class="layui-btn-container " style="float: left;">
<button class="layui-btn " onclick="table_func.saveRoleInfo()">
<i class="layui-icon layui-icon-ok"></i>
确定
</button>
<button class="layui-btn layui-btn-normal" onclick="table_func.cancel()">
<i class="layui-icon layui-icon-close"></i>
取消
</button>
</div>
<div class="layui-table-tool-self">
<div class="layui-inline" title="展开所有" lay-event="LAYTABLE_COLS" onclick="table_func.expandAll()" >
<i class="layui-icon layui-icon-triangle-d"></i>
</div>
<div class="layui-inline" title="折叠所有" lay-event="LAYTABLE_EXPORT" onclick="table_func.foldAll()" id="">
<i class="layui-icon layui-icon-template-1"></i>
</div>
<!--<div class="layui-inline" title= lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div>-->
</div>
</div>
</div>
</div>
<table id="table_div" lay-filter="main"></table>
</div>
</div>
</div>
</div>
</body>
<#include "../../common/layui_init.html">
<!--表格工具类的按钮-->
<script type="text/javascript">
//树状表格 表头
var cols = [
// {type: 'checkbox'}
{field: 'id', title: 'id', sort: true, type: 'checkbox', fixed: 'left'}
, {field: 'name', width:"25%" ,title: '角色名称',style:' overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'}
, {field: 'code',width:"15%", title: '角色别名'}
// , {field: 'parent_ids', title: '父级'}
, {field: 'orderno', title: '排序号'}
, {field: 'level', title: '层级'}
, {field: 'remark', title: '备注'}
, {field: 'remark', title: '备注'}
, {
field: 'gmt_create', title: '创建时间'
, templet: function (col) {
return layui_table.date_format(col.gmt_create, "yyyy-MM-dd hh:mm:ss")
}
},
{
field: 'gmt_create', title: '修改时间'
, templet: function (col) {
return layui_table.date_format(col.gmt_modified, "yyyy-MM-dd hh:mm:ss")
}
}
]
//页面要用的方法
table_func = {
//表格初始化
init: function () {
layui_table_tree.set_table_data("${request.contextPath}/role/getAll",cols,$("#inquire").serialize())
layui_table_tree.table_load_render();
},
//搜索
search: function () {
layui_table_tree.search($("#inquire").serialize())
},
//保存
saveRoleInfo: function () {
var ids=layui_table_tree.get_checked_data_id();
$.getJSON("${request.contextPath}/user/saveRoleInfo", {userId:"${userId!?html}",roleIds:ids}, function (o) {
if(layui_layer.ajax_verify(o)){
var data=o.data;
table_func.cancel();
}
});
},
//取消
cancel: function () {
var index=parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},
load:function(){
$.getJSON("${request.contextPath}/role/getRoleIdByUserId", {userId:"${userId!?html}"}, function (o) {
if(layui_layer.ajax_verify_not_success_hint(o)){
var data=o.data;
layui_table_tree.setChecked(data);
}
});
},
// 展开全部
expandAll:function(){
layui_table_tree.expandAll();
},
// 折叠全部
foldAll:function(){
layui_table_tree.foldAll();
}
}
$(function () {
//回车点击事件 搜索
enter_event.event_search_click();
//树状表格渲染
table_func.init();
//取消 父复选框到子复选框的联动
layui_table_tree.closeCheckboxAllLinkage();
//设置点击表格行,进行选中
layui_table_tree.click_line_checked()
table_func.load();
});
</script>
<#include "../../common/footer-inner.html">
</html>
5.展示效果
6.还需完善的地方
- 暂不能实现一个页面展示两个表格.因为创建的是同一个表格对象
- 在表格文本比较长的时候,可能会没有原table的省略效果,造成表格样式出错.暂时的解决方法是在col上增加style:' overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'
网友评论