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常见面试题(二)
1.java集合类 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).JavaSDK不提供直接继承自Collect ...
poj 1330 LCA最近公共祖先
今天学LCA,先照一个模板学习代码,给一个离线算法,主要方法是并查集加上递归思想. 再搞,第一个离线算法是比较常用了,基本离线都用这种方法了,复杂度O(n+q).通过递归思想和并查集来寻找最近公共祖先 ...
oop作业二—circle
oop作业-circle 题目描述编写一个程序,要求根据给定的圆的半径求圆的面积,并将求得的结果打印出来. 要求: 输入输出采用cin和cout. 建立一个工程,将程序写成两个.cpp和一个.h的形 ...
团队作业8----第二次项目冲刺（Beta阶段）第四天
BETA阶段冲刺第四天 1.小会议ing 2.每个人的工作 (1)昨天已完成的工作 1.修改了学生上传的方式: 2.完善了学生和老师修改的代码: (2) 今天计划完成的工作 (3) 工作中遇到的困难: ...
java中synchronized的使用
synchronized是Java中的关键字,是一种同步锁. synchronized分对象锁和类的锁两种. (一)通常synchronized 方法和synchronized(this){}都是属于 ...
201521123082 《Java程序设计》第5周学习总结
201521123082 <Java程序设计>第5周学习总结标签(空格分隔): java 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规 ...
jQuery 简介，与js的对比
jquery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件. <script src="jquery-1 ...
Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作就是封装了JavaScript,能够简化我们写代码的一个JavaScript库为 ...
04面向对象编程-01-创建对象和原型理解（prototype、__proto__）
1.JS中对象的"不同":原型概念从Java中我们可以很好地去理解 "类" 和 "实例" 两个概念,可是在JavaScript中,这个概念 ...
svn服务器配置与客户端的使用
1, Apache Subversion 官网下载地址: http://subversion.apache.org/packages.html#windows 官网下载提供的一般都是最新版本的,如果想 ...

EasyUI ComboTree无限层级异步加载示例

EasyUI ComboTree无限层级异步加载示例的更多相关文章

随机推荐

热门专题