easyui的combotree控件绑定json数据demo

最新推荐文章于 2020-01-10 11:29:01 发布

djk8888

最新推荐文章于 2020-01-10 11:29:01 发布

阅读量2k

点赞数

分类专栏： html jquery JS代码 ASP.NET代码文章标签： easyui combotree json demo C#

本文链接：https://blog.csdn.net/djk8888/article/details/74737335

版权

ASP.NET代码同时被 3 个专栏收录

126 篇文章 1 订阅

订阅专栏

html

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

http://download.csdn.net/detail/djk8888/9891884

easyui的combotree控件绑定json数据demo

C#后台生成json串输出，让 easyui-combotree获取json并绑定，然后取得选中节点的值，的简单例子。

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class json : System.Web.UI.Page
{
    public class SEX
    {
        public string sex { get; set; }
    }
    public class People
    {
        public string uid { get; set; }
        public string sex { get; set; }
        public string name { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        //模拟数据，诸君可从自家数据库中取
        DataTable dt = new DataTable();//假如这数据是“根”节点
        dt.Columns.Add("sex", typeof(string));
        dt.Rows.Add( "女");
        dt.Rows.Add( "男");

        DataTable dt1 = new DataTable();//假如这数据是“叶子”节点
        dt1.Columns.Add("uid", typeof(string));
        dt1.Columns.Add("sex", typeof(string));
        dt1.Columns.Add("name", typeof(string));
        dt1.Rows.Add("1", "男", "小明");
        dt1.Rows.Add("2", "女", "小美");
        dt1.Rows.Add("3", "女", "小红");
        dt1.Rows.Add("4", "男", "小强");
        dt1.Rows.Add("5", "男", "小刚");  
        dt1.Rows.Add("6", "女", "小乔");
        dt1.Rows.Add("7", "女", "大乔");
        
        List<SEX> listSex = GetList<SEX>(dt);
        List<People> listPeople = GetList<People>(dt1);
        //拼接json字符串
        string jsonData = "[";
        listSex.ForEach(s =>
        {        
                jsonData += "{";
                jsonData += "\"text\":\"" + s.sex + "\",";
                jsonData += "\"children\":[";
                listPeople.Where(p => p.sex ==s.sex).ToList().ForEach(u =>
                {
                    jsonData += "{";
                    jsonData += "\"id\":\"" + u.uid + "\",";
                    jsonData += "\"text\":\"" + u.name + "\"";
                    jsonData += "}";
                    jsonData += ',';
                });
                jsonData = jsonData.TrimEnd(',');
                jsonData += "]}";
                jsonData += ',';            
        });
        jsonData = jsonData.Substring(0, jsonData.Length - 1);//去掉末尾的 , 逗号
        jsonData += "]";
        //输出json串
        Response.Write(jsonData);
    }
    public static List<T> GetList<T>(DataTable table)
    {
        List<T> list = new List<T>();
        T t = default(T);
        PropertyInfo[] propertypes = null;
        string tempName = string.Empty;
        foreach (DataRow row in table.Rows)
        {
            t = Activator.CreateInstance<T>();
            propertypes = t.GetType().GetProperties();
            foreach (PropertyInfo pro in propertypes)
            {
                tempName = pro.Name;
                if (table.Columns.Contains(tempName))
                {
                    object value = row[tempName];
                    if (!value.ToString().Equals(""))
                    {
                        pro.SetValue(t, value, null);
                    }
                }
            }
            list.Add(t);
        }
        return list.Count == 0 ? null : list;
    }
}

easyui的combotree控件绑定json数据demo。C#后台生成json串输出，让 easyui-combotree获取json并绑定，然后取得选中节点的值，的简单例子。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="Content/themes/icon.css" rel="stylesheet" />
    <script src="Scripts/easyui/jquery.min.js"></script>
    <script src="Scripts/easyui/jquery.easyui.min.js"></script>
    <script src="Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">
        //方法二：可以对combotree各种设置（推荐）↓↓↓↓
        $(function () {
            $('#treePeople').combotree({
                url: 'json.aspx',
                valueField: 'id',
                textField: 'text',
                required: true,
                editable: false,
                onlyLeafCheck: true,
                cascaseCheck: true,
                method: 'get',
                onBeforeSelect: function (node) {
                    if (!$(this).tree('isLeaf', node.target)) {
                        return false;//只可以选择tree的叶子
                    }
                },
            });
        });
        $(function () {
            $("#btnSelect").click(function () {
                var name = $("#treePeople").combotree("getText");//取出选中的文字
                var id = $("#treePeople").combotree("getValue");//取出选中的value
                if (id != "") {
                    //alert(name + "的ID为:" + id);
                    $("#lab").html("<b>"+name + "</b>的ID为:" + id);
                }
                else {
                    $("#lab").html("");
                }
            });
        });
    </script>
</head>
<body>    
    <!--方法二：详见上面的javascript块中代码（推荐）↑↑↑↑-->
    <select class="easyui-combotree" id="treePeople" style="width:200px;" />
    <!--方法一：直接用[url属性]读取json字符串(页面)。已测，可用。-->
    <!--<select class="easyui-combotree" url="json.aspx" id="treePeople" style="width:200px;" />-->
    <input type="button" id="btnSelect" value="选择" style=" margin-left:20px;" />
    <label id="lab" style=" color: red; margin-left: 20px;"></label>
    <hr />
    <div>
        我的腾讯微博：
        <br /><a href="http://t.qq.com/djk8888" target="_blank"><img src="djk8888.png" /></a>
        <br /><a href="http://t.qq.com/djk8888" target="_blank">http://t.qq.com/djk8888</a>
</div>
</body>
</html>

easyui的combotree控件绑定json数据demo。C#后台生成json串输出，让 easyui-combotree获取json并绑定，然后取得选中节点的值，的简单例子。

完整Demo源码下载地址：

http://download.csdn.net/detail/djk8888/9891884

djk8888

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
easyui的combotree控件绑定json数据demo

easyui的combotree控件绑定json数据demo。C#后台生成json串输出，让 easyui-combotree获取json并绑定，然后取得选中节点的值，的简单例子。
复制链接

扫一扫

专栏目录