树形

今天药忘吃喽~ 2021-12-14 02:35 241阅读 0赞

树形  
项目中对于商品的类别是靠一个树形的插件进行编写的，通过树形的展示，商品类别显得更有层次感，更加的简单方便  
首先我们就是要引用关于树形的插件了，然后在页面上设置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) \{//传回节点数据数组  
 . f n . z T r e e . i n i t ( .fn.zTree.init( .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,//用于捕获节点被点击的事件回调函数  
\}  
\};  
这样一个树形分类就做出来了  
![在这里插入图片描述][20190707154022158.PNG]

[20190707154022158.PNG]: /images/20211213/589c6b01a4bc4f57b7125b42ef612360.png