Tree资源树的实战研究

背景简介：

    最近小编在做项目的时候，遇到了一个动态添加资源树的问题，经过几番实践，终于实现了最终的结果，下面我会将自己的经历一点点抛给大家，希望读者尽情享受这顿盛宴。

    这里，我们将实现如下图效果(功能介绍，通过选择年份显示左侧资源树，通过单击资源树在右侧表格中显示该指标中的档次信息):

一、自己动手js拼接树实践

    HTML中就一句接收代码，Controller中将查询到的信息转换成json反到js中就可以了，这里主要是通过js控制树的一个拼接过程，如下代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
//通过年份查询定性指标，返回树-马康-2016-3-25 22:22:20
function QueryUnitObjectByYearType() {
var nodeChild = document.getElementById("NodeChild");
//获取下拉框中的年份
var CheckYear = $('#CheckYear').combobox('getValue');

//查询资源信息
$.post("/SetQualitativeTargetLevel/QueryQualitativeTargetByYear?CheckYear=" + CheckYear, {}, function (data) {
//添加的时候先清除div中的数据
$("#tree").empty();
//将得到的集合按照指标类型去重放到res集合中
var res = [];
var json = {};
for (var i = 0; i < data.length; i++) {
if (!json[data[i].DictionaryName]) {
res.push(data[i].DictionaryName);
json[data[i].DictionaryName] = 1;
}
}
//遍历去重之后的集合，显示到树的div中
$.each(res, function (i, item) {
if (item == "班子") {
$("#tree").append("<ul id='UnittreeTarget' ><li><span>" + item + "</span></li></ul>");
}
else {
$("#tree").append("<ul id='CardrestreeTarget' ><li><span>" + item + "</span></li></ul>");
}
});
//遍历向div中添加查询到的指标信息
$.each(data, function (i, item) {
if (item.DictionaryName == "班子") {
$("#UnittreeTarget").append("<ul><li><span>" + item.QualitativeTargetName + "</span></li></ul>");
}
else {
$("#CardrestreeTarget").append("<ul><li><span>" + item.QualitativeTargetName + "</span></li></ul>");
}
});
});
}
-</span>

    最终实现的效果图如下(这里只是将资源以一个树的结构显示出来了，并没有实现单击查询的功能)：

二、模仿老系统通过Controller中json转换拼接成树形结构的实战

    这种方法HTML中也只有一句接收代码，js中就一句传递代码，主要代码在Controller中来实现的，代码如下：

    调用后台数据的方法：

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
#region QueryQualitativeTargetByYear 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
/// <summary>
/// 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
/// </summary>
/// <returns></returns>
public string QueryQualitativeTargetByYear()
{

//实例化返回数据的载体-AllQuantifyResultInputViewModel（实例化伟涛写的ViewModel）
List<SetQualitativeTargetViewModel> SetQualitativeTargetViewModel = new List<SetQualitativeTargetViewModel>();

//获取界面传过来的考核年份
string CheckYear1 = Request["CheckYear"];
//将考核年份转换为int类型
int CheckYear = Convert.ToInt32(CheckYear1);

//通过考核年份调用服务端查询定量考核指标名称的方法（调用伟涛写的查询方法）
SetQualitativeTargetViewModel = ISetQualitativeTarget.QueryQualitativeTargetByYear1(CheckYear);

//将查询到的集合按照类型ID排序
var str = from p in SetQualitativeTargetViewModel orderby p.DictionaryID select p;

//实例化一个datatable
DataTable dtTreeInfo = new DataTable();

//添加列头
dtTreeInfo.Columns.Add("id");
dtTreeInfo.Columns.Add("name");
//定义变量
string DictionaryName = "";

foreach (var item in str)
{
//判断去重
if (DictionaryName != item.DictionaryName)
{
//将不重复的值放到datatable中
DictionaryName = item.DictionaryName;
DataRow data = dtTreeInfo.NewRow();
data["id"] = item.DictionaryID;
data["name"] = item.DictionaryName;
dtTreeInfo.Rows.Add(data);
}
}

string strJson = getJson(dtTreeInfo, SetQualitativeTargetViewModel);
//将查询到的数据转换为Json返回到界面上
return strJson;

}
#endregion
-</span>    转换树形js的方法：
<span style="font-family:KaiTi_GB2312;font-size:18px;">-
/// <summary>
/// 节点树的组合-父节点树的遍历-马康-2016-4-5 14:00:35
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public string getJson(DataTable dt, List<SetQualitativeTargetViewModel> SetQualitativeTargetViewModel)
{
//实例化承载字符串的json
StringBuilder json = new StringBuilder();
json.Append("[");

foreach (DataRow dr in dt.Rows)
{
//将传进来的dt转换成只有子节点的dt
DataTable dtChildren = new DataTable();
//添加列头
dtChildren.Columns.Add("id");
dtChildren.Columns.Add("name");

json.Append("{\"id\":" + dr["id"].ToString());
json.Append(",\"text\":\"" + dr["name"].ToString() + "\"");
json.Append(",\"state\":\"closed\"");

//按照类型查询相应的定性指标
var str = from m in SetQualitativeTargetViewModel where (m.DictionaryID.ToString() == dr["id"].ToString()) select m;
//通过循环将查询到的定性指标存放到DataTable中
foreach (var item in str)
{
//实例化一个DataRow
DataRow data = dtChildren.NewRow();
//向DataRow中添加列头
data["id"] = item.QualitativeTargetID;
data["name"] = item.QualitativeTargetName;
//将dataRow中的数据添加到DataTable中
dtChildren.Rows.Add(data);
}

//调用D层方法获取dataTable
if (dtChildren.Rows.Count == 0)
{
return null;
}
//添加树字节点的json
if (dt != null && dt.Rows.Count > 0)
{
json.Append(",\"children\":[");
//调用将子节点转换成json树结构的方法
json.Append(DataTable2Json(dtChildren, dr["id"].ToString()));
json.Append("]");
}
json.Append("},");
}
if (dt.Rows.Count > 0)
{
json.Remove(json.Length - 1, 1);
}
//添加最后的]
json.Append("]");
//返回json
return json.ToString();
}

