jsTree插件简介(四)

发布时间:2016-12-10 13:13:35 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jsTree插件简介(四)",主要涉及到jsTree插件简介(四)方面的内容,对于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 plaincopy <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/xiaolinye3319/6241519 之crrm-plugin.html 原文参照:http://www.jstree.com/documentation/crrm

上一篇:win32第一个程序编译以及解释 ---第二章
下一篇:存储基本概念总结

相关文章

相关评论