澳门新萄京8522jsTree事件和相互以及插件plugins详解

$(function () { 
 $("#plugins6").jstree({ 
 "state" : { "key" : "demo2" }, 
 "plugins" : [ "state" ] 
 }); 
}); 

jsTree事件和交互以及插件plugins详解，jstreeplugins

正文为大家享用了jsTree事件和互相以及插件plugins，供大家参谋，具体内容如下

1、事件

jsTree在容器中触发变量事件，你能够浏览全部事件，然后了然哪些进展监听：

透过data参数获取越来越多详细音讯关于事件检查。

越多境况下便是你会获得全体节点指标，若是您通过ID获取那么些节点，查看节点使用.get_node().

$('#jstree') 
 // listen for event 
 .on('changed.jstree', function (e, data) { 
 var i, j, r = []; 
 for(i = 0, j = data.selected.length; i < j; i++) { 
 r.push(data.instance.get_node(data.selected[i]).text); 
 } 
 $('#event_result').html('Selected: ' + r.join(', ')); 
 }) 
 // create the instance 
 .jstree(); 

2.交互

为了在贰个实例中调用3个办法，你要求求获取实例引用然后调用方法，那个例子呈现如何赢得二个引用然后调取二个艺术。

能够查看API获取更加的多的诀要：

// 3 ways of doing the same thing 
$('#jstree').jstree(true) 
 .select_node('mn1'); 
$('#jstree') 
 .jstree('select_node', 'mn2'); 
$.jstree.reference('#jstree') 
 .select_node('mn3'); 

3、插件

jsTree有个别功力被移除核心，只有你需求的时候才使用它，为了保证使用插件，须求利用plugins参数配置选项，将插件名称增添到3个数组中。

举个例证确定保证全体插件都能够使用：（只要设置你必要利用的插件）

"plugins" : [ 
 "checkbox", 
 "contextmenu", 
 "dnd", 
 "massload", 
 "search", 
 "sort", 
 "state", 
 "types", 
 "unique", 
 "wholerow", 
 "changed", 
 "conditionalselect" 
] 

此间有飞跃预览每3个插件

三.一、changed plugin (改造插件)

其1插件增添关于选用改换的额外的新闻，一旦包蕴plugins配置选项，每种changed.jstree事件数量将会包涵三个新的天性名叫changed,它将交给最终关于seleted和deselected节点的风云（changed.jstree）

$(function () { 
 $("#plugins") 
 .on("changed.jstree", function (e, data) { 
 console.log(data.changed.selected); // newly selected 
 console.log(data.changed.deselected); // newly deselected 
 }) 
 .jstree({ 
 "plugins" : [ "changed" ] 
 }); 
}); 

3.2.checked plugin(复选框)

其一插件将会在每种节点后面渲染复选框的Logo，使得多选变得尤其便于。

它也帮忙三态，意味着贰个节点有个别子节点是选中，这些节点将会被渲染成未规定，那么些意况可以流传。你能够经过级联配置选项来微调级联选项。

记住级联会复选框会检查有着节点，固然是不可用的节点。

不鲜明状态是一个机关测算的，可是只要你是选取AJAX加载产生树想要渲染3个节点作为不明确状态通过设置属性“undetermined”:true。

你能够在API找到全部配置复选框的挑三拣四

$(function () { 
 $("#plugins1").jstree({ 
 "checkbox" : { 
 "keep_selected_style" : false 
 }, 
 "plugins" : [ "checkbox" ] 
 }); 
}); 

叁.三 conditionalselect plugin(条件插件)

本条插件重写了activate_node函数（便是用户挑选节点将会调用的函数），你能够通过回调制止这一个函数被调用。

$(function () { 
 $("#plugins10").jstree({ 
 "conditionalselect" : function (node, event) { 
 return false; 
 }, 
 "plugins" : [ "conditionalselect" ] 
 }); 
}); 

三.四(Contextmenu plugin)上下文菜单插件
那插件就是您在一个节点上右键会弹出八个功用列表菜单。
您可以经过API找全数contextmenu插件的配备选项：点击展开链接

$(function () { 
 $("#plugins2").jstree({ 
 "core" : { 
 // so that create works 
 "check_callback" : true 
 }, 
 "plugins" : [ "contextmenu" ] 
 }); 
}); 

三.伍 (drag&drop)拖拽插件

