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 的节点
			}
		});
	};

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

layui 树组件tree 通过API获取数据_第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

layui 树组件tree 通过API获取数据_第2张图片

去掉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}');
			}
		});
    });

你可能感兴趣的:(layui插件,layui,前端,javascript)