jsTree插件简介(四)

CRRM plugin 1

本节以例子为基础，讲解jsTree的crrm插件之create功能，如有不当，敬请拍砖！！

crrm plugin提供创建、删除、重命名、移动节点功能。

1、创建节点。

首先看一下创建节点的函数.create(node, position, js, callback, skip_rename)：事件驱动函数，创建节点，参数列表如下。

node：混合类型，可以为Dom node，jQuery node，或者指向元素在树中的节点，如果使用了ui-plugin使用null参数作为当前选中的节点。

position：新创建节点的位置，指定在儿子节点中的位置(以0开始--见例子中create_4)，也可以使用"before", "after", "inside", "first", "last"。

js:对象类型，新创建节点的值，包含三个部分：

attr：对象属性(同jQuery.attr()用法)，可以忽略这个选项。

state：字符串，或者open, close。如果是叶子节点则忽略这个选项。

data：字符串或者对象类型。如果是字符串则作为节点的title。如果传递对象需要两个选项，attr和title。

callback：回调函数，可以当节点被创建之后执行，你最好关闭等待的这个事件。

skip_rename：跳过用户输入阶段，节点使用前面提供的数据。

代码如下：

[html]  view plain copy

1. <h3>Creating nodes</h3>  
2. <input type="button" class="button" value="create_1" id="create_1" style="float:left;" />  
3. <input type="button" class="button" value="create_2" id="create_2" style="float:left;" />  
4. <input type="button" class="button" value="create_3" id="create_3" style="float:left;" />  
5. <input type="button" class="button" value="create_4" id="create_4" style="float:left;" />  
6. <input type="button" class="button" value="create_5" id="create_5" style="float:left;" />  
7. <input type="button" class="button" value="create_6" id="create_6" style="float:left;" />  
8. <input type="button" class="button" value="create_7" id="create_7" style="" />  
9.   
10. <div id="demo1" class="demo">  
11.     <ul>  
12.         <li id="phtml_1">  
13.             <a href="#">Root node 1</a>  
14.             <ul>  
15.                 <li id="phtml_2">  
16.                     <a href="#">Child node 1</a>  
17.                 </li>  
18.                 <li id="phtml_3">  
19.                     <a href="#">Child node 2</a>  
20.                 </li>  
21.             </ul>  
22.         </li>  
23.         <li id="phtml_4">  
24.             <a href="#">Root node 2</a>  
25.         </li>  
26.     </ul>  
27. </div>  
28. <script type="text/javascript" class="source">  
29. $(function () {  
30.     $("#create_1").click(function () {   
31.         $("#demo1").jstree("create");   
32.     });  
33.     $("#create_2").click(function () {   
34.         $("#demo1").jstree("create","#phtml_1","first","Enter a new name");   
35.     });  
36.     $("#create_3").click(function () {   
37.         $("#demo1").jstree("create",-1,false,"No rename",false,true);   
38.     });  
39.     $("#create_4").click(function () {   
40.         $("#demo1").jstree("create",null,1);   
41.     });  
42.     $("#create_5").click(function () {   
43.         $("#demo1").jstree("create",null,0, {data:{attr: {id : "test"}, title:"Test"}});   
44.     });  
45.     $("#create_6").click(function () {   
46.         $("#demo1").jstree("create",null, 0, 'Test', create_node());   
47.     });  
48.       
49.     $("#create_7").click(function () {   
50.         $("#demo1").jstree("create",null, 0, 'Test', false, true);   
51.     });  
52.       
53.     $("#demo1").jstree({   
54.         "ui" : {  
55.             "initially_select" : [ "phtml_2" ]  
56.         },  
57.         "crrm" : {  
58.             "input_width_limit" : 50  
59.               
60.         },  
61.         "core" : { "initially_open" : [ "phtml_1" ] },  
62.         "plugins" : [ "themes", "html_data", "ui", "crrm" ]  
63.           
64.     });  
65. });  
66.   
67. function create_node(){  
68.     alert("Test");  
69. }  
70. </script>  

demo截图如下

例子中有7个button，展示了create函数各个参数的作用

create_1：默认参数创建节点，节点值始终为New Node，并且总是在儿子节点的第一个。

create_2：在id为phtml_1处作为基准节点来创建节点，并且使用参数first，即新创建的节点始终位于儿子节点的第一个。若为last则是最后一个儿子节点；before：则为当前节点的上一个节点；after：则为当前节点的下一个节点；inside：始终为当前节点第一个儿子节点；

create_3：用-1做参数，始终创建的是根节点同级的第一个节点；

create_4：使用了position=1的值来添加子节点，即添加到儿子节点的第2个位置，若为2则为第三个子节点，依次类推。

create_5：使用对象最为js的参数值；

create_6：调用回调函数create_node()；打印Test；

create_7：使用skip_rename=true作为参数，默认使用前面js参数提供的值，若没有提供，则默认使用"New Node"，并且不可编辑。

代码详见 :http://download.csdn.net/detail/xiaolinye3319/6241519

之crrm-plugin.html

原文参照：http://www.jstree.com/documentation/crrm