树形

树形
项目中对于商品的类别是靠一个树形的插件进行编写的，通过树形的展示，商品类别显得更有层次感，更加的简单方便
首先我们就是要引用关于树形的插件了，然后在页面上设置div

设置样式
.form-control:focus, .custom-select:focus {
outline: 0;
box-shadow: none;
}
.modal-header {/取消input 文本框的焦点蓝色边框样式/
height: 45px;
}
然后在控制器定义方法
//查询 生成树形图
public ActionResult PartsNodes()
{
List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();
//Dictionary表示键和值的集合
List treeList = new List();//声明一个对象列表
//查询数据的数据
var Parts = (from tbParts in myModel.D_CategoryManagement
select new zTreeNode
{
PID = tbParts.S_C_CategoryManagementID,//父亲id
SID = tbParts.CategoryManagementID,//儿子id
NodeName = tbParts.CategoryName, //节点名
}).ToList();
for (int i = 0; i < Parts.Count; i++)
{
zTreeNode tree = new zTreeNode();
tree.PID = Parts[i].PID;//父亲id
tree.SID = Parts[i].SID;//儿子id
tree.NodeName = Parts[i].NodeName.ToString();//节点名
treeList.Add(tree);//将对象添加到List的结尾处
}
foreach (var model in treeList)
{
Dictionary<string, object> jsonzTree = new Dictionary<string, object>();
jsonzTree.Add(“pId”, model.PID); //父亲id
jsonzTree.Add(“id”, model.SID);//儿子id
jsonzTree.Add(“name”, model.NodeName);//节点名称
jsonlist.Add(jsonzTree);//将对象添加到List的结尾处
}
return Json(jsonlist, JsonRequestBehavior.AllowGet);
}
然后在script中引用控制器中的方法
var layer;
$(function () {
$.ajaxSettings.async = false;//取消异步
$.ajax({
type: ‘Get’,
url: ‘PartsNodes’,//控制器链接
success: function (data) {//传回节点数据数组
$.fn.zTree.init($("#treeDemo"), setting, data);///初始化树形
}
});
SetIcon();//调用设置树形图层级小图标的方法
layui.use([“layer”], function () {
layer = layui.layer;
});
//全部展开树形节点
var treeObj = $.fn.zTree.getZTreeObj(“treeDemo”);
treeObj.expandAll(true);
});
//树形图的配置参数
var setting = {
async: {
enable: true//设置 zTree 是否开启异步加载模式
},
data: {
simpleData: {
enable: true//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
}
},
callback: {
onClick: zTreeOnClick,//用于捕获节点被点击的事件回调函数
}
};
这样一个树形分类就做出来了