【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中很简单的一部分功能，期待以后做更多更优质的界面效果。