Jquery树形控件 $.fn.zTree.init
https://www.cnblogs.com/jin-/p/4646202.html
asp.net 树形控件 $.fn.zTree.init
在网页中通过jquery脚本来构筑树形控件将是一个不错的选择,比如有一个文本框,当鼠标点击的时候,像弹出一个下拉框一样弹出一个树形控件,
这似乎是一个不错的控制。下面主要讲讲这种树形控件的实现。
为了能使用这种控件,需要中网上下载这个控件的脚本,然后引用到页面中
<script src="/Scripts/jquery.ztree.core-3.5.js"></script>
<script src="/Scripts/jquery.ztree.excheck-3.5.js"></script>
当然还有关于这个控件的样式表
<link href="~/Style/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
这些都可以到网上下载。
首先新建一个网页,添加一个文本框,页面代码如下:

<asp:TextBox runat="server" ID="CitySel" ReadOnly="True" Style="width: 135px;" placeholder="选择地区" onclick="ShowAreaTree(); "></asp:TextBox>
<asp:HiddenField runat="server" ID="HiddenAreaTreeSelID" />
<div id="AreaTreeContent" class="menuContent" style="display: none; position: absolute; margin-left:32.7%;margin-top: 45px; top:0px;left:0px;width:135px;">
<ul id="AreaTree" class="ztree" style="margin-top: 0; width: 135px; height: 300px;"></ul>
</div>

属性placeholder可以使得文本框中有一个默认的文本,但是在鼠标进入这个文本框后,这个默认文本会自动消失。如果不输入数据,待鼠标离开后,这
个默认文本又出现了。HiddenField是一个隐藏域,用来保存选项的code或ID。 ul就是树形控件的节点了。
界面设计好了,现在需要实现的功能是,在页面加载完成后,自动的为这个树形控件填充数据。这同样是通过脚本来完成。

<script type="text/javascript">
$(function () {
$.ajax({
url: "../../ChannelContent/SystemManage/UserManage_JSON.aspx?PostType=AreaTree",
datatype: "json",
context: document.body,
success: function (data) {
$.fn.zTree.init($("#AreaTree"), Areasetting, eval("(" + data + ")"));
}
});
});
</script>

$(function (){})这个函数是在页面加载完成后会自动执行的一个脚本函数。$.ajax可以将业务逻辑转移到url指定的页面的后台代码中去执行,这个页面实际上就是一个空页面,上面也没有。
执行完成后返回的数据放到data中,然后通过$.fn.zTree.init来填充树形控件。Areasetting稍后介绍,这里补充一点关于$.ajax业务逻辑转移的方法。
在UserManage_JSON页面的load方法中,通过string postType = Request["PostType"];来接收传递过来的参数PostType,在load方法的代码如下:
IList<ContentTree> bwAreas = BwAreaManage.GetAreaTree(); string BwAreaJson = JsonConvert.SerializeObject(bwAreas);//将对象转换为jason字符串 Response.Write(BwAreaJson);//返回查询的结果
GetAreaTree函数:

public virtual IList<ContentTree> GetAreaTree()
{
IList<ContentTree> Result = new List<ContentTree>(); ContentTree bwArea = new ContentTree();
bwArea.id = "0";
bwArea.name = ConfigurationManager.AppSettings["AreaTreeRoot"];
bwArea.pId = "-1";
bwArea.open = true;
Result.Add(bwArea); IList<BWAreaEntity> BwAreaList = bwAreaDataAccess.GetAreas(2);//从数据库中获取数据 foreach (BWAreaEntity Area in BwAreaList)
{
ContentTreeEntity newArea = new ContentTreeEntity();
//下面的name和ID是必须要有的,用于显示数据
newArea.id = Area.forgCityCode.ToString();
newArea.name = Area.FCityName;
newArea.pId = Area.ftopId.ToString();
if (Area.ftopId == 0)
{
newArea.open = true;
}
else
{
newArea.open = false;
} Result.Add(newArea);
} return Result;
}

上面的BwAreaJson 是一个jason字符串,内容如图:
在返回这个字符串后,程序又回到了脚本中了。

var Areasetting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
} },
callback: {
onClick: onAreaTreeClick//当选择树中的节点时,调用的函数
}
};

关于Areasetting 的格式可以到网上去查,这里不做解释。
脚本函数onAreaTreeClick:

function onAreaTreeClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("AreaTree"),
nodes = zTree.getSelectedNodes(),
v = "";
var SeleValue;
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 + ",";
SeleValue = nodes[i].id;
}
if (v.length > 0) v = v.substring(0, v.length - 1);
var cityObj = $("#<%=CitySel.ClientID%>");
cityObj.attr("value", v);//这里是将选中项的值写到文本框中
$("#<%=HiddenAreaTreeSelID.ClientID%>").val(SeleValue);
var townCityCode = SeleValue.toString().substr(0, 6);//将选中项的值写到隐藏域 HideAreaTree();
}


//显示地区选择树
function ShowAreaTree() {
//定义下拉树展示时位置
$("#AreaTreeContent").slideDown("fast");//slideDown使用淡出效果来显示被选元素
$("body").bind("mousedown", onBodyDown);//bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。鼠标按下时执行onBodyDown
}
function HideAreaTree() {
$("#AreaTreeContent").fadeOut("fast");//fadeOut使用淡出效果来隐藏被选元素
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "AreaTreeContent" || $(event.target).parents("#AreaTreeContent").length > 0)) {
HideAreaTree();
}
}

OK,到这里,整个树形控件就构筑完了,代码自己慢慢研究吧,看一下效果
Jquery树形控件 $.fn.zTree.init的更多相关文章
- asp.net 树形控件 $.fn.zTree.init
在网页中通过jquery脚本来构筑树形控件将是一个不错的选择,比如有一个文本框,当鼠标点击的时候,像弹出一个下拉框一样弹出一个树形控件,这似乎是一个不错的控制.下面主要讲讲这种树形控件的实现.为了能使 ...
- jQuery树形控件zTree使用小结
作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...
- jQuery树形控件zTree使用
http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...
- jQuery树形控件zTree
初始化如下: function zTreeInit(){ parentCode = ""; setting = { view: { dblClickExpand: false, s ...
- ztree jquery 树 控件
插件地址:http://www.ztree.me 数据:[{"id":1,"pId":-1,"name":"根目录"}, ...
- jQuery树形菜单,使用zTree插件,异步载入 & 编辑功能&Check 共存
一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup=&quo ...
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- js树形控件
js树形控件 ztree http://www.treejs.cn/
- Web应用程序开发,基于Ajax技术的JavaScript树形控件
感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...
随机推荐
- java对象的初始化过程和创建对象的几种方式
1.加载父类,加载父类的静态属性和静态代码块 2.加载子类,加载子类的静态属性和静态代码块 3.初始化父类中的非静态属性并赋初值,执行父类非静态代码块,执行父类构造. 4.初始化子类中的非静态属性并赋 ...
- 1091 Acute Stroke (30)(30 分)
One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...
- poj1065 Wooden Sticks[LIS or 贪心]
地址戳这.N根木棍待处理,每根有个长x宽y,处理第一根花费1代价,之后当处理到的后一根比前一根长或者宽要大时都要重新花费1代价,否则不花费.求最小花费代价.多组数据,N<=5000 本来是奔着贪 ...
- 洛谷 U6931 灯光
题目背景 明天就是校园活动了,小明作为场地的负责人,将一切都布置好了.但是在活动的前几天,校园里的灯却都坏掉了,无奈之下,只好再去买一批灯.但是很遗憾的是,厂家看马上要过年了,就没有在进货了,现在只剩 ...
- javacpp-FFmpeg系列补充:FFmpeg解决avformat_find_stream_info检索时间过长问题
javacpp-ffmpeg系列: javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片 javacpp-FFmpeg系列之2:通用拉流解码器,支持视频拉流解码并转 ...
- poj1456Supermarket——并查集压缩查找
题目:http://poj.org/problem?id=1456 排序+贪心,每次选利润最大的,放在可能的最靠后的日期卖出,利用并查集快速找到下一个符合的日期. 代码如下: #include< ...
- jQuery 验证 Validation
jQuery Validation 目录 简介: Form validation made easy. Validate a simple comment form with inline rules ...
- [hdu3078]Network(LCA+排序)
题意:维护树上两点之间的最短路径,其一,将点a的值变为b,其二,求路径上第k大的值. 解题关键:LCA+sort 复杂度:$O(qn\log n + n\log n)$ 数据弱不怪我 //#pragm ...
- CF-816A
A. Karen and Morning time limit per test 2 seconds memory limit per test 512 megabytes input standar ...
- windows7无法启动Telnet服务,出现…
windows7无法启动Telnet服务,出现错误1068 2012 年 03 月 16 日 在[控制面板--程序--打开或关闭Windows功能]中开启telnet服务器和客户端后,在运行窗口中输入 ...