【zTree系列】树形结构zTree

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

一、概述

       1.实现思路

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

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

       2.效果图

【zTree系列】树形结构zTree_第1张图片

二、代码实现

       1.在Html页面中需要加入zTree的引用




       定义zTree
@*zTree树形结构*@
           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 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中很简单的一部分功能,期待以后做更多更优质的界面效果。

    你可能感兴趣的:(【Web开发】,zTree)