layui 树组件tree 通过API获取数据

一、简单

	var treedata=[];
	tree.render({
		elem: '#addLeftType',
		id: 'demoId',
		data: treedata,
		showCheckbox: true,
		oncheck: function(obj){
			console.log(obj.data); // 得到当前点击的节点数据
			console.log(obj.checked); // 节点是否被选中
			console.log(obj.elem); // 得到当前节点元素
		},
		edit: ['add', 'update', 'del'] // 开启节点的右侧操作图标
	});
	get_tree_data(0);//初始化
	// 使用 layui 的 ajax 方法来获取树节点数据
	function get_tree_data(id){
		$.ajax({
			type:'post',
			url: "{:url('classif_listjson')}",
			data: {id:id},
			success:function(response){
				tree.reload('demoId', {
					data:response,
				});
				tree.setChecked('demoId', [1,2]); //单个勾选 id 为 1 的节点
			}
		});
	};

初始化 默认选中：只能这个位置才能生效

tree.setChecked('demoId', [1,2]); //单个勾选 id 为 1 的节点

二、复杂（只能单选，二级）：增加、编辑、删除功能

//tree组件 操作 开始
	var show_btn = [];
	var show_btn_ids='';
	var array_ids=[];
	function get_tree_id(checkarr){ 
		for(var i=0;i<checkarr.length;i++){ 
			if(checkarr[i].children){
				get_tree_id(checkarr[i].children)
			}else{
				show_btn_ids += checkarr[i].id+',';
				array_ids.push(checkarr[i].id);
				$("#classify_ids").val(show_btn_ids);
			}

		} 
	}

 	var treedata=[];
	 //用来修改后的节点数据
	var update_treedata=[];
    //渲染
    var inst1 = tree.render({
      elem: '#addLeftType'  //绑定元素
	  ,id: 'demoId'
	  ,edit: ['add', 'update', 'del']
	  ,showCheckbox: true
      ,data:treedata
	  ,click: function(obj){
      	//layer.msg(JSON.stringify(obj.data));
      },oncheck: function(obj){
		// console.log(obj); //得到当前点击的节点数据 
		show_btn_ids = '';
		$("#classify_ids").val('');
		$("#showLeftType").html('');
		//获得选中的节点
		var checkData = tree.getChecked('demoId');
		$("#showLeftType").html("");
		//console.log(checkData.length)
		// 取消其它选中，只能单选
		uncheckAllExceptOne()


		get_tree_id(checkData); 
	
	 },operate: function(obj){
			var type = obj.type; //得到操作类型：add、edit、del
			var data = obj.data; //得到当前节点的数据
			var elem = obj.elem; //得到当前节点元素
			//Ajax 操作
			var id = data.id; //得到节点索引
			var all_id = data.pid_all.split(","); 
			if(type === 'add'){ //增加节点
				addType(id,all_id);
				//返回 key 值
				return '增加';
			} else if(type === 'update'){ //修改节点
				var title = elem.find('.layui-tree-txt').html()
				$.ajax({
					type: "post",
					url: "{:url('classif_add')}",
					dataType:"json",   //返回格式为json
					data: {id:id,title:title,field:'name',action:'ajax_update'},
					success: function(data){
						layer.msg(data.msg);
						$("#"+id).text(title);
					},
					error: function(){
						layer.msg('更新失败!');
					}
				});
			} else if(type === 'del'){ //删除节点
				$.ajax({
					type: "post",
					url: "{:url('classif_add')}",
					dataType:"json",   //返回格式为json
					data: {id:id,del_is:1,action:'ajax_del'},
					success: function(data){
						layer.msg(data.msg);
						if(data.code==200){
							//获得选中的节点
							var checkData = tree.getChecked('demoId');
							//清空选中
							array_ids=[];
							//重新获取选中id
							get_tree_id(checkData); 
							//treedata 结构数据，id递归删除对应id，array_ids给默认选中的id加上
							update_treedata= delete_tree_id(treedata,id,array_ids,"del",0,all_id);
							//重新渲染组件
							tree.reload('demoId', {data:update_treedata});
							//清空
							$("#showLeftType").html("");
							//再次获得选中的节点
							var checkData = tree.getChecked('demoId');
							//再次清空选中
							array_ids=[];
							//再次重新获取选中id
							get_tree_id(checkData); 
						}
					},
					error: function(){
						layer.msg('更新失败!');
					}
				});
			};
	  }
    });

	//取消除了当前选中所有选项
	function uncheckAllExceptOne(checkboxId) {
		var checkboxes = document.querySelectorAll('#addLeftType input[type="checkbox"]');
		for (var i = 0; i < checkboxes.length; i++) {
			checkboxes[i].checked = false;
		}
	}
	function get_page_data(id){
		$.ajax({
			type:'post',
			url: '{:url('classif_listjson')}',
			data: {id:id},
			success:function(response){
				treedata = response.data;
				if(response.code!=200){
					treedata =[{title:response.msg,id:99999999,children:[]}];
				}
				tree.reload('demoId', {
					data:treedata
				});
				{notempty name="$rs"}
				tree.setChecked('demoId', [{$rs['classify1']},{$rs['classify2']}]); //单个勾选 id 为 1 的节点
				{/notempty}
			}
		});
	};
	var p_id=0;
	var add_terr_item_title="未命名";
	get_page_data({$id});
	tree.setChecked('demoId', [1, 2]); // 批量勾选 id 为 1,3 的节点
	//操作节点type：del删除 add 添加
	function delete_tree_id(data,id,array_ids,type,addid,all_id){ 
		var is_data=data;
		var one_data=[];
		var p_spread=true;
		
		for(var i=0;i<data.length;i++){
		
			if(id==data[i].id&&type=="del"){
				is_data.splice(i,1);
			}else if(type=="add"&&(id==data[i].id)){
				if(is_data[i].children){
					is_data[i].children.push({id:addid,title:add_terr_item_title,pid_all:all_id.toString()+','+addid});
				}else{
					is_data[i].children=[];
					is_data[i].children.push({id:addid,title:add_terr_item_title,pid_all:all_id.toString()+','+addid});
				}
			}
			for (let index = 0; index < array_ids.length; index++) {
					var acid = array_ids[index];
					if(data[i]&&acid==data[i].id){
						if(is_data[i]){
							is_data[i].checked=true;
						}
					}
			} 
			//父节点展开
			if(data[i]&&data[i].id==id){
				is_data[i].spread=p_spread;//父节点展开
			}
			if(all_id){
				for (let k = 0; k <all_id.length; k++) {
					const sp_id = all_id[k];
					if(data[i]&&sp_id==data[i].id){
						is_data[i].spread=p_spread;//父节点展开
					}
				}
			}
			if(data[i]&&data[i].children){
				delete_tree_id(data[i].children,id,array_ids,type,addid,all_id);
			}
		}
		one_data=is_data;
		return  one_data;
	}

	function addType(pid,all_id){
		var typetitle = $("#typetitle").val();
		var title
		if(pid==p_id||pid==""||pid==0||pid==null||pid==undefined){
			title = typetitle? typetitle:add_terr_item_title;
		}else{
			title=add_terr_item_title;
		}
		add_terr_item_title=title;
		$.ajax({
			type: "post",
			url: "{:url('classif_add')}",
			dataType:"json",   //返回格式为json
			data: {pid:pid,title:title,level_limit:{$level_limit}},
			success: function(data){
				layer.msg(data.msg);
				if(data.code==200){
					//获得选中的节点
					var checkData = tree.getChecked('demoId');
					//清空选中
					array_ids=[];
					//重新获取选中id
					get_tree_id(checkData); 
					//treedata 结构数据，id递归删除对应id，array_ids给默认选中的id加上,all_id
					update_treedata= delete_tree_id(treedata,pid,array_ids,"add",data.add_id,all_id);
					if((pid==0||pid==null||pid==undefined||pid==""||pid==p_id)){
						update_treedata.push({id:data.add_id,title:add_terr_item_title,pid_all:p_id.toString()+','+data.add_id});
					}
					//重新渲染组件
					tree.reload('demoId', {data:update_treedata});
					//清空
					$("#showLeftType").html("");
					//再次获得选中的节点
					var checkData = tree.getChecked('demoId');
					//再次清空选中
					array_ids=[];
					//再次重新获取选中id
					get_tree_id(checkData); 
					add_terr_item_title="未命名";
				}else{
					//重新渲染组件
					tree.reload('demoId');
				}
			},
			error: function(){
				layer.msg('更新失败!');
			}
		});
	}
	$("#addType").click(function(){
		//更新后台数据
		addType(p_id,0);
	})

