EasyUI ComboTree无限层级异步加载示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.aspx.cs" Inherits="EasuUIDemoTree" %> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyUI ComboTree示例</title>
<!--easyui-->
<link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/icon.css" />
<script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
$(function () {
$("#cbt").combotree({
width: 175,
url: 'EasyUIHandler.ashx?method=combotree',
valueField: 'id',
textField: 'text',
editable: false
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="cbt" class="easyui-combotree"/>
</div>
</form>
</body>
</html>
<%@ WebHandler Language="C#" Class="EasyUIHandler" %> using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Data;
using System.Data.SqlClient; public class EasyUIHandler : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageIndex = MSCL.RequestHelper.GetInt("page", 0); //当前页码
int pageSize = MSCL.RequestHelper.GetInt("rows", 0); //每页显示记录数
string method = MSCL.RequestHelper.GetString("method");//前台传的标示值 string JsonStr = string.Empty;
try
{
switch (method)
{
case "combotree":
//easyui 会每展开一个节点，往后端传一个·id
string parentNodeId = MSCL.RequestHelper.GetString("id") ?? null;
if (string.IsNullOrEmpty(parentNodeId))
{
parentNodeId = "0";
}
List<TreeModule> Toptree = GetSubNodes(parentNodeId);
JsonStr =Newtonsoft.Json.JsonConvert.SerializeObject(Toptree);
break;
default:
break;
}
}
catch (Exception ex)
{
throw;
}
context.Response.Write(JsonStr);
context.Response.End();
} /// <summary>
/// * 获取菜单的树的方法*
/// </summary>
/// <param name="parentNodeId"></param>
/// <returns></returns>
public List<TreeModule> GetSubNodes(string parentNodeId)
{
DataTable dt = CreateDT();
List<TreeModule> Tree = new List<TreeModule>();
TreeModule TM = null;
if (dt != null && dt.Rows.Count > 0)
{
DataRow[] rows = dt.Select("module_fatherid ='" + parentNodeId + "'"); foreach (DataRow item in rows)
{
string id = item["module_id"].ToString();
string text = item["module_name"].ToString();
TM = new TreeModule();
DataRow[] IsNulRows = dt.Select("module_fatherid ='" + id + "'");
if (IsNulRows.Length > 0)
{
//这个很关键，此节点为closed状态，才可以展开，才能往后台传你点击的id
//看到Combotree的异步加载Demo，发现treegrid_data.json中 state="closed" 属性能把点击展开的节点Id传到后台中
TM.state = "closed";
}
TM.id = id;
TM.text = text;
Tree.Add(TM);
}
}
return Tree;
} #region 创建数据
protected static DataTable CreateDT()
{
DataTable dt = new DataTable();
dt.Columns.Add("module_id");
dt.Columns.Add("module_name");
dt.Columns.Add("module_fatherid");
dt.Columns.Add("module_url");
dt.Columns.Add("module_order"); dt.Rows.Add("100", "全国", "0", "", "1");
dt.Rows.Add("10001", "广东", "100", "", "1"); dt.Rows.Add("1000101", "深圳", "10001", "", "100");
dt.Rows.Add("100010101", "南山区", "1000101", "", "1000");
dt.Rows.Add("100010102", "罗湖区", "1000101", "", "1001");
dt.Rows.Add("100010103", "福田区", "1000101", "", "1002");
dt.Rows.Add("100010104", "宝安区", "1000101", "", "1003");
dt.Rows.Add("100010105", "龙岗区", "1000101", "", "1004"); dt.Rows.Add("10001010301", "上梅林", "100010103", "", "1002001");
dt.Rows.Add("10001010302", "下梅林", "100010103", "", "1002002");
dt.Rows.Add("10001010303", "车公庙", "100010103", "", "1002003");
dt.Rows.Add("10001010304", "竹子林", "100010103", "", "1002004");
dt.Rows.Add("10001010305", "八卦岭", "100010103", "", "1002005");
dt.Rows.Add("10001010306", "华强北", "100010103", "", "1002006"); dt.Rows.Add("1000102", "广州", "10001", "", "101");
dt.Rows.Add("100010201", "越秀区", "1000102", "", "1105");
dt.Rows.Add("100010202", "海珠区", "1000102", "", "1106");
dt.Rows.Add("100010203", "天河区", "1000102", "", "1107");
dt.Rows.Add("100010204", "白云区", "1000102", "", "1108");
dt.Rows.Add("100010205", "黄埔区", "1000102", "", "1109");
dt.Rows.Add("100010206", "荔湾区", "1000102", "", "1110");
dt.Rows.Add("100010207", "罗岗区", "1000102", "", "1111");
dt.Rows.Add("100010208", "南沙区", "1000102", "", "1112");
return dt;
}
#endregion public class TreeModule
{
public string id { get; set; }
public string text { get; set; }
public string state { get; set; }
} public bool IsReusable {
get {
return false;
}
}
}
EasyUI ComboTree无限层级异步加载示例的更多相关文章
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点（Tree），点击树生成tab(选项卡)
关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- 【EasyUI学习-2】Easyui Tree的异步加载
作者:ssslinppp 1. 摘要 2. tree的相关介绍 3. 异步加载tree数据,并实现tree的折叠展开 3.1 功能说明: 3.2 前台代码 3.3 后台代码 4. 其他 1 ...
- combotree -下拉框树异步加载
问题: 下拉树数据比较多时,全加载会产生页面延迟,需要实现异步加载 方案: 点击事件加载:先加载部分,点击节点时再展开并追加子节点 onBeforeExpand事件:在展开树前加载,感觉这种方式比较优 ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- CI 笔记7，easyui 异步加载
在做后台导航时,需要异步加载,pid和id的循环问题,在controller中,建立另外一个方法,嵌套循环,查找是否pid〉1. public function nav_list() { $this- ...
- spring mvc easyui tree 异步加载树
使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- PHP+MySQL+Easyui tree菜单从后台加载json数据(一)
实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...
随机推荐
- 转： 【Java并发编程】之五：volatile变量修饰符—意料之外的问题（含代码）
转载请注明出处: volatile用处说明 在JDK1.2之前,Java的内存模型实现总是从主存(即共享内存)读取变量,是不需要进行特别的注意的.而随着JVM的成熟和优化,现在在多线程 ...
- 201521123110 《Java程序设计》第7周学习总结
1. 本章学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { re ...
- 201521123121 《Java程序设计》第1周学习总结
1. 本周学习总结 我们将要重点接触的JAVA SE主要分为4个部分:JVM.JRE.JDK.java语言. 其中JVM作为运行虚拟机隶属于JRE运行环境中,是JAVA通用性.跨平台适应性高的基础保证 ...
- 201521123071 《JAVA程序设计》第十三周学习总结
第13周作业-多线程 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 1.常用端口号:Web服务:80 FTP服务:21 Telnet服务:23 2.网络 ...
- 201521123059 《Java程序设计》第十二周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- 201521123023《Java程序设计》第11周学习总结
1. 本周学习总结 Lock.Condition,互斥同步访问方法,相比于synchronized,相似的wait().notify().notifyAll()方法,还有更多高级的方法 Executo ...
- 201521123110 java课程设计
一.需求分析 功能要求:计算机产生随机数,猜中即胜,猜不中,提示是大了还是小了,继续猜,直至猜到,给出所用时间和评语.保留用户测试成绩,做出成绩排行榜.排行榜存放到文件中. 二.本组课题及本人任务 • ...
- java课程设计---彩票销售管理系统
彩票购买销售系统 1.项目git地址 https://git.oschina.net/fenm/lotterry.git 部分项目地址提交截图 项目主要功能图 团队博客链接 http://www.cn ...
- 201521123110 《Java程序设计》第1周学习总结
第一周学习总结 本周开始了对java的初次学习接触,Java是一门新的编程语言不同于C,由于有了c的基础,对于Java的理解和学习也相对从前学C更容易些. 也学习了Java的诞生发展以及运用包括JVN ...
- Elasticsearch 的分页报错 result window is too large
检查自己分页查询的代码 Pageable pageable = new PageRequest(0, 10000); searchQuery.setPageable(pageable); // 分页效 ...