$(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