使用TableTree4J实现javascript 表格树(树型表格、菜单)

最新推荐文章于 2025-05-22 21:58:50 发布
原创 最新推荐文章于 2025-05-22 21:58:50 发布 · 5.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #浏览器 #文档 #api #百度 #语言

TableTree4J是一款开源的JavaScript组件，能够轻松实现树状折叠效果的表格及菜单。它支持多种模式切换、cookies保存状态等功能，并且提供丰富的API文档和示例。

TableTree4J

TableTree4J 是一个开源的基于javascript的树状菜单和表格控件

使用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单

目前TableTree4J版本为1.1Re版，支持以下功能

1.多种模式切换，样式更改

2.cookies保存树状状态

3.节点自定义排序

4.全浏览器支持

5.支持所有树状控件的基本功能

6.丰富的API文档和多种展示例子，中英文语言选择

百度百科：http://baike.baidu.com/view/1624921.htm

截图：

http://imgsrc.baidu.com/baike/pic/item/4e0b3ea4520a1be29052ee1b.jpg

http://imgsrc.baidu.com/baike/pic/item/58af236d5bd0a0ee431694e5.jpg

官方下载：https://sourceforge.net/project/showfiles.php?group_id=227906

开源主页：https://sourceforge.net/projects/tabletree4j/

开发者 ：lanner.Ke

工作室 ：xcode-studio

交流建议：lannerK@qq.com  

 

