JAVA_树状表格分页(layUI、treeTable.js)

最新推荐文章于 2024-06-28 03:45:22 发布
最新推荐文章于 2024-06-28 03:45:22 发布
阅读量5.8k 收藏 15
点赞数 2
文章标签： 树状表格分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YE_summer_star/article/details/101421232
版权

效果图展示(PS:本人很懒，刚开始想在网上随意找一个就用，后来发现好像PHP的不少，JAVA的树状表格大多数跟我开始写的一样没有分页，导致数据量过大后加载过于缓慢被客户吐糟，最后没找到合适的就自己写了一个简单的demo，不嫌弃的话可以自己再改改样式)

准备：layUI、treeTable.js

代码展示：

<input id="total" type="hidden" value="${total }">
	<table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
	<div id="pageDemo"></div>
	
	<script type="text/javascript">
		$(function(){
	           $.ajax({
				url :'tSDepartController.do?getDataNew',
				data : {
					'curr' : 1,
					'limit' : 10
				},
				type : 'post',
				dataType : 'json',
				success : function(data){
					test(data);
				}
			})            
		})
		
		function test(data){
			layui.config({
				base: 'plug-in/test/',
			})
			layui.use(['laypage', 'treeTable', 'layer', 'code', 'form'],function(){
				var o = layui.$,
					form = layui.form,
					laypage = layui.laypage,
					layer = layui.layer,
					treeTable = layui.treeTable;
				var	re = treeTable.render({
					elem: '#tree-table',
					data: data,
					icon_key: 'departname',
					is_checkbox: true,
					end: function(e){
						form.render();
					}
					,cols: [
						{
							key: 'departname',
							title: '机构名称',
							width: '1500px',
							align: 'left',
						},
						{
							key: 'description',
							title: '机构描述',
							width: '1000px',
							align: 'center',
						},
						{
							key: 'parentdepartid',
							title: '父ID',
							width: '100px',
							align: 'left',
						},
						{
							key: 'orgCode',
							title: '机构编码',
							width: '100px',
							align: 'center',
						},
						{
							key: 'orgType',
							title: '机构类型',
							width: '100px',
							align: 'center',
						},
						{
							key: 'mobile',
							title: '电话',
							width: '300px',
							align: 'center',
						},
						{
							key: 'fax',
							title: '传真',
							width: '300px',
							align: 'center',
						},
						{
							key: 'address',
							title: '地址',
							width: '1000px',
							align: 'left',
						},
						{
							title: '标记',
							width: '100px',
							align: 'center',
							template: function(item){
								return '<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">';
							}
						}
					]
				});
				
				// 监听checkbox选择
				treeTable.on('tree(box)',function(data){
					layer.msg(JSON.stringify(data));
				})
				
			});
		}
		
		layui.use(['laypage', 'layer'],function(){
			var laypage = layui.laypage
				,layer = layui.layer;
			
			var total = $('#total').val();
			
			//分页
			laypage.render({
				elem: 'pageDemo'
				,count: total
				,limit: 10
				,skin: '#1E9FFF'
				,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
				,jump: function(obj, first){
					if(!first){
						$.ajax({
							url :'tSDepartController.do?getDataNew',
							data : {
								'curr' : obj.curr,
								'limit' : obj.limit
							},
							type : 'post',
							dataType : 'json',
							success : function(data){
								test(data);
							}
						});
					}
				}
			});
		})
	</script>
@RequestMapping(params = "list")
public ModelAndView list(HttpServletRequest request) {
		int total = 0;// 一级机构总数
		// 获取一级机构总数
        String sql_total = "select count(1) total from t_s_depart where org_type = '1'";
        List<Map<String, Object>> list_total =  systemService.findForJdbc(sql_total);
        if(!ListUtils.isNullOrEmpty(list_total)){
        	for (Map<String, Object> map : list_total) {
        		total = Integer.parseInt(map.get("total")==null?"0":map.get("total").toString());
			}
        }
        request.setAttribute("total", total);
        
		return new ModelAndView("com/szerp/department/tSDepartListNew");
	}
	
