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：跳过用户输入阶段，节点使用前面提供的数据。

代码如下：

<h3>Creating nodes</h3>
<input type="button" class="button" value="create_1" id="create_1" style="float:left;" />
<input type="button" class="button" value="create_2" id="create_2" style="float:left;" />
<input type="button" class="button" value="create_3" id="create_3" style="float:left;" />
<input type="button" class="button" value="create_4" id="create_4" style="float:left;" />
<input type="button" class="button" value="create_5" id="create_5" style="float:left;" />
<input type="button" class="button" value="create_6" id="create_6" style="float:left;" />
<input type="button" class="button" value="create_7" id="create_7" style="" />

<div id="demo1" class="demo">
	<ul>
		<li id="phtml_1">
			<a href="#">Root node 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#">Child node 1</a>
				</li>
				<li id="phtml_3">
					<a href="#">Child node 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#">Root node 2</a>
		</li>
	</ul>
</div>
<script type="text/javascript" class="source">
$(function () {
	$("#create_1").click(function () { 
		$("#demo1").jstree("create"); 
	});
	$("#create_2").click(function () { 
		$("#demo1").jstree("create","#phtml_1","first","Enter a new name"); 
	});
	$("#create_3").click(function () { 
		$("#demo1").jstree("create",-1,false,"No rename",false,true); 
	});
	$("#create_4").click(function () { 
		$("#demo1").jstree("create",null,1); 
	});
	$("#create_5").click(function () { 
		$("#demo1").jstree("create",null,0, {data:{attr: {id : "test"}, title:"Test"}}); 
	});
	$("#create_6").click(function () { 
		$("#demo1").jstree("create",null, 0, 'Test', create_node()); 
	});
	
	$("#create_7").click(function () { 
		$("#demo1").jstree("create",null, 0, 'Test', false, true); 
	});
	
	$("#demo1").jstree({ 
		"ui" : {
			"initially_select" : [ "phtml_2" ]
		},
		"crrm" : {
			"input_width_limit" : 50
			
		},
		"core" : { "initially_open" : [ "phtml_1" ] },
		"plugins" : [ "themes", "html_data", "ui", "crrm" ]
		
	});
});

function create_node(){
	alert("Test");
}
</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/yizhizouxiaqu/4281441

之crrm-plugin.html

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