#region DataTable2Json 子节点树的遍历-马康-2016-4-5 14:04:36
/// <summary>
/// DataTable2Json 子节点树的遍历
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string DataTable2Json(DataTable dt, string pid)
{
//实例化json
StringBuilder jsonBuilder = new StringBuilder();
//循环，将数据转换成树结构的json
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
//实例化并承接表示GUID
Guid id = new Guid(pid);
jsonBuilder.Append("\"");
//将列头字符转换成小写字母
dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower();
//将列头为name转换成text
if (dt.Columns[j].ColumnName == "name") dt.Columns[j].ColumnName = "text";
//添加
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\",");
}

if (dt.Columns.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
jsonBuilder.Append("},");
}
if (dt.Rows.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
return jsonBuilder.ToString();
}
#endregion
-</span>
    这个实现起来比较麻烦，其中涉及了好多拼接转换，真正实现不建议用这样的方式，可以通过这个方式来锻炼一下自己的逻辑能力还是很不错的O(∩_∩)O~

三、使用Easyui通过js控制的实战

    小编这里实现的时候用的是zTree，下面是需要注意的地方以及对应的代码：

    HTML：树Easyui的引用，承载树的代码

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
<script src="../../Content/zTree3.5/js/jquery.ztree.all-3.5.min.js"></script>
<script src="../../Content/zTree3.5/js/jquery.ztree.core-3.5.min.js"></script>
<script src="../../Content/zTree3.5/js/jquery.ztree.excheck-3.5.js"></script>
<link href="../../Content/zTree3.5/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

@*树的加载*@
<div id="tree" class="easyui-panel" data-options="region:'west',split:true" title="定性指标体系" style="width: 200px;">
</div>
-</span>

    js：资源树的查询方法,资源树的单击获取资源树节点ID之后查询内容的方法

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
//通过年份查询定性指标，返回树-马康-2016-3-25 22:22:20
function QueryUnitObjectByYearType() {
//获取下拉框中的年份
var CheckYear = $('#CheckYear').combobox('getValue');

//加载为分配角色树
var tree = {
/**
* 所有的初始化的操作
*/
setting:
{
//定义单击树节点的事件（js中必须有zTreeOnClick这个function）
callback: {
onClick: zTreeOnClick
},
//树的格式
check: {
enable: false,
chkboxType: { "Y": "", "N": "" }
},
//树的数据
data:
{
key:
{
//要显示的字段
name: "QualitativeTargetName"
},
simpleData:
{
enable: true,   //是否显示树形结构
//子节点
idKey: "QualitativeTargetID",
//父节点
pIdKey: "DictionaryID",
rootPId: "0"
}
},
open:true
}
};

//post提交，将查询条件传到controller中，并且接受controller返回回来的数据
$.post("/SetQualitativeTargetLevel/QueryQualitativeTargetByYear?CheckYear=" + CheckYear, {}, function (result) {
//jquery中的zTree方法，放置的容器（$("#tree")），配置（ tree.setting），数据（result）
$.fn.zTree.init($("#tree"), tree.setting, result);
});
}