lannerK
关注
Vue中使用antd-table组件时，树形表格展开配置不生效-defaultExpandedRowKeys-默认展开配置不生效
JackieDYH的博客
03-31 632
defaultExpandAllRows这个属性仅仅是用来设置默认值的，只在第一次渲染的时候起作用，后续再去改变，无法实现响应式。
＜ 在element-ui中： 使用el-tree + el-table组件，联动请求用户数据表格组件 （基础版，后续可能更新） ＞
一个平平无奇的技术宅
12-13 3843
在 Vue + elementUi 开发中，实现通过树状组织机构，点击查询用户信息联动效果！ 组件较为简单，可以直接嵌入到需要使用的位置，具体操作还得看各位大佬如何使用！ 纯记录！话不多说，先上效果图！ 白嫖万岁！当然，如果有帮助，希望不要吝啬你的点赞呀！ 通过组合element-ui 中的 tree 和 table组件，实现联动效果，单选（有需要可以自己改成多选）用户信息，传出到父组件中，通过触发方法接收。
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本支持分级展开、收缩。
树形表格js
05-17
树形表格，支持折叠展开，行点击获取当前行，父节点，子节点，级联勾选 使用文档https://blog.youkuaiyun.com/u012796085/article/details/80357317
js简单树型表格控件
02-15
自己写的树型表格，用在项目中感觉还可以，里面是简单的demo，因项目中需要复杂，就将早期版本上传，需要的同学可以在代码的基础上进行一些修改，即可使用
Js 之treeTable树状表格
样子的博客
12-22 1567
一、下载 /** 树形表格3.x Created by wangfan on 2020-05-12 https://gitee.com/whvse/treetable-lay */ layui.define(['laytpl', 'form', 'util'], function (exports) { var $ = layui.jquery; var laytpl = ...
TableTree4J Vesion 2 发布 动态实现javascript 表格树(树型表格、菜单)
lannerK的专栏
06-13 1857
tabletree4j version2 发布
利用vue实现树表格分页
qq_64001795的博客
10-12 1435
t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。在Main组件中指定的是用于显示各功能组件的。先不考虑分页，从后台接口获取数据并绑定到表格显示。菜单图标可以到官网去查找。图二： script部分。script部分，图一。
vue3:十四、角色权限管理-表格引入-树形表格
最新发布
weixin_46001736的博客
05-22 1932
vue3:十四、角色权限管理-表格引入-树形表格
JQ树形菜单加表格混合使用:treeTable组件使用
是日已过，命亦随减的博客
07-02 1052
前端: <div class="demo-side" style="margin-top: 50px"> <table id="demoTreeTb"></table> </div> js: <!-- 表格操作列 --> <script type="text/html" id="tbBar"> <a class="layui-btn layui-btn-primary layui-btn-xs"
TableTree 表格树
09-10
实现在表格中显示树形结构，支持动态添加，删除。 花了10个小时终于写出来了。 贴出来分享一下。 包含封装后的成品和封装前源代码。
tabletree4J 树形菜单，无限级，有demo
12-12
针对父类子类 tabletree4J 很容易生成树形菜单，无限级，有demo 内有demo,及帮助文档api
bootstrap树形表格js插件
04-08
创建bootsstrap的树形表格，用于显示权限页面的树形结构
table实现的树状菜单
07-10
table实现的树状菜单，可用于系统的左边导航菜单，代码简单实用。
Tabletree4j Version 2
06-13
2010-6-13日正式发布,时隔两年,众多网友要求我升级 tabletree4j,终于有少少空余时间完成了beta版本发布 　　对比之前的版本本次更新包括以下内容: 　　1.完整的包命名空间 　　2.自定义header footer 　　3.动态添加节点/动态删除节点/动态移动节点 　　4.动态dom对象创建表格树 　　5.完美支持json格式数据,支持xml(需转换) 　　6.支持ajax加载节点 　　7.事件驱动 　　8.可以动态根据列内容排序 　　9.简化函数参数,利用{} object输入参数,风格类似Extjs 　　10.树状结构可以选择出现在某一列,不一定要在第一列 　　11.支持theme,纯css定制表格树,可以自由定制theme,包括图标/节点大小等 　　12.表格树从右到左显示 　　13.本地节点搜索,服务器端节点搜索(未实现待完成) 　　14.无变化重新刷新整个树Refresh 　　15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现 最新版本下载主页: http://sourceforge.net/projects/tabletree4j/files/ 百度百科地址 http://baike.baidu.com/history/id=12683850
TreeTable树形菜单
weixin_43857854的博客
12-13 1824
html js var table= { id: “treeTable”, table: null, layerIndex: -1 }; /** 初始化表格的列 */ tableTer.initColumn = function () { var columns = [ {field: ‘selectItem’, radio: true}, {tit...
JS递归拼装树形结构的表格
水神
03-18 8998
数据格式： [{"id":2, "pid":1, "children":[{...},{...}]},{"id":3, "pid":1, "children":[{...},{...}]},.......]注意： 下面的样例数据没有children属性，children属性是在程序代码生成的，下面的样例数据只是简单的从数据库查，未做任何处理，如果实际中数据库查出来的就是树形结构的数据，js
树表格的实现
weixin_33701617的博客
08-16 428
有时候我们会遇到表格树的展示，类似于下图的需求： 其中组件的封装主要在table-tree文件夹内： main.vue的内容如下： 1 <template> 2 <el-table :data="formatData" 3 :stripe="option.stripe" 4 :r...
Js-DOM树和表格操作
Q_3344的博客
04-07 423
Js-DOM树和表格操作查看节点创建和增加节点删除和替换节点表格相关对象table表格对象:tableRow表格行对象tableCell单元格对象课堂案例1：表格的增删改课堂案例2：订单的增删改 查看节点 访问指定节点的方法： 1.1getElementById( ) 1.2getElementsByName( ) 1.3getElementsByTagName( ) 查看/修改属性节点 2.1getAttribute(“属性名”) 2.2setAttribute(“属性名”,“属性值”) 访问指定节点的
ASP.NET C#实现树型表格技术详解
标题中提到的TableTree很可能是某种特定的自定义控件，或者是某个库提供的树型表格实现。在ASP.NET中，并没有原生的叫做"TableTree"的控件，但通过组合Table控件和树型视图控件，可以构建出类似TableTree的视觉效果...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值