Cherie

A goal is a dream with a deadline.

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chenyanmoting/article/details/47174767
个人分类: 【Web开发】
所属专栏: zTree
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