树形表格TreeGrid

展开
1.效果截图

2.数据结构

[{"mcode":"UI","mname":"页面开发模板","micon":"glyphicon glyphicon-th","murl":"","explains":"开发页面的常用组件和页面","parent":null,"sort":4,"children":[{"mcode":"Cssd","mname":"CSS动画","micon":"glyphicon glyphicon-briefcase","murl":"/css/aaa","explains":"aaaaa啊啊啊aaaaa","parent":"UI","sort":1,"children":[]}]}]//控制器
@ResponseBody
@RequestMapping(value = "/selectZtreeModule", produces = {"application/json;charset=UTF-8"})
public List<Module> selectZtreeModule(HttpServletRequest request){List<Module> modules = new ArrayList<Module>();try {HashMap param = new HashMap();//。。。前台搜索关键字searchText。。。modules= moduleService.selectModuleList(param);modules=putChildren(modules);} catch (Exception e) {modules=null;}return modules;
}
//循环遍历下级节点，添加到module实体中
public List<Module> putChildren(List<Module> moduleList){if(moduleList.size()>0){for(Module mod2:moduleList){HashMap param = new HashMap();param.put("parent",mod2.getMcode());List<Module> res2 = moduleService.selectModuleList(param);if(res2.size()>0){res2=putChildren(res2);}mod2.setChildren(res2);}}return moduleList;
}//实体
public class Module {private String mcode;private String mname;private String micon;private String murl;private String explains;private String parent;private Integer sort;private List<Module> children;
}//mapperSELECT mcode,mname,micon,murl,explains,parent,sort FROM sys_module<where><if test="searchText!=null">(mcode like #{searchText} or mname like #{searchText})</if><if test="parent==null">AND parent is null</if><if test="parent!=null">AND parent=#{parent}</if></where>

ORDER BY sort

3，关键js代码

<script type="text/javascript">
/*通过指定的方法来自定义栏数据*/function customCheckBox(row, col){return "<input type='checkbox' name='city_name' οnclick='selCk(this)'  id='"+row.mcode+"'>";}//图标function customerIcon(row){return "<span class='"+row.micon+"' aria-hidden='true'></span>";}//行点击事件function itemClickEvent(id, index, data){console.log("选中行：",data);}//表格设置var config = {id: "moduleListTable",   //表格IDwidth: "800",    //最小宽度renderTo: "div1",  //指定表格生成的父容器IDheaderAlign: "left",headerHeight: "30",dataAlign: "left", //默认的数据水平位置indentation: "20",folderOpenIcon: "/js/plugins/dataTables/images/folderOpen.gif",  //图标地址folderCloseIcon: "/js/plugins/dataTables/images/folderClose.gif",defaultLeafIcon: "/js/plugins/dataTables/images/defaultLeaf.gif",hoverRowBackground: "false",folderColumnIndex: "1",itemClick: "itemClickEvent",      //点击事件columns:[//headerAlign表头水平位置，dataAlign数据水平位置{headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},{headerText: "资源名称", dataField: "mname", headerAlign: "center", dataAlign: "left"},{headerText: "资源ID", dataField: "mcode", headerAlign: "center", width: "150"},{headerText: "资源地址", dataField: "murl", headerAlign: "center", dataAlign: "left", width: "300"},{headerText: "资源图标", dataField: "micon", headerAlign: "center", dataAlign: "center", width: "100",handler:"customerIcon"},{headerText: "描述", dataField: "explains", headerAlign: "center", dataAlign: "left", width: "300"},{headerText: "父节点", dataField: "parent", headerAlign: "center", dataAlign: "center", width: "50",hidden:true},{headerText: "排序", dataField: "sort", headerAlign: "center", dataAlign: "center", width: "50"}],url:"/module/selectZtreeModule"     //请求地址};//创建一个组件对象var treeGrid = new TreeGrid(config);treeGrid.show();   //相当于datagrid的reload，在添加删除数据之后调用刷新表格/*展开、关闭所有节点。isOpen=Y表示展开，isOpen=N表示关闭*/function showAll(){if($("#Openbtn>i").hasClass("glyphicon-folder-close")){treeGrid.expandAll("Y");$("#Openbtn>i").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");}else{treeGrid.expandAll("N");$("#Openbtn>i").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");}}//级联选中、取消选中//(取消)选中父节点，其子节点自动(取消)选中function selCk(ck){var ckId = $(ck).attr("id");var tr = $(ck).parent().parent();treeGrid.checkSubs(tr.attr("id"),$(ck).prop("checked"));}
</script>

4.页面引用

<div class="example" id="div1"><div class="btn-group hidden-xs" id="moduleTableToolbar" role="group"><button  type="button" class="btn btn-outline btn-default" onclick="addModuleModal('add');"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i></button><button  type="button" class="btn btn-outline btn-default" onclick="addModuleModal('edit');"><i class="glyphicon glyphicon-edit" aria-hidden="true"></i></button><button type="button" class="btn btn-outline btn-default" onclick="delModule();"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button><button type="button" id="Openbtn" class="btn btn-outline btn-default" onclick="showAll();"><i class="glyphicon glyphicon-folder-open" aria-hidden="true"></i></button></div><!--<table id="moduleListTable"></table>-->
</div><!-- 全局js -->
<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../../static/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script><!-- TreeGrid table -->
<script src="../../static/js/plugins/dataTables/TreeGrid.js" th:src="@{/js/plugins/dataTables/TreeGrid.js}"></script>

5.重点来了，核心js文件

TreeGrid.js
————————————————
版权声明：本文为CSDN博主「占星安啦」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012796085/article/details/80357317

树形表格TreeGrid相关推荐

不容错过的精美的树形表格treegrid在项目里面使用总结
一问题描述: 树形表格TreeGrid在日常项目中还是运用的比较多的,哪究竟都在什么地方使用呢? 二使用场景 TreeGrid它具体使用在什么地方? 首页您要用TreeGrid,肯定是它的特点满足 ...
Element UI 树形表格 TreeGrid TreeTable 实现
最近在要使用类似easyui的TreeGrid的功能,但在Element中table没有现成的demo,查了一下,遇到这篇文章,写得非常不错的,原作者是一次性加载,但我们要求使用axios异步加载,所 ...
php 可以编辑treegrid,TreeGrid（树形表格）
TreeGrid(树形表格) 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象. 树形表格用于显示分层数据表格.它是基于数据表格.组合 ...
DataTables TreeGrid 插件可以快速实现树形表格
dataTables.treeGrid 插件介绍更新日志真实系统展现效果 DEMO参考使用方法 DataTable 渲染JSON数据格式 HTML数据格式(以DEMO截图代码为例) 插件介绍针 ...
TreeGrid(树形表格)
树形表格用于显示分层数据表格.它是基于表格,组合树控件和可编辑表格.树形表格允许用户创建可定制的.异步展开行和显示在多列上的分层数据. 示例使用HTML标签创建树形表格,树形表格遵循数据表格的结构
bootstrap 树形表格渲染慢_bootstrap-table-treegrid数据量较大时渲染太久了
bootstrap-table-treegrid数据量较大时渲染太久了森姐姐 2019-10-23 16:48:51 2260 收藏 2 分类专栏: 遇到的问题最后发布:2019-10-23 16 ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
Guns 旗舰版2.1发布，更新树形表格
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> Guns旗舰版v2.1 更新说明: 部门管理增加左侧树展示菜单管理表格改为树形表格 Guns 介绍: Guns基 ...

树形表格TreeGrid

树形表格TreeGrid相关推荐

最新文章

热门文章