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

zTree+ashx获取数据形成树形demo

作者: IT小兵 | 2016年5月12日| 热度:℃ | 评论: |参与:

本周分享过[Ztree教程-asp.net下代码部署及服务端获取数据的例子],今天再次分享一下。ztree+asp.net ashx的例子。

使用zTree实现的效果如下:

即当鼠标点击进入文本框时,即通过ashx文件访问数据库后弹出zTree信息框。当点击窗口其他区域时此信息框隐藏。在这里,访问数据库的代码省略。

具体实现的代码如下:

1、html代码:

<!DOCTYPE html>
<html>
<head>
    <title>ZTREE DEMO </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="../plugins/JQuery_zTree_v2.5/demo/zTreeStyle/zTreeStyle.css" rel="Stylesheet"
        type="text/css" />
    <link href="../plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/util/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../plugins/zTree/js/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript">
		<!--
        var setting = {
            view: {
                showLine: false,
//                showIcon: showIconForTree,
                dblClickExpand: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: onClick
            }
        };
        function createTree() {
            var zNodes;
            $.ajax({
                type: 'POST',
                url: '../../caseTypeHandler.ashx?action=GetCaseType', //url  action是方法的名称
                data: { id: "0" },
                dataType: "text", //可以是text,如果用text,返回的结果为字符串;如果需要json格式的,可是设置为json
                ContentType: "application/json; charset=utf-8",
                success: function (data) {
                    zNodes = data;
                    $.fn.zTree.init($("#treeDemo"), setting, eval('(' + zNodes + ')'));
                },
                error: function (msg) {
                    alert("失败");
                }
            });
        }
        $(document).ready(function () {
            createTree();
        });
        // 控制父节点不显示图标
        function showIconForTree(treeId, treeNode) {
            return !treeNode.isParent;
        };
        function beforeClick(treeId, treeNode) {
            var check = (treeNode && !treeNode.isParent);
            if (!check) alert("请不要选择类别...");
            return check;
        }
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes(),
			v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var nameObj = $("#nameSel");
            nameObj.attr("value", v);
            var n = "";
            for (var i = 0, l = nodes.length; i < l; i++) {
                n += nodes[i].id + ",";
            }
            if (n.length > 0) n = n.substring(0, n.length - 1);
            nameObj.attr("nameid", n);
            hideMenu();
        }
        function showMenu() {
            var nameObj = $("#nameSel");
            var nameOffset = $("#nameSel").offset();
            $("#menuContent").css({ left: nameOffset.left + "px", top: nameOffset.top + nameObj.outerHeight() + "px" }).slideDown("fast");
            $("body").bind("mousedown", onBodyDown);
        }
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        // 当点击窗口其他区域时zTree消息框隐藏
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }
		//-->
    </script>
    <style type="text/css">
        ul.ztree
        {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            height: 360px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="content_wrap">
        <div class="zTreeDemoBackground">
            <ul class="list">
                <li class="title"><span class="content_txt">name:</span>
                    <input id="nameSel" type="text" readonly value="" nameid="" onclick="showMenu(); return false;" />
                </li>
            </ul>
        </div>
        <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
            <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">
            </ul>
        </div>
    </div>
</body>
</html>

2、zTree添加自定义属性

zTree节点中添加自定义的属性键值,

可以直接在js中,如下。其中,attr是添加的自定义属性。

var zNodes =[
            { id:1, pId:0, name:"pNode 1", open:true, attr:"id1"},
            { id:11, pId:1, name:"pNode 11", attr:"id11"},
            { id:111, pId:11, name:"leaf node 111", attr:"id111"},
            { id:112, pId:11, name:"leaf node 112", attr:"id112"},
            { id:12, pId:1, name:"pNode 12", attr:"id12"},
            { id:2, pId:0, name:"pNode 2", attr:"id2"},
            { id:21, pId:2, name:"pNode 21", open:true, attr:"id21"}
];

也可以通过json转化到js对象来添加属性。

调用此属性的方式如下:

var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTree.getSelectedNodes();
nodes.sort(function compare(a, b) { return a.id - b.id; });
var v = "";
for (var i = 0, l = nodes.length; i < l; i++) {
        v += nodes[i].attr+ ",";
    }
if (v.length > 0) v = v.substring(0, v.length - 1);
alert("The attr value of selected nodes:"+v.toString());


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

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:[email protected]

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

echarts教程系列
本月最热文章

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

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