如何让JSTree.js中LI元素的属性保留更新后的值？

这个问题我之前也碰到过——直接用jQuery修改DOM元素的data-cmsid属性，浏览器代码视图看着改了，但jstree根本不认，因为jstree会把节点的所有状态（包括自定义属性）存在自己的内部数据结构里，DOM只是它的渲染层，直接改DOM不会同步到内部数据，下次树刷新或者操作（比如拖拽）的时候，又会变回原来的值。

下面是具体的解决步骤，结合你的拖拽场景一起说明：

1. 用jstree API修改节点属性，而非直接操作DOM #

别再用$('li#some-node').attr('data-cmsid', newVal)这种方式了，改用jstree提供的方法修改内部数据，再同步到DOM：

// 1. 获取目标节点的jstree对象（支持通过节点ID、DOM元素或选择器获取）
const node = $('#your-tree').jstree(true).get_node('target-node-id');

// 2. 修改节点的自定义属性（jstree会把自定义data属性存在node.data字段中）
node.data.cmsid = '新的CMSID值';

// 3. 让jstree刷新该节点，同步内部数据到DOM
// refresh_node会重新加载节点数据并渲染
$('#your-tree').jstree(true).refresh_node(node);
// 也可以用redraw_node，它仅重新渲染节点，适合属性变更的轻量场景
// $('#your-tree').jstree(true).redraw_node(node, false);

如果是通过DOM元素定位节点，也可以这样写：

const $targetLi = $('li.some-target-selector');
const node = $('#your-tree').jstree(true).get_node($targetLi);
// 后续修改步骤同上

2. 拖拽场景下的属性同步 #

因为你还在用拖拽功能，拖拽完成后节点位置变化，需要确保属性正确保留或更新。可以监听jstree的move_node事件，在拖拽结束后处理属性：

$('#your-tree').on('move_node.jstree', function(e, data) {
  // data.node就是被拖拽的节点对象
  // 拖拽后如果需要更新它的data-cmsid，直接修改node.data即可
  data.node.data.cmsid = '拖拽后的新属性值';
  // 同步到DOM
  $(this).jstree(true).refresh_node(data.node);
  
  // 如果需要同步其他关联节点的属性，也可以在这个事件里处理
});

3. 验证修改是否生效 #

修改后可以通过以下方式确认内部数据是否更新：

const node = $('#your-tree').jstree(true).get_node('target-node-id');
console.log(node.data.cmsid); // 应该输出你设置的新值

这样操作后，不管是树刷新还是拖拽操作，jstree都会使用你更新后的属性值，不会再回到原来的状态了。

内容的提问来源于stack exchange，提问作者SWethy2018nw