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

jsTree插件简介(四)相关推荐

jsTree插件简介(三)
UI-plugin JSTree的UI插件:用来处理选择.不选和鼠标悬浮树选项的插件. 一.属性包括: 1.select_limit:指定一次可以选中几个节点,默认为-1,表示无限制选中. 2.sel ...
jsTree插件简介(一)
在用jsTree时可以使用几种插件来支持我们的行为,下面我简要的介绍下各个插件的使用. 1:html_data plugin. html_data即我们要渲染的数据是用html格式来完成tree的展示 ...
【Android Protobuf 序列化】Protobuf 使用 ( protobuf-gradle-plugin 插件简介 | Android Studio 中配置插件 | AS 中编译源文件 )
文章目录一.protobuf-gradle-plugin 插件简介二.Android Studio 中配置 protobuf-gradle-plugin 插件三.Android Studio 中 ...
【Flutter】开发 Flutter 包和插件 ( Flutter 包和插件简介 | 创建 Flutter 插件 | 创建 Dart 包 )
文章目录一.Flutter 包和插件简介二.创建 Flutter 插件 1.Android Studio 中可视化创建 2.命令行创建三.创建 Dart 包 1.Android Studio 中 ...
jmeter性能测试常用插件简介
jmeter性能测试常用插件简介 jmeter作为一个开源的接口性能测试工具,相对于商业性软件loadrunner来说,优点是更加灵活方便,操作简单.但相对来说,专业性和对性能参数的分析相对比较薄弱. ...
哈工程计算机学院研究生导师,哈尔滨工程大学自动化研究生导师简介四.doc
哈尔滨工程大学自动化研究生导师简介四 ? 莫宏伟男,1973年5月生,工学博士,教授,博士生导师模式识别与智能系统研究所副所长指导博士生学科:模式识别与智能系统指导硕士生学科:第一专业:模式识 ...
obs 直播多路推流插件简介
目录 obs官网简介 obs下载地址多路推流插件下载地址多路推流插件 windows版安装使用多路推流插件 mac版安装使用 (未测试) 注意最新版 OBS-Studio-27.0-Fu ...
jquery jstree 插件的使用
最近一个项目需要用到jstree 这个jQuery插件,就研究了下,做目录树菜单还是很强大的,下面对经常会用到几个用法做下说明. 1. 首先页面引用 jquery.jstree 2. html ...
Unity NGUI 插件简介
文章目录 Unity NGUI 一. NGUI基础 1.1 导入NGUI插件 1.2 基本UI资源 1.3 制作UI图集 1.4 制作UI字体 1.5 UIRoot.UIPanel 和 UICamer ...

jsTree插件简介(四)

jsTree插件简介(四)相关推荐

最新文章

热门文章