//全局变量，为了单击的时候将单击的指标ID存入其中，添加的时候使用
var OnclickQualitativeTargetID = "";
//树的单击事件-根据年份和定性指标ID查询定性档次-马康-2016-4-6 22:03:34
function zTreeOnClick(e, treeId, treeNode) {
//获取下拉框中的年份
var CheckYear = $('#CheckYear').combobox('getValue');

//获取单击的指标ID
OnclickQualitativeTargetID = treeNode.QualitativeTargetID;

//定性指标基础信息上面显示单击的定性指标名称
document.getElementById("NodeChild").innerHTML = treeNode.QualitativeTargetName;

//通过年份和指标Id查询未录入成绩的考核对象
$('#dg').datagrid({
url: '/SetQualitativeTargetLevel/QueryQualitativeTargetLevelByTargetYear?CheckYear=' + CheckYear + '&QualitativeTargetID=' + OnclickQualitativeTargetID,
//title: '演示表格使用',
width: "100%",
striped: true, //行背景交换
fitColumns: true,
idField: 'ID',
loadMsg: '正在加载用户的信息...',
pagination: true,
singleSelect: false,

pageList: [10, 20, 30, 40, 50],
pageSize: 10,
pageNumber: 1,
queryParams: {
searchName: $("#searchName").val()
},

}).datagrid("reload");
}
-</span>

    Controller：资源的汇集，这里需要特别注意的是父节点需要当成一行数据和子节点放在一起（可以通过数据库设计到一起，也可以通过代码转换拼接到一起）小编这里是在Controller中进行的拼接

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
#region QueryQualitativeTargetByYear 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
/// <summary>
/// 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
/// </summary>
/// <returns></returns>
public ActionResult QueryQualitativeTargetByYear()
{

//实例化返回数据的载体-AllQuantifyResultInputViewModel（实例化伟涛写的ViewModel）
List<SetQualitativeTargetViewModel> listSetQualitativeTargetVM = new List<SetQualitativeTargetViewModel>();

//获取界面传过来的考核年份
string CheckYear1 = Request["CheckYear"];
//将考核年份转换为int类型
int CheckYear = Convert.ToInt32(CheckYear1);

//通过考核年份调用服务端查询定量考核指标名称的方法（调用伟涛写的查询方法）
listSetQualitativeTargetVM= ISetQualitativeTarget.QueryQualitativeTargetByYear1(CheckYear);

//用linq语句将查询到的集合按照类型ID排序,用这个排序的集合进行循环
//（因为需要往listSetQualitativeTargetVM集合中添加数据，用listSetQualitativeTargetVM集合循环就会出错）
var str = from p in listSetQualitativeTargetVM orderby p.DictionaryID select p;

//定义一个变量来存放名称，去重的时候用到
string DictionaryName = "";
foreach (var item in str)
{
//实例化一个实体
SetQualitativeTargetViewModel enSetQualitativeTargetVM = new SetQualitativeTargetViewModel();
//判断去重
if (DictionaryName != item.DictionaryName)
{
//将不重复的值放到listSetQualitativeTargetVM集合中当成一条数据
DictionaryName = item.DictionaryName;
//将类型ID放入指标ID中
enSetQualitativeTargetVM.QualitativeTargetID = item.DictionaryID;
//将类型名称放入指标名称中
enSetQualitativeTargetVM.QualitativeTargetName = item.DictionaryName;
//将实体添加到list集合中
listSetQualitativeTargetVM.Add(enSetQualitativeTargetVM);
}
}

//将查询到的数据转换为Json返回到界面上
return Json(listSetQualitativeTargetVM, JsonRequestBehavior.AllowGet);
}
#endregion
-</span>

    表结构：这里只需要用到下图红色字体的信息（类型名称是通过类型ID查询得到的）

四、总结收获

    1、非常感谢在小编成长路上给予帮助与指导的师哥师姐

    2、遇到问题先寻找思路很重要

    3、有了思路就马上去践行，切记不要一直思考用那种方法更合适

    4、践行之后的总结很重要，将自己开始到最终的思路缕一遍

    5、搜查自己在实践过程中的局限性，寻求相应的解决办法

    6、不要太在意自己的初速度，要在后天培养自己的加速度（踏实走好每一就是一个培养加速度的践行）

    7、很长时间没有成效不要气馁焦躁，积极主动寻求帮助，站在巨人肩膀上

    8、始终相信自己一定可以揭取最后的桂冠GO GO GO O(∩_∩)O~