本条插件能够由此拖拽来重新改动树的结构。
你能够透过API找到更加的多的布局选项：点击张开链接

三.六.Massloadplugin(惯性负载插件)
本条插件通过贰遍呼吁（使用的是延迟加载）加载节点
您能够由此API找到越来越多的配备选项：点击展开链接

$(function () { 
 $("#plugins10").jstree({ 
 "core" : { 
 "data" : { .. AJAX config .. } 
 }, 
 "massload" : { 
 "url" : "/some/path", 
 "data" : function (nodes) { 
 return { "ids" : nodes.join(",") }; 
 } 
 } 
 "plugins" : [ "massload", "state" ] 
 }); 
}); 

三.七.(search plugin) 寻找插件
这些插件能够在壹棵树找寻对应的条款。
你能够经过API找到更多的布局选项：点击张开链接

 $("#plugins4").jstree({ 
 "plugins" : [ "search" ] 
 }); 
 var to = false; 
 $('#plugins4_q').keyup(function () { 
 if(to) { clearTimeout(to); } 
 to = setTimeout(function () { 
 var v = $('#plugins4_q').val(); 
 $('#plugins4').jstree(true).search(v); 
 }, 250); 
 }); 
}); 

三.8. sort plugin(排序插件)

本条插件能够另行对于同一级的条规举行排序，暗中同意使用数字或二陆字母的壹壹，你能够经过布署相比较函数：点击张开链接

$(function () { 
 $("#plugins5").jstree({ 
 "plugins" : [ "sort" ] 
 }); 
}); 

3.九.state plugin(状态插件)

本条插件保存全数展开和当选的节点到用户浏览器中，所以当重回同样的树，先前的情事将会被复苏
您能够经过API获取越多意况插件的配备选项：点击打开链接，你能够由此选中1个节点，然后刷新该页面即可看到变化。

$(function () { 
 $("#plugins6").jstree({ 
 "state" : { "key" : "demo2" }, 
 "plugins" : [ "state" ] 
 }); 
}); 

叁.10. types plugin(类型插件)

以此插件为一组节点预先定义类型，那就意味着为各个组很轻易调节在那之中规则和Logo。
为了设置节点类型，你可以应用set_type 或然在data中提供多少个type属性
您能够由此API获取越多关于项目插件的安排选项和函数：点击张开链接

$(function () { 
 $("#plugins7").jstree({ 
 "types" : { 
 "default" : { 
 "icon" : "glyphicon glyphicon-flash" 
 }, 
 "demo" : { 
 "icon" : "glyphicon glyphicon-ok" 
 } 
 }, 
 "plugins" : [ "types" ] 
 }); 
}) 

3.11. unique plugin(唯壹插件)
同一层级的条条框框不可能出现同样的称号。那个插件未有选拔，它只是防止在同壹节点的重命名和运动其余节点时出现同样的称谓。

$(function () { 
 $("#plugins8").jstree({ 
 "core" : { 
 "check_callback" : true 
 }, 
 "plugins" : [ "unique", "dnd" ] 
 }); 
}); 

三.1二 wholerow plugin (整行插件)
以此插件正是三个条条框框占满一行，方便选取，若是是三个比相当的大的树它或然会导致在老的浏览器变慢。

$(function () { 
 $("#plugins9").jstree({ 
 "plugins" : [ "wholerow" ] 
 }); 
}); 

如上正是本文的全体内容，希望对大家的求学抱有支持，也希望我们多多辅助帮客之家。

本文为我们分享了jsTree事件和互动以及插件plugins，供咱们参照他事他说加以考查，具体内容如下
一、事件 js…

直接把测试项目中1段代码copy过来了，那是一棵带复选框的树。页面有地方点击之后触发showPermitTree(id)函数，发送ajax请求给后台，项目选用的是springmvc框架，后台重回JSONArray.toString。

接下去看一下取多少的章程

$(function () { 
 $("#plugins7").jstree({ 
 "types" : { 
 "default" : { 
 "icon" : "glyphicon glyphicon-flash" 
 }, 
 "demo" : { 
 "icon" : "glyphicon glyphicon-ok" 
 } 
 }, 
 "plugins" : [ "types" ] 
 }); 
}) 

假如请求拔尖节点，则此参数的值为00000000-0000-0000-0000-000000000000

本条插件重写了activate_node函数（正是用户挑选节点将会调用的函数），你可以因此回调防止这些函数被调用。

2. jsTree change事件

