asp.net代码部署与服务端获取数据示例

作者：袖梨 2022-06-25

我准备写一个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 数据需要嵌套表示节点的父子包含关系

例如：