jquery插件treetable 动态加载问题

本文介绍了在使用jQuery插件treetable时遇到的动态加载数据导致树形样式丢失的问题及解决方案。通过正确使用treetable的方法如`loadBranch`和`expandNode`,实现了在数据更新后保持树形表格的正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用jquery插件treetable 增加后刷新table时,树形样式丢失

在增加或修改后,动态加载html,开始就直接使用 $("#treeTable tbody").empty().append(data); 这个用法是错误的,

后来换成

 

//成功后刷新表格	
$("#treeTable tbody").empty();
var html = data.htmlTable; 
var node;  
$("#treeTable").treetable("loadBranch", node, html); 

就完成了,动态加载后保持树形table动作。
           

 

 

 

 

 

Public API

Plugin Function

treetable()

treetable() 方法可以传入下面的参数:

options(optional) : 一个描述配置的JS对象。

force(optional):参数为true时强制重新初始化树。

Additional Functions

对树操作的一些方法,附加方法必须通过treetable()方法调用。Eg:折叠id=42的节点, $("#tree").treetable("collapseNode", "42").

collapseAll():折叠所有节点

collapseNode(id):Collapse a single node, identified by id.

expandAll():Expand all nodes at once.

expandNode(id):Expand a single node, identified by id.

loadBranch(node, rows):向树中插入新行(<tr>s), 传入参数 node 为父节点,rows为待插入的行. 如果父节点node为null ,新行被作为父节点插入

move(nodeId, destinationId):Move node nodeId to new parent with destinationId.

node(id):Select a node from the tree. Returns a TreeTable.Node object.

removeNode(id):从树中移除某个节点及其所有子节点

reveal(id):展示树中的某个节点

sortBranch(node)

sortBranch(node, columnOrFunction):根据字母顺序对node 节点的所有子节点排序。Defaults to sorting on the values in the configured tree column (see settings). Pass an optional column number or sorting function as the second argument columnOrFunction. See the tests for examples of custom sorting functions. Does not recursively sort children of children.

unloadBranch(node):Remove nodes/rows (HTML <tr>s) from the tree, with parent node. Note that the parent (node) will not be removed.

 

Classes

HTML tr class:

expanded:标识节点被展开

collapsed:标识节点被折叠

branch:分支节点,有子节点或者拥有 branchAttr 属性

leaf:叶子节点,无子节点

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值