【zTree系列】树形结构zTree

        树形结构有多种形式和实现方式，zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单。zTree是一个依靠jQuery实现的多功能“树插件”。它最大的优点是配置灵活，只要id与pid的值相同就可形成一个简单的父子结构。再加上免费开源，使用zTree的人越来越多。

一、概述

       1.实现思路

       假设有两张表：A表、B表，如果B.Id=A.PId，则A与B将可构成树形结构。

       （Id与PId只是两种表示，数据库中不一定是这两个字段。其实一张表也完全可以形成树形结构，不过这样就有点凌乱了。。。）

       2.效果图



二、代码实现
       1.在Html页面中需要加入zTree的引用

<script src="../../Scripts/zTree3.5/js/jquery.ztree.all-3.5.js"></script>
<script src="../../Scripts/zTree3.5/js/jquery.ztree.core-3.5.js"></script>
<script src="../../Scripts/zTree3.5/js/jquery.ztree.excheck-3.5.js"></script>
<link href="../../Scripts/zTree3.5/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

       定义zTree

@*zTree树形结构*@
<div data-options="region:'west',split:true" style="width: 200px;height:400px">
<ul id="tree" class="ztree" style="width: 160px; height: 500px; overflow: auto;"></ul>
</div>

       2.为了方便操作zTree，专门建了一个js文件来实现对它的操作

var tree = {
/**
* 所有的初始化的操作
*/
pFunction: {
zTree: '',
setting:
{
callback: {
onClick: zTreeOnClick
},
check: {
enable: false,
chkboxType: { "Y": "", "N": "" }
},
data:
{
key:
{
name: "JudgeItemName"
},
simpleData:
{
enable: true,
idKey: "JudgeId",
pIdKey: "JudgePId",
rootPId: "0"
}
}
},

//加载资源
loadTree: function () {
$.post("/JudgeItem/GetAllJudgeItem", null, function (judgeInfo) {
$.fn.zTree.init($("#tree"), tree.pFunction.setting, judgeInfo);
});
}
}
};

//单击zTree时触发该函数
function zTreeOnClick(e, treeId, treeNode) {
$('#dg').datagrid({
url: '/JudgeItem/GetJudgeByJudgeId?judgeId=' + treeNode.JudgeId
});
}

//加载zTree
$().ready(function () {
tree.pFunction.loadTree();

});

       3.在Controller中只要查询所有的评分项即可，因为在zTree的data中，我们已经将Id与Pid和Controller传给它的数据进行了关联

#region 获取所有评分项 王静娜 2015-6-15 18:13:19
public ActionResult GetAllJudgeItem()
{
IList<JudgeItemViewModel> judgeList = judgeItemService.QueryAllJudgeItem();

//定义一个新的对象，获取查询到的数据
var ltDate = judgeList.Select(
p => new
{
p.JudgeId,
p.JudgePId,
p.JudgeItemName,
p.JudgeItemContent,
p.Requirement,
p.Score
}
).ToList();

return Json(ltDate, JsonRequestBehavior.AllowGet);
}
#endregion

       树形结构让我们的数据显示起来更有层次感，zTree只是它的一种实现方式，而我们以上用到的只是zTree中很简单的一部分功能，期待以后做更多更优质的界面效果。