有小图标的树形菜单

下面是树形菜单的效果效果图片：

先是设置树形菜单进行一些基础的配置
var setting = {
key: {
title: “t”
},
data: {
simpleData: { enable: true }
},
callback: {onClick: onClick}
};
其中id为1、2、3的为树形菜单的父节点，其他的都是父节点下面的子节点，pid是设置子节点归类到哪一个父节点下面的，name是子节点的名称，icon是小图标的路径！

var zNodes = [
{ id: 1, pId: 0, name: “服装”, open: true, iconOpen: “/Plugins/css/zTreeStyle/img/diy/1_open.png”, iconClose: “/Plugins/css/zTreeStyle/img/diy/1_close.png” },
{ id: 4, pId: 1, name: “上衣”, icon: “/Plugins/css/zTreeStyle/img/diy/2.png” },
{ id: 5, pId: 1, name: “裤子”, icon: “/Plugins/css/zTreeStyle/img/diy/3.png” },
{ id: 6, pId: 1, name: “裙子”, icon: “/Plugins/css/zTreeStyle/img/diy/5.png” },
{ id: 7, pId: 1, name: “套装”, icon: “/Plugins/css/zTreeStyle/img/diy/8.png” },
//父节点服装下面有上衣、裤子、裙子、套装四个子节点
{ id: 2, pId: 0, name: “鞋子”, open: true, icon: “/Plugins/css/zTreeStyle/img/diy/4.png” },
{ id: 8, pId: 2, name: “男鞋”, icon: “/Plugins/css/zTreeStyle/img/diy/6.png” },
{ id: 9, pId: 2, name: “女鞋”, icon: “/Plugins/css/zTreeStyle/img/diy/7.png” },

//父节点鞋子下面有男鞋、女鞋两个子节点
{ id: 3, pId: 0, name: “内衣”, open: true, icon: “/Plugins/css/zTreeStyle/img/diy/4.png” },
{ id: 10, pId: 3, name: “文胸”, icon: “/Plugins/css/zTreeStyle/img/diy/6.png” },
{ id: 11, pId: 3, name: “内裤”, icon: “/Plugins/css/zTreeStyle/img/diy/7.png” },
//父节点内衣下面有文胸、内裤两个子节点
];
var log, className = “dark”;

function onClick(event, treeId, treeNode, clickFlag) {
RegemId = treeNode.id;
tabCommFuns();
}
设置树形菜单的点击事件，通过treeNode.id（treeNode. name 获取到当前点击的节点的名称）可以获取到你所点击的当前的节点的id，然后就可以在方法写你需要的操作了，我这里的是点击之后有一个查询的效果！
$(document).ready(function () {
$.fn.zTree.init($.fn.zTree.init(("#treeDemo"), setting, zNodes);
});
点击之后根据点击的当前的Id去重新查询一遍数据
function tabCommFuns() {
var sltAcademe = $("#sltAcademe").val();
var txtSearch = $("#txtSearches").val();
var RegemIds = RegemId;

tabCommFun.reload({
url: ‘/DayWorkManagement/PurchaseStocks/SelecComFunm’,
where: { RegemIds: RegemIds, sltAcademe: sltAcademe, txtSearch: txtSearch },
page: { curr: 1 },
})
}
在写树形菜单之前要引入JQuery.Ztree.cored的插件，和zTreeStyle的css文件！