@RequestMapping(params = "getDataNew")
@ResponseBody
public List<TSDepartEntity> getDataNew(HttpServletRequest request, HttpServletResponse response) throws IOException{
		int page = request.getParameter("curr")==null?1:Integer.parseInt(request.getParameter("curr").toString());
		int limit = request.getParameter("limit")==null?1:Integer.parseInt(request.getParameter("limit").toString());
		
		// 分页数据
        String sql_data = "select id,departname,description,parentdepartid,org_code,org_type,mobile,fax,address,depart_order from (select rownum num,d.* from t_s_depart d where d.org_type = '1') where num > "+((page-1)*limit)+" and num <= "+(page*limit);
        List<Map<String, Object>> list_data = systemService.findForJdbc(sql_data);
        List<TSDepartEntity> listDepart = new ArrayList<TSDepartEntity>();
        String ids = "";
        if(!ListUtils.isNullOrEmpty(list_data)){
        	for (Map<String, Object> map : list_data) {
        		ids = ids + "'" + (map.get("ID")==null?"":map.get("ID").toString()) + "',";
        		
        		TSDepartEntity tSDepart = new TSDepartEntity();
        		tSDepart.setId(map.get("ID")==null?"":map.get("ID").toString());
        		tSDepart.setDepartname(map.get("DEPARTNAME")==null?"":map.get("DEPARTNAME").toString());
        		tSDepart.setDescription(map.get("DESCRIPTION")==null?"":map.get("DESCRIPTION").toString());
        		tSDepart.setParentdepartid(map.get("PARENTDEPARTID")==null?"":map.get("PARENTDEPARTID").toString());
        		tSDepart.setOrgCode(map.get("ORG_CODE")==null?"":map.get("ORG_CODE").toString());
        		tSDepart.setOrgType(map.get("ORG_TYPE")==null?"":map.get("ORG_TYPE").toString());
        		tSDepart.setMobile(map.get("MOBILE")==null?"":map.get("MOBILE").toString());
        		tSDepart.setFax(map.get("FAX")==null?"":map.get("FAX").toString());
        		tSDepart.setAddress(map.get("ADDRESS")==null?"":map.get("ADDRESS").toString());
        		tSDepart.setDepartOrder(map.get("DEPART_ORDER")==null?"":map.get("DEPART_ORDER").toString());
        		listDepart.add(tSDepart);
    		}
        }
        ids = "("+ids.substring(0, ids.length()-1)+")";
        
        String sql = "select id,departname,description,parentdepartid,org_code,org_type,mobile,fax,address,depart_order from t_s_depart where parentdepartid in"+ids;
        List<Map<String, Object>> list_data2 = systemService.findForJdbc(sql);
        if(!ListUtils.isNullOrEmpty(list_data2)){
        	return getNext(listDepart, list_data2, ids);
        }
        
		return listDepart;
	}
	
	public List<TSDepartEntity> getNext(List<TSDepartEntity> listDepart, List<Map<String, Object>> list_data2, String ids){
    	String ids_ = "";
		for (Map<String, Object> map : list_data2) {
			ids_ = ids_ + "'" + (map.get("ID")==null?"":map.get("ID").toString()) + "',";
			
    		TSDepartEntity tSDepart = new TSDepartEntity();
    		tSDepart.setId(map.get("ID")==null?"":map.get("ID").toString());
    		tSDepart.setDepartname(map.get("DEPARTNAME")==null?"":map.get("DEPARTNAME").toString());
    		tSDepart.setDescription(map.get("DESCRIPTION")==null?"":map.get("DESCRIPTION").toString());
    		tSDepart.setParentdepartid(map.get("PARENTDEPARTID")==null?"":map.get("PARENTDEPARTID").toString());
    		tSDepart.setOrgCode(map.get("ORG_CODE")==null?"":map.get("ORG_CODE").toString());
    		tSDepart.setOrgType(map.get("ORG_TYPE")==null?"":map.get("ORG_TYPE").toString());
    		tSDepart.setMobile(map.get("MOBILE")==null?"":map.get("MOBILE").toString());
    		tSDepart.setFax(map.get("FAX")==null?"":map.get("FAX").toString());
    		tSDepart.setAddress(map.get("ADDRESS")==null?"":map.get("ADDRESS").toString());
    		tSDepart.setDepartOrder(map.get("DEPART_ORDER")==null?"":map.get("DEPART_ORDER").toString());
    		listDepart.add(tSDepart);
    	}
		ids_ = "("+ids_.substring(0, ids_.length()-1)+")";
		
		String sql = "select id,departname,description,parentdepartid,org_code,org_type,mobile,fax,address,depart_order from t_s_depart where parentdepartid in"+ids_;
	    List<Map<String, Object>> list = systemService.findForJdbc(sql);
	    if(!ListUtils.isNullOrEmpty(list)){
	    	getNext(listDepart, list, ids_);
	    }   
		
        return listDepart;
	}

