EasyUI - 操作 Tree 控件
效果:
HTML代码:
- 使用了模板页
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="Accordions" class="easyui-accordion">
<div title="所有用户" data-options="iconCls:'icon-save',selected:true" style ="padding:0 0 0 10px;">
<ul id="Tree"></ul>
</div>
<div title="密码操作" data-options="iconCls:'icon-reload'">
content2
</div>
<div title="搜索操作" data-options="iconCls:'icon-reload'">
content3
</div>
</div>
</asp:Content>
JavaScript代码:
$(function () {
$('#Tree').tree({
url: "Json/Tree_Node.ashx",
datatype: JSON,
lines: true,
animate: true,
onClick: function (node) {
alert(node.text + node.id);
}
});
})
ashx代码(一般处理程序):
using System.Data;
using System.Web;
using EasyUI.DAL;
using System.Text; namespace EasyUI.Json
{
/// <summary>
/// Tree_Node 的摘要说明
/// </summary>
public class Tree_Node : IHttpHandler
{
DataSet ds = new DataSet();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
DataTable dt = SelectDT();
string json = GetTreeJsonByTable(dt, "ID", "CategoryName", "Url", "ParentID", "");
context.Response.Write(json);
context.Response.End();
} #region 根据DataTable生成EasyUI Tree Json树结构
StringBuilder result = new StringBuilder();
StringBuilder sb = new StringBuilder();
/// <summary>
/// 根据DataTable生成EasyUI Tree Json树结构
/// </summary>
/// <param name="tabel">数据源</param>
/// <param name="idCol">ID列</param>
/// <param name="txtCol">Text列</param>
/// <param name="url">节点Url</param>
/// <param name="rela">关系字段</param>
/// <param name="pId">父ID</param>
private string GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string url, string rela, object pId)
{
result.Append(sb.ToString());
sb.Clear();
if (tabel.Rows.Count > )
{
sb.Append("[");
string filer = string.Format("{0}='{1}'", rela, pId);
DataRow[] rows = tabel.Select(filer);
if (rows.Length > )
{
foreach (DataRow row in rows)
{
sb.Append("{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol] + "\",\"attributes\":\"" + row[url] + "\",\"state\":\"open\"");
if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > )
{
sb.Append(",\"children\":");
GetTreeJsonByTable(tabel, idCol, txtCol, url, rela, row[idCol]);
result.Append(sb.ToString());
sb.Clear();
}
result.Append(sb.ToString());
sb.Clear();
sb.Append("},");
}
sb = sb.Remove(sb.Length - , );
}
sb.Append("]");
result.Append(sb.ToString());
sb.Clear();
}
return result.ToString();
}
#endregion #region 创建数据
/// <summary>
/// 获取数据库中分类数据
/// </summary>
/// <returns></returns>
protected static DataTable SelectDT()
{
DataTable dt = new System.Data.DataTable(); dt = SQLHelper.ExecuteTable("select ID, CategoryName, Url, ParentID from Tb_APCategory", System.Data.CommandType.Text); return dt;
}
#endregion public bool IsReusable
{
get
{
return false;
}
}
}
}
格式化数据为Json数据(核心代码,从上面截取):
#region 根据DataTable生成EasyUI Tree Json树结构
StringBuilder result = new StringBuilder();
StringBuilder sb = new StringBuilder();
/// <summary>
/// 根据DataTable生成EasyUI Tree Json树结构
/// </summary>
/// <param name="tabel">数据源</param>
/// <param name="idCol">ID列</param>
/// <param name="txtCol">Text列</param>
/// <param name="url">节点Url</param>
/// <param name="rela">关系字段</param>
/// <param name="pId">父ID</param>
private string GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string url, string rela, object pId)
{
result.Append(sb.ToString());
sb.Clear();
if (tabel.Rows.Count > )
{
sb.Append("[");
string filer = string.Format("{0}='{1}'", rela, pId);
DataRow[] rows = tabel.Select(filer);
if (rows.Length > )
{
foreach (DataRow row in rows)
{
sb.Append("{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol] + "\",\"attributes\":\"" + row[url] + "\",\"state\":\"open\"");
if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > )
{
sb.Append(",\"children\":");
GetTreeJsonByTable(tabel, idCol, txtCol, url, rela, row[idCol]);
result.Append(sb.ToString());
sb.Clear();
}
result.Append(sb.ToString());
sb.Clear();
sb.Append("},");
}
sb = sb.Remove(sb.Length - , );
}
sb.Append("]");
result.Append(sb.ToString());
sb.Clear();
}
return result.ToString();
}
#endregion
完成。
EasyUI - 操作 Tree 控件的更多相关文章
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
- 递归生成树对象,应用于Easyui,Tree控件
1.生成树节点对象 /// <summary> /// 生成树的节点 /// </summary> public class TreeNode { public TreeNod ...
- 基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- 使用EasyUI的树控件构建Web界面
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面
http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- Jquery easyui的validatebox控件和正则表达式
http://blog.csdn.net/dandanzmc/article/details/36421465 仔细观察jquery.validatebox.js文件,会发现它的验证其实还是采用的正则 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- [WinForm]WinForm跨线程UI操作常用控件类大全
前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...
- 扩展BindingList,防止增加、删除项时自动更新界面而不出现“跨线程操作界面控件 corss thread operation”异常
在做界面程序时,常常需要一些数据类,界面元素通过绑定等方式显示出数据,然而由于UI线程不是线程安全的,一般都需要通过Invoke等方式来调用界面控件.但对于数据绑定bindingList而言,没法响应 ...
随机推荐
- [Swust OJ 179]--火柴棍(找规律)
题目链接:http://acm.swust.edu.cn/problem/0179/ Time limit(ms): 1000 Memory limit(kb): 65535 Descriptio ...
- [置顶] Linux下文件和目录权限说明
在Linux下使用ls -l或者ll命令可以查看文件和文件夹的权限.结果显示类似于: drwxrwxrwx,这里分为四组,分别为文件类型,文件所有者的权限(读写执行),文件所有者所在组用户的权限(读写 ...
- spring-mvc关键点掌握 high level
在本例中,我们将使用Spring MVC框架构建一个入门级web应用程序.Spring MVC 是Spring框架最重要的的模块之一.它以强大的Spring IoC容器为基础,并充分利用容器的特性来简 ...
- DE1-SOC的sof文件无法下载解决办法
按照前面友晶科技的文档介绍一步步的做,后面发现根本无法下载sof文件. 通常思维: 一,器件选错了.器件选择错误会导致sof文件无法下载,至于这个ID具体怎么识别我没有追究.如果是这种错误Quartu ...
- 笔记之Cyclone IV第一卷第四章Cyclone IV器件中的嵌入式乘法器
嵌入式乘法器可以配置成一个 18 × 18 乘法器,或者配置成两个 9 × 9 乘法器.对于那些大于18 × 18 的乘法运算 ,Quartus II 软件会将多个嵌入式乘法器模块级联在一起.虽然没有 ...
- 改ucosii的中断禁止和恢复代码,这是一个荒谬的错误【 mrs msr】
ucosii原来的禁止中断以及恢复中断的代码是最简的,但是使用之前,必须声明一个固定名为 OS_CPU_SR cpu_sr 的变量,吊在那里感觉很怪. ;********************* ...
- Perl概述
@home = ("couch", "chair", "table", "stove"); 数组 数组.一个数组是多个标 ...
- Linux less命令
less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...
- Git现实(四)状态转换
前Git实战(三)环境搭建博文.我们大致解说了一下git的环境安装.今天我们解说一下Git的状态转换. 学习版本号控制工具.对工具进行版本号控制之间的状态转换很重要. 毕竟Git仅仅是一个工具,假设不 ...
- github上的QT源码,必要的时候还是应该看一下,仅凭猜测很容易出错
QCoreApplication::processEvents 他处理的时候拿的是current不是qAppqApp的话,才是和主线程密切相关的 一直觉得QT源码复杂,有点怕,所以没怎么看 我也看不懂 ...