EasyUI - Tree 树组件
效果:
数据库设计:
使用的数据:
- 其中的字段,是跟据要生成的树节点的属性定义的。
- text:代表要显示的字段名称。
- state:是否是目录节点。
- iconCls:节点的图标是什么。
- url:跳转的链接。
生成的数据:
html代码:
<ul id ="tree"></ul>
JS代码:
<script type="text/javascript">
$(function () {
$('#tree').tree({
url: '../Json/treejson.ashx',
lines: true, /*
// * 作用:加载所有数据 *
onLoadSuccess: function (node, data) {
//如果data有值
if (data) {
//遍历data中的值
$(data).each(function (index, value) {
//判断当前值得state是否为closed.
//如果是则代表下面依然有值,然后根据此次的id值,进行加载数据
if (this.state == "closed") {
$('#tree').tree('expandAll');
}
});
}
},*/ //鼠标单击事件
onClick: function (node) {
//获取是否有下一级目录,true为没有,false为有
var flag = $('#tab').tree('isLeaf',node.target);
if (flag) {
alert(node.url);
}
}, });
})
</script>
后台使用的/treejson.ashx代码:
using EasyUI.Tools;
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web; namespace EasyUI.Json
{
/// <summary>
/// treejson 的摘要说明
/// </summary>
public class treejson : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
int id = ; if (context.Request["id"] != "")
{
id = Convert.ToInt32(context.Request["id"]);
} #region SQLHelper运行有问题,待改进,此时使用手动数据连接代码。 //SQLHelper运行有问题,待改进,此时使用手动数据连接代码。
DataTable dt = new DataTable();
string connectstring = ConfigurationManager.ConnectionStrings["ConString"].ToString() ;
SqlConnection con = new SqlConnection(connectstring);
con.Open();
SqlDataAdapter adp = new SqlDataAdapter("select id, text, state from Tb_category where pid = " + id + " ", con);
adp.Fill(dt);
con.Close(); #endregion string json = DatatableToJson.ToJson(dt);//将DataTable数据生成Json数据。 context.Response.Write(json);
} public bool IsReusable
{
get
{
return false;
}
}
}
}
EasyUI - Tree 树组件的更多相关文章
- 第二百二十六节,jQuery EasyUI,Tree(树)组件
jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...
- Tree( 树) 组件[4]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一.方法列表 //部分方法onClick : funct ...
- Tree( 树) 组件[3]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 事件列表很多事件的回调函数都包含'node'参数, ...
- Tree( 树) 组件[2]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 异步加载如果想从数据库里获取导航内容, 那么就必须 ...
- Tree( 树) 组件[1]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一. 加载方式//class 加载方式<ul c ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- .NET easyUI tree树状结构
简单的制作后台制作写一个json(string类型)格式 public partial class goodstype_type : System.Web.UI.Page { public strin ...
- .net easyui Tree树
原文:https://www.cnblogs.com/hantianwei/archive/2012/03/19/2407118.html Tree 树 用 $.fn.tree.defaults ...
- EasyUI Tree 树 ——实现多级别菜单的展示,以及与后台数据的交互
一 要引入的js css库 <link type="text/css" href="css/base.css" rel="stylesheet& ...
随机推荐
- zkw费用流模版
/************************************************************** Problem: 3876 User: wangck1998 Langu ...
- java学习之动态代理模式
package com.gh.dynaproxy; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Metho ...
- Ceph之数据分布:CRUSH算法与一致性Hash
转自于:http://www.cnblogs.com/shanno/p/3958298.html?utm_source=tuicool 数据分布是分布式存储系统的一个重要部分,数据分布算法至少要考虑以 ...
- ThinkPHP - 进行继承时的 构造函数
被继承文件:PublicController.class.php <?php namespace Admin\Controller; use Think\Controller; class Pu ...
- Talented Chef(简单题,被我想的太复杂了,用复杂的方法当然会超时咯,由此可见,并非所有题都是想的越多越好)
Description As we all know, Coach Gao is a talented chef, because he is able to cook M dishes in the ...
- C语言,调试必备的DEBUG宏定义
1. #include <stdio.h> #include <stdarg.h> //仅仅是打印函数名字替换 DEBUG <--> printf #define ...
- BZOJ 1458: 士兵占领( 网络流 )
先判无解 把整个棋盘都放上士兵, 只需求最多可以拿走多少个士兵即可.每一行看做一个点r(i), 每一列看做一个点c(i) S->r(i), c(i)->T 连边, 容量为可以拿走的最大士兵 ...
- HDU 3917 最大权闭合图 求最小割
具体参考http://blog.csdn.net/power721/article/details/6665750 TODO //#pragma comment(linker, "/STAC ...
- KVO(键-值观察)
// 1.键-值观察 // 2.它提供一种机制,当指定的对象的属性被修改后,则对象就会接受到通知. // 3.符合KVC(Key-ValuedCoding)机制的对象才可以使用KVO // 4.实现过 ...
- C#实现时间戳转化
/// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name=”timeStamp”></para ...