treeTable.js代码如下：

layui.define(['jquery'], function(exports) {
	var MOD_NAME = 'treeTable',
		o = layui.jquery,
		tree = function() {};
	tree.prototype.config = function() {
		return {
			top_value: 0,
			primary_key: 'id',
			parent_key: 'parentdepartid',
			hide_class: 'layui-hide',
			icon: {
				open: 'layui-icon layui-icon-triangle-d',
				close: 'layui-icon layui-icon-triangle-r',
				left: 16,
			},
			cols: [],
			checked: {},
			is_click_icon: false,
			is_checkbox: false,
			is_cache: true,
		};
	}
	tree.prototype.template = function(e) {
		var t = this,
			level = [],
			tbody = '',
			is_table = o('table' + e.elem).length || !(e.is_click_icon = true),
			checkbox = e.is_checkbox ? '<div class="layui-unselect layui-form-checkbox cbx" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' : '',
			checked = checkbox ? checkbox.replace('cbx', 'cbx layui-form-checked') : '',
			thead = checkbox && '<th style="width:28px;">' + (o.inArray(e.top_value, e.checked.data) > -1 ? checked : checkbox) + '</th>';
		o.each(t.data(e, e.data), function(idx, item) {
			var tr = '',
				is_checked = false,
				hide_class = (item[e.parent_key] == e.top_value) || (item[e.parent_key] == t.cache(e, item[e.parent_key])) ? '' : e.hide_class;
			// 设置每行数据层级
			item.level = level[item[e.primary_key]] = item[e.parent_key] != e.top_value ? (level[item[e.parent_key]] + 1) : 0;
			// 设置是否为最后一级
			item.is_end = !e.childs[item[e.primary_key]];
			o.each(e.cols, function(index, obj) {
				var style = '';
				obj.width && (style += 'width:' + obj.width + ';'), obj.align && (style += 'text-align:' + obj.align + ';'), style && (style = 'style="' + style + '"');
				// 标记设置行checkbox选中
				if(e.is_checkbox && e.checked && o.inArray(item[e.checked.key], e.checked.data) > -1) {
					is_checked = true;
				}
				// 第一次遍历头部的时候拼接表格头部
				idx || (thead += '<th ' + style + '>' + obj.title + '</th>');
				// 指定列加入开启、关闭小图标
				var icon = (obj.key == e.icon_key && !item.is_end) ? '<i class="' + (t.cache(e, item[e.primary_key]) ? e.icon.open : e.icon.close) + '"></i>' : '<span></span>';
				// 指定列小图标按照层级向后位移
				var left = (obj.key == e.icon_key ? level[item[e.primary_key]] * e.icon.left + 'px' : '');
				icon = icon.replace('>', ' style="margin-left:' + left + ';">');
				// 拼接行
				tr += '<td ' + style + (left ? 'data-down' : '') + '>' + icon + (is_table ? '' : (is_checked ? checked : checkbox)) + (obj.template ? obj.template(item) : item[obj.key]) + '</td>';
			});
			var box = is_table ? o(is_checked ? checked : checkbox).wrap('<td style="width:28px;">').parent().prop('outerHTML') : '';
			tbody += '<tr class="' + hide_class + '" data-id="' + item[e.primary_key] + '" data-parentdepartid="' + item[e.parent_key] + '">' + box + tr + '</tr>';
		});
		// 处理表树和树的赋值模板
		var table = is_table ? '<thead><tr data-id="' + e.top_value + '">' + thead + '</tr></thead><tbody>' + tbody + '</tbody>' : tbody.replace(/<tr/g, '<ul').replace(/tr>/g, 'ul>').replace(/<td/g, '<li').replace(/td>/g, 'li>');
		// 确认点击图标或点击列触发展开关闭
		var click_btn = e.is_click_icon ? '[data-down] i:not(.layui-icon-ok)' : '[data-down]';
		// 模板渲染并处理点击展开收起等功能
		o(e.elem).html(table).off('click', click_btn).on('click', click_btn, function() {
			var tr = o(this).parents('[data-id]'),
				td = tr.find('[data-down]'),
				id = tr.data('id'),
				parentdepartid = tr.data('parentdepartid'),
				is_open = (td.find('i:not(.layui-icon-ok)').attr('class') == e.icon.close);
			if(is_open) {
				// 展开子级（子级出现、更改图标）
				td.find('i:not(.layui-icon-ok)').attr('class', e.icon.open);
				td.parents(e.elem).find('[data-parentdepartid=' + id + ']').removeClass(e.hide_class);
				t.cache(e, id, true);
			} else {
				// 关闭子级（更改图标、隐藏所有子孙级）
				td.find('i:not(.layui-icon-ok)').attr('class', e.icon.close);
				t.childs_hide(e, id);
			}
			// 设置监听展开关闭
			layui.event.call(this, MOD_NAME, 'tree(flex)', {
				elem: this,
				item: e.childs[parentdepartid][id],
				table: e.elem,
				is_open: is_open,
			})
		}).off('click', '.cbx').on('click', '.cbx', function() {
			var is_checked = o(this).toggleClass('layui-form-checked').hasClass('layui-form-checked'),
				tr = o(this).parents('[data-id]'),
				id = tr.data('id'),
				parentdepartid = tr.data('parentdepartid');
			t.childs_checkbox(e, id, is_checked);
			t.parents_checkbox(e, parentdepartid);
			// 设置监听checkbox选择
			layui.event.call(this, MOD_NAME, 'tree(box)', {
				elem: this,
				item: parentdepartid === undefined ? {} : e.childs[parentdepartid][id],
				table: e.elem,
				is_checked: is_checked,
			})
		}).off('click', '[lay-filter]').on('click', '[lay-filter]', function() {
			var tr = o(this).parents('[data-id]'),
				id = tr.data('id'),
				parentdepartid = tr.data('parentdepartid'),
				filter = o(this).attr("lay-filter");
			return layui.event.call(this, MOD_NAME, 'tree(' + filter + ')', {
				elem: this,
				item: e.childs[parentdepartid][id],
			})
		});
		e.end && e.end(e);
	};
	// 同级全部选中父级选中/同级全部取消取消父级
	tree.prototype.parents_checkbox = function(e, parentdepartid) {
		var po = o(e.elem).find('[data-parentdepartid=' + parentdepartid + ']'),
			co = o(e.elem).find('[data-id=' + parentdepartid + ']'),
			len = o(e.elem).find('[data-parentdepartid=' + parentdepartid + '] .cbx.layui-form-checked').length;
		if(po.length == len || len == 0) {
			var parentdepartid = co.data('parentdepartid');
			len ? co.find('.cbx').addClass('layui-form-checked') : co.find('.cbx').removeClass('layui-form-checked');
			parentdepartid === undefined || this.parents_checkbox(e, parentdepartid);
		}
	};
	// 子级反选
	tree.prototype.childs_checkbox = function(e, id, is_checked) {
		var t = this;
		o(e.elem).find('[data-parentdepartid=' + id + ']').each(function() {
			var checkbox = o(this).find('.cbx');
			is_checked ? checkbox.addClass('layui-form-checked') : checkbox.removeClass('layui-form-checked');
			t.childs_checkbox(e, o(this).data('id'), is_checked);
		})
	};
	// 点击收起循环隐藏子级元素
	tree.prototype.childs_hide = function(e, id) {
		var t = this;
		t.cache(e, id, false);
		o(e.elem).find('[data-parentdepartid=' + id + ']:not(.' + e.hide_class + ')').each(function() {
			var td = o(this).find('[data-down]'),
				i = td.find('i:not(.layui-icon-ok)');
			// 关闭更换小图标
			i.length && i.attr('class', e.icon.close);
			// 隐藏子级
			td.parents(e.elem).find('[data-parentdepartid=' + id + ']').addClass(e.hide_class);
			t.childs_hide(e, o(this).data('id'))
		});
	};
	// 重新组合数据，父子级关系跟随
	tree.prototype.data = function(e) {
		var lists = [],
			childs = [];
		o.each(e.data, function(idx, item) {
			lists[item[e.primary_key]] = item;
			if(!childs[item[e.parent_key]]) {
				childs[item[e.parent_key]] = [];
			}
			childs[item[e.parent_key]][item[e.primary_key]] = item;
		});
		e.childs = childs;
		return this.tree_data(e, lists, e.top_value, []);
	};
	tree.prototype.tree_data = function(e, lists, parentdepartid, data) {
		var t = this;
		if(lists[parentdepartid]) {
			data.push(lists[parentdepartid]);
			delete lists[parentdepartid]
		}
		o.each(e.data, function(index, item) {
			if(item[e.parent_key] == parentdepartid) {
				data.concat(t.tree_data(e, lists, item[e.primary_key], data))
			}
		});
		return data;
	};
	tree.prototype.render = function(e) {
		var t = this;
		e = o.extend(t.config(), e);
		if(e.url) {
			o.get(e.url, function(res) {
				e.data = res;
				t.template(e);
			})
		} else {
			t.template(e);
		}
		return e;
	};
	// 获取已选值集合
	tree.prototype.checked = function(e) {
		var ids = [];
		o(e.elem).find('.cbx.layui-form-checked').each(function() {
			var id = o(this).parents('[data-id]').data('id');
			ids.push(id);
		})
		return ids;
	};
	// 全部展开
	tree.prototype.openAll = function(e) {
		var t = this;
		o.each(e.data, function(idx, item) {
			item[e.primary_key] && t.cache(e, item[e.primary_key], true);
		})
		t.render(e);
	}
	// 全部关闭
	tree.prototype.closeAll = function(e) {
		localStorage.setItem(e.elem.substr(1), '');
		this.render(e);
	}
	tree.prototype.on = function(events, callback) {
		return layui.onevent.call(this, MOD_NAME, events, callback)
	};
	// 存储折叠状态
	tree.prototype.cache = function(e, val, option) {
		if(!e.is_cache) {
			return false;
		}
		var t = this,
			name = e.elem.substr(1),
			val = val.toString(),
			cache = localStorage.getItem(name) ? localStorage.getItem(name).split(',') : [],
			index = o.inArray(val, cache);
		if(option === undefined) {
			return index == -1 ? false : val
		}
		if(option && index == -1) {
			cache.push(val)
		}
		if(!option && index > -1) {
			cache.splice(index, 1)
		}
		localStorage.setItem(name, cache.join(','));
	};
	var tree = new tree();
	exports(MOD_NAME, tree)
});

