本文介绍了一种利用jQuery和layui实现的树状结构数据处理方法，包括节点选择、右键菜单、创建、重命名及删除等核心功能，并展示了如何通过AJAX与后台进行数据交互。
let selectednode = null;
$('#data')
.on('activate_node.jstree',function (nodes, event) {
//console.log('显示ID'+ event.node.original.ids); 获取原始数据的id
ids = event.node.original.ids;
//ids = data.instance.get_node(data.selected[0]).original.ids;
tableIns.reload({
url: '{SITE_URL}man.php?c=Home_basic_organization&m=index',
request: {
pageName: 'showpage',
limitName: 'nums'
},
where: {
id: event.node.original.ids,
types: event.node.original.types,
major_id: event.node.original.major_id,
},
method: 'post',
page: {
curr: 1
},
parseData: function (res) {
/*console.log('点击树事件');
console.log(event.node.id);
console.log(res);
debugger;*/
debugger;
left_org_id = res.left_org_id; //将点击左侧组织结构树的id赋值
let table_data = [];
if (res.content_list) {
for (let i = 0; i < res.content_list.length; i++) {
table_data.push({
"id": res.content_list[i].id,
// "avatar": res.content_list[i].avatar,
"name": res.content_list[i].name,
"depart": res.content_list[i].depart,
"mobile": res.content_list[i].mobile,
"email": res.content_list[i].email,
"username": res.content_list[i].username,
"head": res.content_list[i].head,
"supervisor": res.content_list[i].supervisor,
"groupid": res.content_list[i].groupid
});
}
}
return {
"code": 0,
"msg": '', //解析提示文本
"count": res.total, //解析数据长度
"data": table_data //解析数据列表
};
}
});
})
//单击右键
.jstree({
'core': {
'data': JSON.parse('{$js_list}'),
"themes" : {
"variant" : "large",//加大
"ellipsis" : true //文字多时省略
},
"check_callback" : true//设置为true,当用户修改数时,允许所有的交互和更好的控制(例如增删改)
},
"plugins" : ["themes",'json_data','contextmenu','dnd', 'types'],
"contextmenu": {//重写contextmenu菜单
items: function(o, cb){
//因为这里我们之后需要定义多个项,所以通过对象的方式返回
let actions={};
let idss = o.original.ids;
actions.idsf={
"separator_before" : false,//Create这一项在分割线之前
"separator_after" : true,//Create这一项在分割线之后
"_disabled" : false, //false表示 create 这一项可以使用; true表示不能使用
"label" : "id为"+idss, //Create这一项的名称 可自定义
'icon' :'glyphicon glyphicon-home'
}
//添加一个"新增"右键菜单
actions.create={//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法
"separator_before" : false,//Create这一项在分割线之前
"separator_after" : true,//Create这一项在分割线之后
"_disabled" : false, //false表示 create 这一项可以使用; true表示不能使用
"label" : "新增", //Create这一项的名称 可自定义
"icon" : "glyphicon glyphicon-plus",
"action" : function (data) { //点击Create这一项触发该方法,这理还是蛮有用的
create();
}
};
//添加一个"重命名"右键菜单
actions.rename={
"separator_before" : false,
"separator_after" : false,
"_disabled" : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
"label" : "修改",
"icon" : "glyphicon glyphicon-edit",
"action" : function (data) {
rename();
}
}
//添加一个"删除"右键菜单
actions.delete= {
"separator_before" : 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) {
del();
}, function() {
layer.closeAll();
}
};
return actions;//返回右键菜单项
}
}
})
.on('select_node.jstree', function(event, data) {
if(selectednode == data.node.id){
$('#data').jstree(true).deselect_all();
selectednode = null;
} else {
selectednode = _getCurrNode();
}
})
.on('open_node.jstree', function(event, data) {
$('.jstree-icon.jstree-themeicon.jstree-themeicon-custom').css('background-size','contain');//给节点重新渲染样式-处理背景图片的background属性的bug
})
.bind('ready.jstree', function(event, data) {
let jsonNodes = $('#data').jstree(true).get_json('#', { flat: true});
$.each(jsonNodes, function (i, val) {
let node = $('#data').jstree().get_node(this);//获取当前对象的json数据
var nIcon = node.icon;//节点的背景图
//$('#data').jstree(true).set_icon(node,'http://ccuin.cn/statics/admin/basic/images/ICL/file.png');//设置图标
$('#data').jstree(true).set_icon(node,nIcon);
})
$('.jstree-icon.jstree-themeicon.jstree-themeicon-custom').css('background-size','contain');//给节点重新渲染样式-处理背景图片的background属性的bug
});
;
function create(){
var form = layui.form;
var ref = $('#data').jstree(true);//判断树新增是否成功
$('#menuBox .layui-input').val('');
let val = _getCurrNode();
if (val) { //选中节点 有顶级菜单
var ref = $('#data').jstree(true);
var sltText = ref.get_text(val);//获取节点文本：
var ht_str = '<label class="layui-form-label">上级菜单</label><div class="layui-input-block">';
ht_str += '<div class="layui-form-label">'+sltText+'</div>';
ht_str += '</div></div>';
$("#top_name").html(ht_str);
$("#edit_pid").val(ref.get_selected(true)[0].original.ids);
} else { //新增顶级 无顶级菜单
$("#edit_pid").val('0');
}
$("#edit_switch").html('<input type="checkbox" name="data[is_open]" lay-skin="switch">');
form.render('checkbox');
layer.open({
type:1,
title: '新建菜单',
area:['500px','520px'],
content:$('#menuBox'),
btn: ['新建','取消'],
yes: function(index, layero){
var is_open = 'off';
var menu_name = layui.jquery('#menuBox'+" input[name='data[name]']").val();
var supervisor_id = layui.jquery('#menuBox'+" input[name='data[supervisor_id]']").val();
var displayorder = layui.jquery('#menuBox'+" input[name='data[displayorder]']").val();
var ico = layui.jquery('#menuBox'+" input[name='data[ico]']").val();
// var name = layui.jquery('#menuBox'+" .layui-input").val();
$('input[type=checkbox]:checked').each(function() {
is_open = $(this).val();
});
var loading = layer.msg('正在提交', {icon: 16, shade: 0.3, time:0});
$.ajax({
url: '{SITE_URL}man.php?c=Home_basic_organization&m=menu_add',
type: "POST",
data: {menu_name:menu_name, supervisor_id:supervisor_id, is_open:is_open, displayorder:displayorder, pid:ids, ico: ico},
dataType:"json",
success: function(data) {
parent.layer.close(loading);
if (data.code === 1) {
layer.msg(data.msg, {icon: 1});
window.onbeforeunload = function() {
return null;
};
setTimeout('window.location.reload(true)', 1000);
} else {
layer.msg(data.msg, {icon: 5});
}
},
error: function(HttpRequest, ajaxOptions, thrownError) {
parent.layer.close(loading);
alert(HttpRequest.responseText);
}
});
/*let currNode = _getCurrNode();//获取当前节点
if(value) {
if(currNode){
ref.create_node(currNode, {"type":"file","text":value});
} else {
ref.create_node('#', {"type":"file","text":value});
}
}else{
return false; // 如果value为空，停止继续执行
}*/
layer.close(index);
},
btnAlign: 'r',
})
}
function rename(){
var form = layui.form;
/*var ref = $('#data').jstree(true);
var sltText = ref.get_text(val);//获取节点文本：
$('#menuBox .layui-input').val(sltText);*/
let val = _getCurrNode();
if(val){
//获取选中菜单的数据
let choose_id = ids;
$.ajax({
url: '{SITE_URL}man.php?c=Home_basic_organization&m=menu_add&check=1',
type: "POST",
data: {choose_id : choose_id},
dataType:"json",
success: function(data) {
if (data.code === 1) {
$("#top_name").html('');
supervisor = data.data.headid;
$("#edit_name").val(data.data.name);
$("#edit_pid").val(data.data.pid);
$("#select_leader_name").val(data.data.headname);
$("#displayorder").val(data.data.displayorder);
$("#ico").val(data.data.ico);
data.data.is_open=='1'?$("#edit_switch").html('<input type="checkbox" name="data[is_open]" lay-skin="switch" checked>'):$("#edit_switch").html('<input type="checkbox" name="data[is_open]" lay-skin="switch">');
form.render('checkbox');
layer.open({
type:1,
title: '修改菜单',
area:['500px','520px'],
content:$('#menuBox'),
btn: ['修改','取消'],
yes: function(index, layero){
var is_open = 'off';
var menu_name = layui.jquery('#menuBox'+" input[name='data[name]']").val();
var menu_pid = layui.jquery('#menuBox'+" input[name='data[pid]']").val();
var supervisor_id = layui.jquery('#menuBox'+" input[name='data[supervisor_id]']").val();
var displayorder = layui.jquery('#menuBox'+" input[name='data[displayorder]']").val();
var ico = layui.jquery('#menuBox'+" input[name='data[ico]']").val();
$('input[type=checkbox]:checked').each(function() {
is_open = $(this).val();
});
var loading = layer.msg('正在提交', {icon: 16, shade: 0.3, time:0});
$.ajax({
url: '{SITE_URL}man.php?c=Home_basic_organization&m=menu_add',
type: "POST",
data: {id:ids, menu_name:menu_name, menu_pid:menu_pid, supervisor_id:supervisor_id, displayorder:displayorder, is_open:is_open, ico:ico},
dataType:"json",
success: function(data) {
parent.layer.close(loading);
if (data.code === 1) {
layer.msg(data.msg, {icon: 1});
window.onbeforeunload = function() {
return null;
};
setTimeout('window.location.reload(true)', 1000);
} else {
layer.msg(data.msg, {icon: 5});
}
},
error: function(HttpRequest, ajaxOptions, thrownError) {
parent.layer.close(loading);
alert(HttpRequest.responseText);
}
});
/*$('#menuBox .layui-input').val(sltText);
currNode = ref.rename_node(val,value);
//ref.refresh();树刷新
if(currNode) {
//新增成功
}else{
return false; // 如果value为空，停止继续执行
}*/
layer.close(index);
},
btnAlign: 'r',
})
} else {
layer.msg(data.msg, {icon: 5});
setTimeout('window.location.reload(true)', 2000);
}
},
error: function(HttpRequest, ajaxOptions, thrownError) {
alert(HttpRequest.responseText);
}
});
}else{
layer.msg('请选择菜单选项');
}
}
function del(){
var ref = $('#data').jstree(true);
var currNode = _getCurrNode();
if(currNode){
layer.confirm('确定删除该菜单?', {icon: 3, title:'提示'}, function(index){
var loading = layer.msg('正在提交', {icon: 16, shade: 0.3, time:0});
$.ajax({
url: '{SITE_URL}man.php?c=Home_basic_organization&m=menu_del',
type: "POST",
data: {id:ids},
dataType:"json",
success: function(data) {
parent.layer.close(loading);
if (data.code === 1) {
layer.msg(data.msg, {icon: 1});
window.onbeforeunload = function() {
return null;
};
setTimeout('window.location.reload(true)', 1000);
} else {
layer.msg(data.msg, {icon: 5});
}
},
error: function(HttpRequest, ajaxOptions, thrownError) {
parent.layer.close(loading);
alert(HttpRequest.responseText);
}
});
/*ref.delete_node(currNode);
layer.close(index);*/
});
}else{
layer.msg('请选择要删除的菜单选项');
}
}
/**
* 获取当前所选中的结点
*/
function _getCurrNode(){
var ref = $('#data').jstree(true),
sel = ref.get_selected();
// console.log(sel);
if(!sel.length) {
//console.log("----");
return false;
}
sel = sel[0];
return sel;
}
/*树结束*/
jstree树最全用法-针对我的需求；不断的研究它的方法-不断更新
最新推荐文章于 2025-06-12 11:23:49 发布
扫一扫
1255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
