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
http://download.csdn.net/detail/djk8888/9891884