小心：也足以把此属性放在数据库中，性能上会升高部分，但要求充实额外的代码来保卫安全此字段

下面代码中含change事件。把富有入选的节点的id放到八个数组中。

则该节点的体制为jstree-leaf

3.一、changed plugin (更换插件)

3.jsTree自定义contextmenu

则使节点为关闭状态（样式为jstree-closed）

[javascript] view plain copy
<script> 
 var r = []; // 权限树中被选中的叶子节点 
 var currentGroupId; 
 function showPermitTree(id) { 
 currentGroupId = id; 
 $.ajax({ 
 data : "currentGroupId=" + id, 
 type : "POST", 
 //dataType : 'json', 
 url : "/test/permittree", 
 error : function(data) { 
  alert("出错了！！:" + data); 
 }, 
 success : function(data) { 
  //alert("success:" + data); 
  createPermitTree(data); 
 } 
 }); 
 ${'buttonDiv'}.style.display=""; 
 } 
 function createPermitTree(datastr) { 
 datastr = eval("" + datastr + ""); 
 $('#permitTree').jstree({ 
 'plugins' : [ "wholerow", "checkbox", "types" ], 
 'core' : { 
  "themes" : { 
  "responsive" : false 
  }, 
  'data' : datastr 
 }, 
 "types" : { 
  "default" : { 
  "icon" : "fa fa-folder icon-state-warning icon-lg" 
  }, 
  "file" : { 
  "icon" : "fa fa-file icon-state-warning icon-lg" 
  } 
 } 
 }); 
 } 
 // listen for event 
 $('#permitTree').on('changed.jstree', function(e, data) { 
 r = []; 
 var i, j; 
 for (i = 0, j = data.selected.length; i < j; i++) { 
 var node = data.instance.get_node(data.selected[i]); 
 if (data.instance.is_leaf(node)) { 
  r.push(node.id); 
 } 
 } 
 //alert('Selected: ' + r.join('@@')); 
 }) 
 function saveTree() { 
 $.ajax({ 
 data : {'currentGroupId' : currentGroupId, 
  'selectedNodes' : r.join('@@')}, 
 type : "POST", 
 //dataType : 'json', 
 url : "/test/savetree", 
 error : function(data) { 
  alert("出错了！！:" + data); 
 }, 
 success : function(data) { 
  alert("保存成功!"); 
 } 
 }); 
 } 
 </script> 

protected void Page_Load(object sender, EventArgs e)
{
  if (Request["Action"] == "AJAX")
  {
    var result = GetMenu(Request["pid"]);
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    string sRet = serializer.Serialize(result);
    Response.Write(sRet);
    Response.End();
  }
}

1、事件

[javascript] view plain copy
<script> 
$('#jstree').jstree({ 
 core : { 
 check_callback : true, 
 data : [ 
 { "id" : "1", "parent" : "#", "text" : "root" }, 
 { "id" : "2", "parent" : "1", "text" : "child 1" }, 
 { "id" : "3", "parent" : "1", "text" : "child 2" } 
 ], 
 }, 
 plugins : ["wholerow","contextmenu"], 
 "contextmenu": { 
 "items": { 
 "create": null, 
 "rename": null, 
 "remove": null, 
 "ccp": null, 
 "add": { 
  "label": "add", 
  "action": function (obj) { 
  var inst = jQuery.jstree.reference(obj.reference); 
  var clickedNode = inst.get_node(obj.reference); 
  alert("add operation--clickedNode's id is:" + clickedNode.id); 
  } 
 }, 
 "delete": { 
  "label": "delete", 
  "action": function (obj) { 
  var inst = jQuery.jstree.reference(obj.reference); 
  var clickedNode = inst.get_node(obj.reference); 
  alert("delete operation--clickedNode's id is:" + clickedNode.id); 
  } 
 } 
 } 
 } 
}).on("ready.jstree", function (e, data) { 
 data.instance.open_all(); 
}); 
</script> 

GetMenu函数获取必要请求的节点数据

$(function () { 
 $("#plugins2").jstree({ 
 "core" : { 
 // so that create works 
 "check_callback" : true 
 }, 
 "plugins" : [ "contextmenu" ] 
 }); 
}); 

