简介
在前端开发中,常常需要使用到树形结构,而 zTree 是一款常用的 jQuery 树插件。在使用 zTree 的过程中,我们可能需要保存某些节点的展开状态,以便在页面刷新后能够恢复其展开状态。本文将介绍如何基于 cookie 实现 zTree 树刷新后展开状态不变的功能。
实现过程
步骤一:获取选中节点ID和展开状态
首先,我们需要在每次节点选中或展开/收起时获取选中节点 ID 和当前所有节点的展开状态。这里我们可以通过 zTree 提供的回调函数 onCheck
和 onExpand
来实现。
--- ------- - ----------------------------------- --- ----- - ------------------------------ -- ------ --- ------ - --- -- --------- -------- ------------ - -- ------- ------ - - -- ------- ---- -------- -------------- ------- --------- - --- ----- - ------------------------------ -- -------- - -- -------- ---- -------- --------------- ------- --------- - -------------------- - ----- -- ---------- ------------- -- ------ -
步骤二:存储展开状态
在获取到所有节点的展开状态后,我们需要将其存储到 cookie 中。这里可以使用 jQuery.cookie 插件来实现。
-- ------ -------- ------------ - ---------------------- ----------------------- - -------- - --- -- ------ -
步骤三:读取展开状态
在页面刷新后,我们需要从 cookie 中读取之前保存的展开状态,并将树形结构展开到相应的状态。
-- ------ -------- ------------ - --- --------- - ----------------------- -- ----------- - --- --------- - ---------------------- --- ---- -- -- ---------- - --- ---- - ------------------------- -- ------ - ------------------------ ----- ------ ------ -- ---- - - - -
完整代码示例
--------- ----- ------ ------ ----- --------------- -- ------------ ------------------ ---- -- ----- -- --- ----- ---------------- ---------------------------------- --------------- -- ------- ------ --------- --------------- ---- ------------- -------------------- ---- -- ------ - ----- --- ------------- -- --- ------- ---------------------------------------------------------------------------- ------- ----------------------------------------------------- ------- ------------------------------------------------------------------------------------------ ------- ----------------------- -- ----- -- --- ------ - - - --- -- ---- -- ----- ------- ----- ---- -- - --- --- ---- -- ----- ------ -- - --- --- ---- -- ----- ------ -- - --- --- ---- -- ----- ------ -- - --- -- ---- -- ----- ------- ----- ---- -- - --- --- ---- -- ----- ------ -- - --- --- ---- - ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------