//tree组件 操作 结束

去掉uncheckAllExceptOne()就可以多选了

表单提交的一些判断

    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
		/* 启动加载... */
		var indexload = layer.load(1, {
		  shade: [0.1,'#fff'] //0.1透明度的白色背景
		});
		// 加入分类
		var data = JSON.parse(JSON.stringify(data.field));
		var checkData = tree.getChecked('demoId');
		if (Object.keys(checkData).length === 0) {
			layer.close(indexload);/* 关闭加载弹层... */
			layer.msg('请选择分类');
			return
		}
		var classify1 = checkData[0]['id'];
		var classify2 =  checkData[0]?.children?.[0]?.id;;
		data.classify1=classify1;
		data.classify2=classify2;
		var addData = JSON.stringify(data);
		$.ajax({
			url: "{:url('add')}",
			type: "post",
			dataType:"json",   //返回格式为json
			data: {data:addData},
			success: function(data) {
				layer.close(indexload);/* 关闭加载弹层... */
				layer.msg(data['msg']);
				/* 延迟2秒刷新... */
				if(data['code']==200){
					setTimeout(function(){
						window.location.reload()  
					},2000)
				}
			},
			error: function() {
				layer.close(indexload);/* 关闭加载弹层... */
				layer.msg('{$form_server_error_title}');
			}
		});
    });