jsTree动态创建节点,解决创建不了节点问题

官方文档

https://www.jstree.com.cn/

js动态创建节点不成功的原因

主要是配置没有设置check_callback,默认是false,需要配置返回true,才可以创建节点

<link href="/jstree/themes/default/style.min.css?v=2021-02-08-1" rel="stylesheet" />
<script src="/lib/jquery/dist/jquery.min.js?v=2021-02-08-1"></script>
<script src="/jstree/jstree.min.js"></script>

<div id="tree_div" class="demo" lay-ignore></div>

!function(){
   $('#tree_div').jstree({
            'core': {
                //不支持多选false,多选为true
                "multiple": false,
                'data': {
                    //请求后台url
                    "url": '/department/add',
                    //提交的参数
                    "data": function (node) {
                        return { "id": node.id };
                    }
                },
                'check_callback': function (operation, node, node_parent, node_position, more) {
                    // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit'
                    // in case of 'rename_node' node_position is filled with the new node name
                   // return operation === 'rename_node' ? true : false;
                    //确定当用户尝试修改树的结构时会发生什么情况。
                    //如果 false创建,重命名,删除,移动或复制之类的所有操作,则将被阻止。
                    //您可以将其设置 true 为允许所有交互,或使用功能进行更好的控制。
					
                    //需要创建节点,请将设置改为true
                    return true;
                },
                //出错
                'error': function (r) {
                    console.log("**************error**********");
                    console.log(r);
                }
            }           
        }).on("select_node.jstree", function (event, node) {
            //选中一个节点触发
            //console.log(event);
            //console.log(node);
            $("#txtDepartment").val(node.node.text);
            $("#txtSno").val(node.node.original.m_sno);
            if (node.node.original.m_status == 1) {
                $("input[name=status_dp][value=1]").click();             
            } else {
                $("input[name=status_dp][value=0]").click();
            }
            layui.form.render();
        });
		
function save() {
			var arrId = $('#tree_div').jstree().get_top_selected();
			if (arrId.length == 0) {
				showMsg('请选中一个节点');
				return false;
			}
			var txtDepartment = $("#txtDepartment").val();
			//var txtParentId = $("#txtParentId").val();
			var txtParentId = '';
			var txtSno = $("#txtSno").val();
			var status = $("input[name='status_dp']:checked").val();
			//操作类型,
			var data_type = $("input[name='data_type']:checked").val();
			if (txtDepartment=="") {
				showMsg('部门名称不可为空');
				return;
			}
			 //var departmentId = $("#departmentId").val();
			var departmentId = arrId[0];
			var url = p.addUrl;
			if (data_type == "edit") {
				//修改
				url = p.updateUrl;
			}
			else if (data_type == "child") {
				//父级id
				txtParentId = departmentId;
			}
		var fm = {
			Id: departmentId,
			Department_name: txtDepartment,
			Parent_id: txtParentId,
			Sno: txtSno,
			d_status: status
		};
		console.log('发送参数');
		console.log(fm);
			$.ajax({
				url: url,
				type: "post",
				data: fm,
				success: function (r) {
					if (r.code == 200) {
						showMsg(r.msg);
						//测试成功;创建节点
						//$.jstree.reference('#tree_div').create_node('父节点id', { id: '创建节点id', text: '武松', icon: "jstree-file" });
						//创建一个节点
						if (data_type == 'child') {
							//新增下级
							$.jstree.reference('#tree_div').create_node(txtParentId, { id: r.data.id, text: txtDepartment, icon: "jstree-file", m_sno: r.data.sno, m_status: r.data.d_status });
						}
						else if (data_type == 'same') {
							//获取父节点id
							//$.jstree.reference('#tree_div').get_parent('44fb104497134ecea551cbef6176543d');
							var parentId = $.jstree.reference('#tree_div').get_parent(departmentId);
							//新增同级
							$.jstree.reference('#tree_div').create_node(parentId, { id: r.data.id, text: txtDepartment, icon: "jstree-file", m_sno: r.data.sno, m_status: r.data.d_status });
						}else if (data_type == 'edit') {
                                //编辑节点名称
                                //rename_node
                                $.jstree.reference('#tree_div').rename_node(departmentId, txtDepartment);
                         }						 
					} else {
						showAlert(r.msg);
					}
					//setTimeout(function () { location.reload(); }, 2000);
				}
			});
		}
}();		

后台返回json格式

children 如果有下级,则设置true,没得设置为false,这个会影响有没有展开的图标
icon是设置节点图标的
id是节点id
text节点名称

[{"id":"740fc4db0d664d20b9c27a7cb200e969","text":"翰林院","children":true,"icon":"","m_sno":1,"m_status":1},{"id":"6c876b4974b34259bc3b89c2e5ca484d","text":"门下省","children":true,"icon":"","m_sno":10000,"m_status":1},{"id":"069906775b2d4ef382d5e4f689f68037","text":"职能部门","children":true,"icon":"","m_sno":99900,"m_status":1}]

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王焜棟琦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值