最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
asp.net代码部署与服务端获取数据示例
时间:2014-05-05 编辑:简简单单 来源:一聚教程网
我准备写一个ztree使用系列的教程基于asp.net的,希望能坚持下去。
本教程基于一个city.xml的全国数据文件,大家可以到这里下载。
1、Ztree介绍
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。
zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标(依靠css)
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
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串
相关文章
- C#复制数组的两种方式及效率比较解读 10-24
- ASP.NET Identity用法解析 10-24
- ASP.NET MVC使用Identity增删改查用户介绍 10-24
- C语言中atoi函数模拟实现介绍 10-18
- .Net反向代理组件Yarp用法介绍 10-10
- .NET使用YARP通过编码方式配置域名转发实现反向代理教程 10-10