更改父级ID字段时，别忘记treeTable.js中也要一同更改哦（以上展示代码为初版demo,若需使用建议优化，还有不要跟我一样不是正式发行版代码就不写备注）

 

Junsy（重复昵称）
关注
Vue（树表格分页）
m0_64863860的博客
10-12 572
t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。在Main组件中指定的是用于显示各功能组件的。先不考虑分页，从后台接口获取数据并绑定到表格显示。菜单图标可以到官网去查找。图二： script部分。script部分，图一。
layui的树形表格treetable
黄小堆
05-13 1172
前言 项目需要要做一个树形表格，项目用的技术框架是layui。去查看了文档，layui没有treeTable的相关内容，但是他的拓展里面有，感觉有点生硬。后面是百度看大牛们写的，自己跟着写的，觉得还是做个笔记好一点。 注意：我用的layui的版本2.4.5，低版本的可能会使树形表格的样式会加载不全的。 话不说多，当代码： 代码 <body> <div class="admin-main"> <table class="layui-table layui-f...
鼠标右键对Layui每行表格数据进行操作
邓占勇的博客
08-24 4851
通过上次介绍的自定义鼠标右键拓展功能，对Layui数据表格中的每行数据进行操作 layui.use(['table', 'layer'], function () { var table = layui.table, layer = layui.layer; table.render({ elem: '#filing_info_tabl...
Layui的 TreeGrid 树形显示数据加分页功能
po2600的专栏
01-03 4797
layui treegrid 在官网人已经有人改造出来了树形显示数据，https://fly.layui.com/extend/treeGrid/，在此基础上加上了分页功能，根据系统需求也调整了样式，我的是.NET开发，Java的可能要改改有些细节的地方 示例：第一页 第二页： 关键代码： <%--引用必要的js和css文件--%> <scrip...
layui 树形表格 treeTable使用详细指南，不能折叠解决办法
最新发布
2401_85767310的博客
06-28 3439
主要功能有，树形表格展示，添加，修改，删除，批量删除，搜索，layui时间日期自定义格式列，表格全部展开、折叠、刷新表格等功能，有兴趣的看下吧~~商品分类管理批量删除添加
layui treetable有异步加载和分页的demo供参考吗
u012407708的博客
06-13 390
第一层加载根节点，之后每展开节点加载下级数据，接口的入参是parentId。
layui-treetable
03-01
layui-treetable 兼容layui，带复选框，树形列表，以及在树形列表添加操作按钮
layui 树形表格分页功能
weixin_38808271的博客
12-22 1802
layui 树形表格 分页功能
layui treegrid 分页
01-03
layui treegrid树形显示加分页，教程： https://blog.csdn.net/po2600/article/details/103819801
layui 树形table分页并动态渲染复选框
Earlyhaozai的博客
10-22 4794
做了伸手党这么久，第一次写博客: 废话不说，这个是根据网上的一个树形表格修改的(出处忘了)，(本来没有分页的，还有点击事件不是我想要的)，所以修改了 弊端：分页后其剩下的子节点没有属于父节点，看图（而且是把所有数据查出来再分页，而不是点击下一页再去后台查询，也就是你点下一页并不会去查询后台） 系统管理下有四个孩子，分页后，每页3条，第二页只有剩下的，没有树形效果了，因为第二页没有系统管理这一...
Layui树形表格(treeTable)数据格式示例
03-19 712
Layui中treeTable的数据格式示例
layui treetable
11-26
采用了layui treetable框架，实现树形目录。内容有页面、后台和js。
jquery插件--表格树--GridTree(后台分页版本20091018)(过期)
10-20
1.添加了表格树的后台分页代码 2.提供了两种表格树的样式选择 3.添加了全选按钮
Layui树形表格treetable
12-13
实现layui的树形表格treeTable,在layui数据表格之上进行扩展实现,详细使用方法请参考压缩包中的README.md文件和实例.
基于jqgrid实现树形菜单分页列表查询
01-14
基于jqgrid实现类似父子级树形菜单分页列表查询，让table页的行元素可以实现像ztree那样的上下级关系
EXT树表分页(SERVLET)
09-26
EXT 3.0 + SERVLET 开发的EXT树表分页功能. 包里包括了工程相关的所有东西(包括引用的EXT) 下载后部署就可用.
Layui的树形表格treeTable
06-20
在Layui中，树形表格（treeTable）是一种非常实用的功能，它将传统的表格与树状结构相结合，适用于展示具有层级关系的数据，如部门结构、文件目录等。下面我们将深入探讨Layui的treeTable，以及如何实现无限层级的树...
layui树形表格treetable.js
04-29
layui树形表格treetable.js插件，基于layui第三方开发的一款树形表格插件，很实用。
layui树形表格treetable.css
04-29
layui树形表格treetable.css插件，基于layui第三方开发的一款树形表格插件，很实用。
layui下载treetable.js
11-03
Layui是一款轻量级前端框架，用于快速开发网页界面。而Treetable.js是Layui中的一款插件，用于在表格中展示树状结构的数据。 要下载并使用Treetable.js，首先需要访问Layui官网（https://www.layui.com/）。在官网的首页或者插件市场中，都可以找到Treetable.js的下载链接。 点击下载链接后，会跳转到官方的GitHub仓库页面。在这个页面中，可以找到Treetable.js的源代码和文档。 有两种方式可以下载Treetable.js，一种是直接点击页面右上方的绿色按钮“Code”，然后选择“Download ZIP”将整个插件的源代码打包下载到本地。另一种方式是通过Git工具，克隆整个仓库到本地。 下载完成后，解压缩ZIP文件或者打开克隆的本地仓库目录，可以找到Treetable.js的核心文件和示例代码。 将核心文件中的treetable.js和treetable.css两个文件拷贝到项目中的对应目录，如Layui项目的layui/lay/modules/treetable目录下。 接下来，在HTML文件中引入Treetable.js的核心文件，方式可以是将其直接写入HTML的script和link标签中，也可以使用模块化的方式进行引入。 最后，在HTML文件中的JavaScript代码中，使用layui.use方法加载Treetable模块，然后通过Treetable.render方法来渲染表格，并传入对应的配置参数。 至此，Treetable.js插件的下载以及使用就完成了。可以根据具体需求自定义配置参数，来展示树状结构的数据。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值