layui商品分类树显示

痛定思痛。 2022-04-02 03:22 353阅读 0赞

\**layui商品分类树显示*

实现效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQ5ODky_size_16_color_FFFFFF_t_70]  
layui插件代码片段  
引入插件

script type="text/javascript" src="js/layui/layui.js"></script>
    	<link rel="stylesheet" href="js/layui/css/layui.css" type="text/css"></link>
    	<link rel="stylesheet" href="zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
    	<script type="text/javascript" src="zTree_v3-master/js/jquery-1.4.4.min.js"></script>
    	<script type="text/javascript" src="zTree_v3-master/js/jquery.ztree.core.js"></script>

html代码

css样式

#tree{
    			position: absolute;
    			top:70px;
    			left:600px;
    		}

先引入layui组件

var layer = null;
    		layui.use('layer', function(){
    			layer = layui.layer;
    		});

后台直接查询所有的树的分类集合,转为json格式并输出到前端,  
前端接收

zTreeObj = $.fn.zTree.init($("#tree"),setting,res);//初始化树	res是响应数据
    $("#tree").show();//点击按钮显示树

js代码,点击树时动态效果

var zTreeObj;//zTree配置参数
    		var setting={
    			data: {  //数据配置
    				simpleData: {  //简单数据模式
    					enable: true,  //是否启用简单数据模式
    					idKey: "id",  //设置节点id属性名
    					pIdKey: "parentId",  //设置父节点属性名
    					rootPId: 0  //设置根节点，默认值null
    				}
    			},
    			callback:{  //设置回调函数
                                    //捕获节点被点击事件回调函数，event：事件对象，treeId：对应zTree的treeId，treeNode：被点击节点的JSON数据对象，clickFlag：节点被点击后的选中操作类型
    				onClick:function(event,treeId,treeNode,clickFlag){ 
    					$("#categoryid").val(treeNode.id);
    					$("#category").val(treeNode.name);
    					$("#tree").hide();//点击节点后隐藏树
    				}	
    			}
    			
    		};

你们的解决是我最大的鼓励,一起加油!!!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQ5ODky_size_16_color_FFFFFF_t_70]: /images/20220402/284978d2792743aa8b4f601ef8da1f94.png