jstree的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年12月01日 10:45:21 作者：十年樹木_2015

最近使用到了jstree，感覺是一款靈活的、可多項(xiàng)定制的tree插件。下面通過(guò)本文給大家詳細(xì)介紹下jstree的簡(jiǎn)單實(shí)例,需要的朋友可以參考下

最近使用到了jstree，感覺是一款靈活的、可多項(xiàng)定制的tree插件；

我這邊使用過(guò)程記錄下；

參考的jstree api網(wǎng)站，以及demo介紹：

https://www.jstree.com/api/#/
jstree api github:
https://github.com/vakata/jstree#populating-the-tree-using-a-callback-function

使用中的例子介紹：

html代碼：

<!-- 搜索框 --> 
 <div class="search_input"> 
 <input type="text" id="search_ay" /> 
 <img src="/sfytj/dist/images/icon/ss_search.png" /> 
 </div> 
<!-- 案由列表 --> 
<div class="reason_list"> 
 <div id="treeview1" class="treeview"> 
 </div> 
 </div>

js代碼：

1）生成jstree：

$("#treeview1").jstree({ 
  'core' : { 
  "multiple" : false, 
  'data' : ay_mssys, 
  'dblclick_toggle': false  //禁用tree的雙擊展開 
  }, 
  "plugins" : ["search"] 
}); 
var ay_mssys = 
 [ 
 { 
  "id": "1", 
  "text": "民事案由(2008版)", 
  "state": { 
   "opened": true,  //展示第一個(gè)層級(jí)下面的node 
   "disabled": true  //該根節(jié)點(diǎn)不可點(diǎn)擊 
   }, 
  "children": 
   [ 
    { 
    "id": "2", 
    "text": "人格權(quán)糾紛", 
    "children": 
     [ 
      { 
      "id": "3", 
      "text": "人格權(quán)糾紛", 
      "children": [ 
       { 
       "id": "4", 
       "text": "生命權(quán)、健康權(quán)、身體權(quán)糾紛", 
       "children": 
         [ 
         { 
          "id": "5", 
          "text": "道路交通事故人身?yè)p害賠償糾紛" 
          } 
         ] 
       } 
       ] 
      } 
     ] 
    } 
   ] 
  } 
 ] 
 
//core：整個(gè)jstree顯示的核心，里面包括多種項(xiàng)配置： 
//data： 這里是使用json格式的數(shù)據(jù)；還可以使用html或者ajax請(qǐng)求等 
//plugins： 這個(gè)jstree引用了哪些插件 
//multiple : false 不可多選

2）點(diǎn)擊jstree的每個(gè)子項(xiàng)，獲取該節(jié)點(diǎn)的text、id等信息：

//tree change時(shí)事件 
$('#treeview1').on("changed.jstree", function (e, data) { 
 console.log("The selected nodes are:"); 
 console.log(data.node.id);  //選擇的node id 
 console.log(data.node.text);  //選擇的node text 
 form_data.ay = data.node.text; 
 form_data.ay_id = data.node.id; 
}); 
//changed.jstree,jstree改變時(shí)發(fā)生的事件，類似的還有select_node.jstree等，api中有。

3）點(diǎn)擊jstree子項(xiàng)，控制該節(jié)點(diǎn)展開、收縮等：

//jstree單擊事件 
$("#treeview1").bind("select_node.jstree", function (e, data) { 
 if(data.node.id !=1 ){    //排除第一個(gè)節(jié)點(diǎn)(2011民事案由) 
 data.instance.toggle_node(data.node); //單擊展開下面的節(jié)點(diǎn) 
 } 
});

4）使用插件search搜索（jstree自帶的插件）：

//輸入框輸入定時(shí)自動(dòng)搜索 
var to = false; 
$('#search_ay').keyup(function () { 
 if(to) { 
 clearTimeout(to); 
 } 
 
 to = setTimeout(function () { 
 $('#treeview1').jstree(true).search($('#search_ay').val()); 
 
 }, 250); 
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: