树形图的查询

今天我要讲的内容是树形图的查询，也可以说是怎样弄出来一个树形图吧。刚开始接触树形图的时候，感觉树形图有点难，但经过自己的思考和网上查的一些资料来看，树形图并没有想象中的那么难。当然我讲的是基础的查询树形图的方法。我们打开开发工具VS，我今天用的表名是客户分类，主要是把客户分类到不同的节点。在查询之前，我先给大家看一下数据库的设计。如下图：

主要的字段有客户分类ID、第二个是递归(即自己调用自己)、第三个是客户分类名称，从数据库表中我们可以看得出客户分类名称是父节点，下面两个是子节点。接下来我们来到开发工具的控制器里面写我们要查询的树形图的方法。方法代码如下：
public ActionResult PartsNodes()
{
List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();
List treeList = new List();//声明一个对象列表
//查询数据的数据
var Parts = (from tbCustomerType in myModel.S_CustomerType
select new zTreeNode
{
PID = tbCustomerType.B_C_CustomerTypeID,//父亲id
SID = tbCustomerType.CustomerTypeID,//儿子id
NodeName = tbCustomerType.CustomerTypeName, //节点名
}).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);
}
可能看的时候有点看不懂，但自己尝试一下应该可以理解这个方法的意思。我就不解释这个方法的意思了。把方法写完之后，就到了要怎样调用这个方法了。来到要查询树形图的页面，首先我跟大家看一下，查询树形图的id。如下图所示：

主要用到的id是treeDemo，其它代码随你们自己敲。在讲查询方法之前，要引入一些css和js，我用到的css插件名是：

因为我用的查询方法不同，引入插件之后，还要写一些css的代码，代码如下：
/树形的内容/
.form-control:focus, .custom-select:focus {
outline: 0;
box-shadow: none;
}
/取消input 文本框的焦点蓝色边框样式/
.modal-header {
height: 45px;
}
#treeDemo li a .ico_close, #treeDemo li a .ico_docu {
background: url(’…/…/…/…/Plugins/zTree_v3/css/zTreeStyle/img/diy/1_close.png’) 0 0 no-repeat;
}
#treeDemo li a .ico_open {
background: url(’…/…/…/…/Plugins/zTree_v3/css/zTreeStyle/img/diy/1_open.png’) 0 0 no-repeat;
}
这些类名大家不用管，主要是插件里面要用到的内容，我们复制过去就可以了，我们把css引入完之后，那么接下来就要引入js插件了，主要用到的插件用两个：

把插件引入完成之后，就可以开始查询的方法了。首先是树形图的查询代码：
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,//用于捕获节点被点击的事件回调函数
}
};
把树形图的配置参数查询完成之后，我们还要获取点击的节点，获取点击的节点方法如下：
//获取点击的节点
function zTreeOnClick(e, treeId, treeNode) { }
这样我们的树形图就完成了，当然树形图的图片是可以换的，代码如下图所示：

把更换图片的方法调用到查询树形图那里，这样就可以实现更换图片了。效果如下图所示：

学习总结：通过这次学习树形图的查询，我对树形图的了解有了一定的深刻，树形图还可以进行新增、修改、删除的操作，如果有时间的话，我还会教大家如何新增树形图的方法，那么今天我就讲到这里了，如果有不明白的地方可以在下面的评论区进行评论，我能解决的就解决，让我们一起加油吧。