jstree个人使用记录
程序员文章站
2022-06-04 18:42:08
...
$('#jstree').jstree({
"core": {
"animation": 0,
"check_callback": true,
"multiple": false,
"themes": {"stripes": true},
'data': function (obj, callback) {
$.ajax({
url: "" + address + "/api/esb/datamgr/dataTree/v1", //这个是获取数据的ajax
type: 'post',
dataType: 'json',
async: true,
success: function (result) {
var data = result.Envelope.Body.busiData;
callback.call(this, data);
}
});
}
},
"types": {
"#": {
"valid_children": ["root"]
},
"root": {
"icon": "/static/3.3.5/assets/images/tree_icon.png",
"valid_children": ["default"]
},
"default": {
"valid_children": ["default", "file"],
"icon": false
},
"file": {
"icon": null,
"valid_children": []
}
},
"plugins": [
"contextmenu", "search",
"state", "types", "wholerow"
],
"search": { "show_only_matches" : true}, //搜索只显示搜索到的结果以及父节点
"contextmenu": { //右键菜单的配置
"items": {
"create": null,
"rename": null,
"remove": null,
"ccp": null,
"add": {
"label": "新建数据",
"icon": "glyphicon glyphicon-plus",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
$.ajax({
url: "" + address + "/api/esb/datamgr/getNewId/v1", //自定义id
type: 'post',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (result) {
var statusCode = result.Envelope.Body.statusCode;
if (statusCode == 0) {
var busiData = result.Envelope.Body.busiData;
var id = busiData;
}
inst.create_node(obj, {
"id": id,//配置节点Id
"text": "新建数据"//节点文本
}, "last", function (new_node) { //last 排序到末尾
try {
new_node.text = "新建数据";
inst.edit(new_node); //调用编辑方法
} catch (ex) {
setTimeout(function () {
inst.edit(new_node);
}, 0);
}
});
},
});
}
},
"rename2": {
"separator_before": false,
"separator_after": false,
"_disabled": false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
"label": "修改数据",
"shortcut_label": 'F2',
"icon": "glyphicon glyphicon-pencil",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"delete": {
"separator_before": false,
"icon": false,
"separator_after": false,
"_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
"label": "删除数据",
"icon": "glyphicon glyphicon-remove",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if (inst.is_selected(obj)) {
inst.delete_node(inst.get_selected());
}
else {
inst.delete_node(obj);
}
}
},
"edit": {
"separator_before": false,
"icon": false,
"separator_after": false,
"_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
"label": "编辑数据属性",
"icon": "glyphicon glyphicon-edit",
"action": function (data) {
//自定义菜单的方法
}
},
}
}
}).bind("create_node.jstree", function (event, data) {
$.ajax({
url: "" + address + "/api/esb/datamgr/createDataNode/v1", //新建节点
type: 'post',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
"id": data.node.id,
"parent": data.node.parent,
"text": data.node.text,
})
});
//新建数据节点
}).bind("rename_node.jstree", function (event, data) {
$.ajax({
url: "" + address + "/api/esb/datamgr/createDataNode/v1", //这个就是请求地址对应sAjaxSource
type: 'post',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
"id": data.node.id,
"parent": data.node.parent,
"text": data.node.text,
}),
});
//重命名节点
}).bind("delete_node.jstree", function (event, data) {
$.ajax({
url: "" + address + "/api/esb/datamgr/deleteDataNode/v1", //这个就是请求地址对应sAjaxSource
type: 'post',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
"id": data.node.id,
"parent": data.node.parent,
"text": data.node.text,
})
});
//删除节点
}).bind("hover_node.jstree", function (event, data) {
//添加 节点的拖拽属性
$("li").draggable({
cursor: "move",
cursorAt: {top: 10, left: -10},
helper: function (event) {
return $("<div style='position: fixed'>" + data.node.id + "</div>");
},
zIndex: 9999999,
background: "white",
distance: 20,
containment: 'body'
});
});
$('#jstree').on("changed.jstree", function (e, data) {
if (data.action != "deselect_all") {
//点击节点触发的事件
}
}
);//搜索var to = false;
$('#search_ay').keyup(function () {
if (to) {
clearTimeout(to);
}
to = setTimeout(function () {
$('#jstree').jstree(true).search($('#search_ay').val());
}, 250);
});
//通过拖拽节点 为搜索框赋值 demo而已 可以根据业务需要 给别的输入框赋值
$("#search_ay").droppable({
drop: function (event, ui) {
if ($(this).attr("readonly") != "readonly") {
$(this).val($(this).val() + trim(ui.draggable.context.textContent));
}
}
});
需要用到js、css：
'/jquery-ui-1.11.4/jquery-ui.js', //拖拽用的 jqui的js
'/jquery-ui-1.11.4/jquery-ui.css',
'/jsTree/dist/themes/default/style.min.css',
'/jsTree/dist/jstree.min.js',
html很简单：
<div class="portlet light">
搜索：<input type="text" value=""
style="margin-bottom:10px;box-shadow:inset 0 0 4px #eee; width:240px; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;"
id="search_ay" placeholder="搜索">
<div id="jstree" style="height: 400px;overflow-y:auto;"></div>
</div>详见jstree 官网API：https://www.jstree.com/api/
个人总结而已，如有错误，请评论指出，谢谢。
如果觉得对您有有帮助 不妨支付宝赞助一瓶水钱