JQuery樹插件JSTree的使用

JSTREE簡介：

JSTREE是一款基於JQUERY的樹形插件，其功能相當強大，尤其是其右鍵菜單，很輕鬆地就能實現節點的增加節點、重命名節電、刪除節點、複製節點、剪切節點等操作。

 

使用JSTREE:

1.      首先，要去JSTREE下載插件包: http://www.jstree.com/ 最新版本。

插件包包含四個文件夾，一個JSTREE主文件JS

_demo                          相關案例，存放了用JSTREE做的幾個例子

_docs                            JSTREE說明文檔，裏面有相關使用說明及API

_lib                                JSTREE插件JS庫

Themes                        JSTREE主題包

jquery.jstree.js           JSTREE主JS庫

 

 

我們要用到的是 _lib、Themes、jquery.jstree.js 把這三個文件夾拷到我們工程的JS目錄下（只是示例，拷貝到隨意地方，只要引用正確即可）

 

2.      接下來就可以使用JSTREE了

<!-- JQUERY 主要JS庫-->

<script type="text/javascript" src="js/_lib/jquery.js"></script>

<!-- JSTREE 主要JS庫-->

<script type="text/javascript" src="js/_lib/jquery.cookie.js"></script>

<script type="text/javascript" src="js/_lib/jquery.hotkeys.js"></script>

<script type="text/javascript" src="js/_jquery.jstree.js"></script>

 

 

 

插件選擇：
"plugins" : [ "themes", "json_data","ui", "crrm", "cookies", "dnd","search", "types", "hotkeys","contextmenu" ]

每個元素代表一類插件，比如說要顯示右鍵菜單，那麼把“contextmenu”加入插件集合即可，反之刪除此項，右鍵菜單將不再顯示。

 

 

 

 

數據來源：JSTREE提供了三種數據

1、HTML:預定的HTML列表格式

2、JSON:JOSN格式文件或字符串

3、XML:來源於XML文件

這裏我們使用JSON作爲數據承載方式,JSON格式如下：

//此段JSON
	{
		data:[{
				  attr:{id:"1"},
				  data:"省市列表",
			  	  children:[
						{
							attr:{id:"01"},
							data:"廣東省珠海市" ,
							children:[
								   {
									   attr:{id:"001"},
									   data:"香洲區",
									   children:[
{attr:{id:"0001"},data:"夏美" },
{attr:{id:"0002"},data:"光明街"}
											  ] 
								   }] },
						{
							attr:{id:"02"},
							data:"廣東省東莞市"
							}]
				  }]
		}

綁定事件：
JSTREE提供右鍵操作的事件綁定，創建節點（create.jstree） ，移除節點（remove.jstree），重命名節點（rename.jstree），拖拽剪切粘貼（move_node.jstree）

//右鍵創建事件
	.bind("create.jstree", function (e, data) 
	{		
		//數據以POST方式發送
		$.post("ajaxTree.action", 
				{ 
					//需要傳遞的參數
					"ac" : "create_node", 
					"parentid" : data.rslt.parent.attr("id").replace("node_",""), 
					"nodename" : data.rslt.name
				}, 
				function(r) 
				{
					//操作結果回調
					if(r.message=="success") 
					{
						$(data.rslt.obj).attr("id", "node_" + r.id);
					}
					//失敗
					else 
					{
						$.jstree.rollback(data.rlbk);
					}
				}
			);
		})
//連續綁定多個事件
.bind("remove.jstree", function (e, data) 
{
})
.bind("rename.jstree", function (e, data) 
{		
}
……