现在位置首页 / 项目实战 /正文

Ztree教程-asp.net下代码部署及服务端获取数据的例子

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

在比较早的一篇文章中,写了ztree的城市数据加载的例子[Jquery插件--Ztree异步加载多选菜单(城市数据)],发现很多朋友都还是有问题的。

我准备写一个ztree使用系列的教程基于asp.net的,希望能坚持下去。

本教程基于一个city.xml的全国数据文件,大家可以到这里下载。

[Jquery三级省市区县联动选择下拉菜单--自带全国完整xml数据]


1、Ztree介绍 

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

    zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。

zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载

  1. 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

  2. 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

  3. 支持 JSON 数据

  4. 支持静态 和 Ajax 异步加载节点数据

  5. 支持任意更换皮肤 / 自定义图标(依靠css)

  6. 支持极其灵活的 checkbox 或 radio 选择功能

  7. 提供多种事件响应回调

  8. 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟

  9. 在一个页面内可同时生成多个 Tree 实例

  10. 简单的参数配置实现 灵活多变的功能


2、部署说明

我们根据自己代码文件夹的习惯,把ztree的代码copy到你的项目中。

我一般是这样的:

BusinessJs:逻辑js代码

测试文件在根下面

注意:

1、由于需要使用ztree的样式,因此需要zTreeStyle.css和img放在一个同级目录下面。不然你就需要修改css的图片路径

2、完全引用ztree的全部js,根据需要引用。基本上的树功能都在core里面:

  • core 核心包

  •  

  • excheck 扩展

  •  

  • exedit 扩展

  •  

  • exhide 扩展


3、项目实战代码:

引用jquery和ztree core js代码及样式:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试</title>
    <link href="Js/Ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
</head>
<body>
    <ul id="treeDemo" class="ztree"></ul>
    <script src="Js/jquery-1.9.1.js"></script>
    <script src="Js/Ztree/js/jquery.ztree.core-3.5.js"></script>
    <script src="BusinessJs/TestJson.js"></script>
</body>

逻辑js代码TestJson.js 实现ajax请求服务器端的ashx的返回值json串,并调用ztree方法实现绑定。

var AjaxUrl = "service/Cityhandler.ashx"; 
 
 
    var setting = {	};
 
$(document).ready(function(){
    GetCity();
    
});
//获取测试类型统计数据
function GetCity() {
    $.ajax({
        type: "post",
        dataType: "json", traditional: true,
        data: { oper: "city" },
        url: AjaxUrl,
        async: false,//表示同步执行
        success: function (data, textStatus) {
            if (data != null) {
                 
                $.fn.zTree.init($("#treeDemo"),setting , data);
            }
        },
        complete: function (XMLHttpRequest, textStatus) { },
        error: function (e) {
             
            alert("获取测试类型统计数据失败,请刷新页面重新加载!");
        }
    });
}

  $.fn.zTree.init($("#treeDemo"),setting , data); 是Ztree提供的数据绑定方法。

  • 1、setting 配置信息说明

    • 普通使用,无必须设置的参数

    • 与显示相关的内容请参考 API 文档中 setting.view 内的配置信息

    • name、children、title 等属性定义更改请参考 API 文档中 setting.data.key 内的配置信息

  • 2、treeNode 节点数据说明

    • 标准的 JSON 数据需要嵌套表示节点的父子包含关系

      例如:
      var nodes = [
      	{name: "父节点1", children: [
      		{name: "子节点1"},
      		{name: "子节点2"}
      	]}
      ];
    • 默认展开的节点,请设置 treeNode.open 属性

    • 无子节点的父节点,请设置 treeNode.isParent 属性

    • 其他属性说明请参考 API 文档中 "treeNode 节点数据详解"

服务端ashx的方法是负责组织json串,这篇有说明怎么把xml数据转换成json串


下一篇将增加更多的Ztree功能,敬请期待。 


请大家关注我的新浪博客或者腾讯博客。

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

echarts教程系列
本月最热文章

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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