一. ajax请求生成jsTree

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  <link href="Scripts/themes/default/style.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery.js" type="text/javascript"></script>
  <script src="Scripts/jquery.jstree.js" type="text/javascript"></script>
  <script>
    $(function () {
      $.getJSON("/default.aspx?ACTION=AJAX&pid=00000000-0000-0000-0000-000000000000", function (result) {
        $.each(result, function (i, item) {
          var typeN = item.SonCount > 0 ? "jstree-closed" : "jstree-leaf";
          $("#tree").append("<li id='phtml_" + item.Id + "' class='" + typeN + "'><a href='#'>" + item.MenuName + "</a></li>");
        });
        $("#demo2").jstree({
          "plugins": ["themes", "html_data", 'types', "ui", "checkbox"],
          'core': { 'animation': 0 },
          "types": { "types":
                {
                  "person": { "icon": { "image": "/Scripts/themes/default/person.png"} },
                  "depar2": { "icon": { "image": "/Scripts/themes/default/depar2.png"} },
                  "default": { "icon": { "image": "/Scripts/themes/default/depar1.png"} }
                }
          }
        }).bind("open_node.jstree", function (e, data) {
          var id = data.rslt.obj[0].id;
          if ($("#" + id + " li").length > 0) { return; }
          $.getJSON("/default.aspx?ACTION=AJAX&pid=" + id.replace("phtml_", ""), function (result) {
            var str = "<ul>"
            $.each(result, function (i, item) {
              var typeN = item.SonCount > 0 ? "jstree-closed" : "jstree-leaf";
              var icon = item.SonCount > 0 ? "depar2" : "person";
              str += "<li rel = '" + icon + "' id='phtml_" + item.Id + "' class='" + typeN + "'><a href='#'> " + item.MenuName + "</a></li>";
            });
            str += "</ul>";
            $("#" + id).append(str);
            var tree = jQuery.jstree._reference("#" + id);
            tree.refresh();
            $("ins[class='jstree-checkbox jstree-icon']").removeClass("jstree-icon");
            $(".jstree-checkbox").attr("style", "");
          });
        });
      });
    });
  </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <div id="demo2">
  <ul id="tree">
  </ul>
  </div>
</asp:Content>

三.伍 (drag&drop)拖拽插件

以上正是本文的全体内容，希望对大家有所扶助，同期也目的在于多多协理脚本之家！

$(function () { 
 $("#plugins10").jstree({ 
 "core" : { 
 "data" : { .. AJAX config .. } 
 }, 
 "massload" : { 
 "url" : "/some/path", 
 "data" : function (nodes) { 
 return { "ids" : nodes.join(",") }; 
 } 
 } 
 "plugins" : [ "massload", "state" ] 
 }); 
}); 

这段代码应用jsTree的contextmenu
plugin，去掉jsTree自带的菜系，并自定蒿菜单

率先数据库的表结构如下

1旦超级节点的SonCount属性大于0

如上便是本文的全体内容，希望对咱们的学习抱有援助，也指望大家多多援救脚本之家。

页面上有个按键，点击后触发saveTree函数，发请求给后台，把选中的节点的id发给后台。

在本DEMO中选取JavaScript塞里alizer来体系化菜单数组

// 3 ways of doing the same thing 
$('#jstree').jstree(true) 
 .select_node('mn1'); 
$('#jstree') 
 .jstree('select_node', 'mn2'); 
$.jstree.reference('#jstree') 
 .select_node('mn3'); 

您只怕感兴趣的篇章:

• jstree成立Infiniti分级树的办法【基于ajax动态成立子节点】
• 听他们说BootStrap
  Metronic开采框架经验计算【贰】列表分页管理和插件JSTree的应用
• jsTree 基于JQuery的排序节点
  Bug
• jquery下jstree轻易利用 –
  v一.0
• jquery.jstree
  扩充节点的双击事件代码
• 依靠jsTree的无限级树JSON数据的转换代码
• JQery jstree
  大数据量难点消除方法
• jsTree树控件(基于jQuery,
  超强悍)[推荐]
• jstree的粗略实例

三.柒.(search plugin) 寻找插件
以此插件能够在壹棵树搜索对应的条规。
您能够通过API找到越来越多的布署选项：点击展开链接

jsTree在容器中触发变量事件，你能够浏览全部事件，然后明白哪些进行监听：

第2来看一下效用

它也支撑三态，意味着三个节点有个别子节点是选中，那个节点将会被渲染成未规定，这么些情景能够流传。你能够经过级联配置选项来微调级联选项。

当中请求参数pid为客户端须要得到的节点ID