现在位置首页 / 前端开发 /正文

js树形控件:zTree入门教程

作者: IT小兵 | 2015年11月2日| 热度:℃ | 评论: |参与:

     树形结构有多种形式和实现方式,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中很简单的一部分功能,期待以后做更多更优质的界面效果。

原文:

http://blog.csdn.net/wangjingna/article/details/47174767 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询