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的更多相关文章

  1. asp.net 树形控件 $.fn.zTree.init

    在网页中通过jquery脚本来构筑树形控件将是一个不错的选择,比如有一个文本框,当鼠标点击的时候,像弹出一个下拉框一样弹出一个树形控件,这似乎是一个不错的控制.下面主要讲讲这种树形控件的实现.为了能使 ...

  2. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

  3. jQuery树形控件zTree使用

    http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...

  4. jQuery树形控件zTree

    初始化如下: function zTreeInit(){ parentCode = ""; setting = { view: { dblClickExpand: false, s ...

  5. ztree jquery 树 控件

    插件地址:http://www.ztree.me 数据:[{"id":1,"pId":-1,"name":"根目录"}, ...

  6. jQuery树形菜单,使用zTree插件,异步载入 &amp; 编辑功能&amp;Check 共存

    一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

  7. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  8. js树形控件

    js树形控件 ztree http://www.treejs.cn/

  9. Web应用程序开发,基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

随机推荐

  1. java对象的初始化过程和创建对象的几种方式

    1.加载父类,加载父类的静态属性和静态代码块 2.加载子类,加载子类的静态属性和静态代码块 3.初始化父类中的非静态属性并赋初值,执行父类非静态代码块,执行父类构造. 4.初始化子类中的非静态属性并赋 ...

  2. 1091 Acute Stroke (30)(30 分)

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  3. poj1065 Wooden Sticks[LIS or 贪心]

    地址戳这.N根木棍待处理,每根有个长x宽y,处理第一根花费1代价,之后当处理到的后一根比前一根长或者宽要大时都要重新花费1代价,否则不花费.求最小花费代价.多组数据,N<=5000 本来是奔着贪 ...

  4. 洛谷 U6931 灯光

    题目背景 明天就是校园活动了,小明作为场地的负责人,将一切都布置好了.但是在活动的前几天,校园里的灯却都坏掉了,无奈之下,只好再去买一批灯.但是很遗憾的是,厂家看马上要过年了,就没有在进货了,现在只剩 ...

  5. javacpp-FFmpeg系列补充:FFmpeg解决avformat_find_stream_info检索时间过长问题

    javacpp-ffmpeg系列: javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片 javacpp-FFmpeg系列之2:通用拉流解码器,支持视频拉流解码并转 ...

  6. poj1456Supermarket——并查集压缩查找

    题目:http://poj.org/problem?id=1456 排序+贪心,每次选利润最大的,放在可能的最靠后的日期卖出,利用并查集快速找到下一个符合的日期. 代码如下: #include< ...

  7. jQuery 验证 Validation

    jQuery Validation 目录 简介: Form validation made easy. Validate a simple comment form with inline rules ...

  8. [hdu3078]Network(LCA+排序)

    题意:维护树上两点之间的最短路径,其一,将点a的值变为b,其二,求路径上第k大的值. 解题关键:LCA+sort 复杂度:$O(qn\log n + n\log n)$ 数据弱不怪我 //#pragm ...

  9. CF-816A

    A. Karen and Morning time limit per test 2 seconds memory limit per test 512 megabytes input standar ...

  10. windows7无法启动Telnet服务,出现…

    windows7无法启动Telnet服务,出现错误1068 2012 年 03 月 16 日 在[控制面板--程序--打开或关闭Windows功能]中开启telnet服务器和客户端后,在运行窗口中输入 ...