jstree 初始化自動展開一級節點：state.opened 配置詳解

需求

jstree 默認收縮，需載入後自動展開根節點（一級菜單），無需用戶點擊。

解決方案

在數據源數組中為根節點對象添加 "state": { "opened": true } 屬性。

數據結構示例

[
  {
    "id": "1",
    "text": "根節點",
    "state": { "opened": true },  // 關鍵配置
    "children": [
      { "id": "1_1", "text": "子節點1" },
      { "id": "1_2", "text": "子節點2" }
    ]
  }
]

初始化代碼

$('#deviceList').jstree({
  "core": {
    "data": function(node, cb) {
      if (node.id === "#") {
        $.post(basePath + "project_my/device_tree.action", function(data) {
          if (!checkLoginState(data)) return;
          var json = eval("(" + data + ")").value;
          // 確保根節點帶 opened: true
          cb(json);
        });
      } else {
        cb([]); // 無懶加載時返回空
      }
    }
  },
  "plugins": ["checkbox"]
});

補充：動態展開/折疊 API

// 展開全部
$('#deviceList').jstree('open_all');
// 折疊全部
$('#deviceList').jstree('close_all');
// 展開指定節點
$('#deviceList').jstree('open_node', '#node_id');

核心在於**數據源層面聲明初始狀態**，而非初始化後再操作 DOM，符合 jstree 設計哲學。