1、常规的EASY UI的tree和comboTree代码基本是官方的DEMO都有的,虽然很简单,但是还是要实践的做一次,才能更清晰的了解和使用它!先上效果图

因为用的是code first,所以数据库的MODEL我是这样做的,这里面注释了许多,是再设计表结构的时候走的弯路和一些备用的东西。

关键的是ID自己的唯一标示,PID是所属的父级,无非就是一个递归表,也就是无极分类表。当然,这是设计的问题。

其次是显示的文字和点击文字后进入的一些操作。这里我只做了一个显示的文字TEXT还有点击文字后进入的相应链接。这里还可以加入显示的图片等内容!

Menu是数据库的结构,但是我们的tree和ComboTree需要的数据并非数据库里原样的数据,所以,我们针对他们需要的数据设计了2个类。

treedata就是他需要的数据的具体形式。其中attribute就是每个节点里需要的具体内容。参考EASYUI的DEMO和文档,我设计的这2个类。

namespace TOM.Model
{
public class Menu
{
[Key]
[Required]
public int ID { get; set; }
public int? PID { get; set; }
[Required]
[MaxLength()]
public string Text { get; set; }
[StringLength()]
public string URL { get; set; } //[ForeignKey("PID")]
//public virtual Menu Parent { get; set; }
//public virtual ICollection<Menu> Children { get; set; }
}
[NotMapped]
public class TreeData
{
//id: An identity value bind to the node.
public string id { get; set; }
//text: Text to be showed.
public string text { get; set; }
//state: The node state, 'open' or 'closed'.
public string state { get; set; }
//iconCls: The css class to display icon.
public string iconCls { get; set; }
//attributes: Custom attributes bind to the node.
public attribute attributes { get; set; }
//pid: string, parent id
public string pid { get; set; }
////checked: Whether the node is checked.
////public string @checked{get;set;}
//[DataMember(Name = "checked")]
//public string ischecked { get; set; }
////attributes: Custom attributes bind to the node.
//public Dictionary<string, object> attributes { get; set; }
//public List<TreeData> children { get; set; }
////target: Target DOM object.
}
[NotMapped]
public class attribute
{
public string url { get; set; }
//other data
}
}

在EASY UI中,应该就是只有异步树的。当然,你如果按照官方要的数据一次性全都查出来,那么就是同步树了。

每个节点都有一个点击事件,每次点击Tree就会默认的Post一个id给后台(当然是异步的时候,如果已经获取到数据了,它就不在POST)。

这里我做了2个事件。onClick事件,获取到的是节点数据。

此外,还有一个onLoadSuccess,这个是完成异步树的过程,它的任务是这样的,默认我们访问后台数据的时候,首先是'/Menu/AsyncTree',仅仅是一个URL,木有参数

[HttpPost]
public JsonResult AsyncTree(int id = 0)

默认的是给0,那么,也就是先把第一级树节点查出来。

然后,当onLoadSuccess相应的时候,它会判断当前的节点是否有子节点(this.state == 'closed' 有子节点的节点,其状态是closed),如果有子节点,通过 t.tree('expandAll');就会展开这个子节点,那么如果这个子节点下的数据未被获取到,Tree就会默认的POST当前节点的id给后台,让后台去加载其子节点数据,相当于代替人工去click子节点。

也就是说,如果我们加入onLoadSuccess事件,并且通过this.state和 t.tree('expandAll')这2个关键操作,就能够实现异步的,一次性全部加载完毕所有的树(递归)。

如果我们不加入onLoadSuccess事件,也是可以的,那就是真正意义和形式上都是异步的。每次点击节点,如果节点状态是'closed',且,其子节点数据并没有加载,那就Tree就会Post一个ID给后台。

            //-----------异步树-------------------
$('#AsyncMenu').tree({ 
url: '/Menu/AsyncTree',
lines: true,
checkbox: true,
//异步树的点击事件
onClick: function (node) {
if (node.attributes == undefined) {
return;
}
if (node.attributes.url && node.attributes.url.length > 0) {
var src = node.attributes.url;
$.messager.alert('提示', '[' + src + ']!', 'info');
}
},
//异步树全部自动展开
onLoadSuccess: function (node, data) {
var t = $(this);
if (data) {
$(data).each(function (index, d) {
if (this.state == 'closed') {
t.tree('expandAll');
}
});
}
}
});

前台的HTML这样写就可以

<fieldset>
        <legend>异步树</legend>
        <ul id="AsyncMenu"></ul>
    </fieldset>

此外,国人也有高手,扩展了这2个组件,使其支持,ID,PID这样的平滑结构。也就是说,不需要递归,只需要把数据全部一次性的读出来,由扩展方法来完成其节点和子节点的关系映射。节约了不少代码,当然,它就不是异步树了。扩展代码如下。

var sy = sy || {};
/**
* 扩展tree和combotree,使其支持平滑数据格式
*
* @author 孙宇
*
* @requires jQuery,EasyUI
*
*/
sy.loadFilter = {
loadFilter : function(data, parent) {
var opt = $(this).data().tree.options;
var idField, textField, parentField;
if (opt.parentField) {
idField = opt.idField || 'id';
textField = opt.textField || 'text';
parentField = opt.parentField || 'pid';
var i, l, treeData = [], tmpMap = [];
for (i = 0, l = data.length; i < l; i++) {
tmpMap[data[i][idField]] = data[i];
}
for (i = 0, l = data.length; i < l; i++) {
if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
if (!tmpMap[data[i][parentField]]['children'])
tmpMap[data[i][parentField]]['children'] = [];
data[i]['text'] = data[i][textField];
tmpMap[data[i][parentField]]['children'].push(data[i]);
} else {
data[i]['text'] = data[i][textField];
treeData.push(data[i]);
}
}
return treeData;
}
return data;
}
};
$.extend($.fn.combotree.defaults, sy.loadFilter);
$.extend($.fn.tree.defaults, sy.loadFilter);

这样一来,我们使用就相当方便了

  //----------Tree扩展方法(非异步,支持【id,pid】格式)---------------

            $('#ExtMenu').tree({
url: '/Menu/ExtTree',
//指定父节点字段
parentField: 'pid',
lines: true,
checkbox: true,
//点击事件
onClick: function (node) {
if (node.attributes == undefined) {
return;
}
if (node.attributes.url && node.attributes.url.length > 0) {
var src = node.attributes.url;
$.messager.alert('提示', '[' + src + ']!', 'info');
}
}
});
});

前台HTML代码这样写

<fieldset>
        <legend>ComboTree</legend>
        <div style="margin: 10px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
        </div>
        <select id="ComboTree" class="easyui-combotree" style="width: 200px;"
            data-options="url:'/Menu/ExtTree',required:true,parentField: 'pid',value:'1'">
        </select>
    </fieldset>

辅助的几个JS方法如下:

        function getValue() {
var val = $('#ComboTree').combotree('getValue');
$.messager.alert('提示', '[' + val + ']!', 'info');
}
function setValue() {
$('#ComboTree').combotree('setValue', '2');
}
function disable() {
$('#ComboTree').combotree('disable');
}
function enable() {
$('#ComboTree').combotree('enable');
}

后台负责直接把表数据,无脑的都一次性读出来就完事了。

下面附上后台方法。

        #region 异步树
[HttpPost]
public JsonResult AsyncTree(int id = )
{
TOM.DAL.MenuRepository d = new TOM.DAL.MenuRepository();
List<TOM.Model.TreeData> list = new List<TOM.Model.TreeData>();
var query = d.List().Where(m => m.PID == id);
foreach (var item in query)
{
TOM.Model.TreeData temp = new TOM.Model.TreeData();
temp.id = item.ID.ToString();
temp.text = item.Text;
temp.state = hasChild(item.ID) ? "closed" : "open";
temp.iconCls = "icon-add";
temp.attributes = new TOM.Model.attribute() { url = item.URL };
list.Add(temp);
}
return Json(list);
}
/// <summary>
/// 判断是否有子节点
/// </summary>
/// <param name="id">父节点ID</param>
/// <returns>Bool</returns>
private bool hasChild(int id)
{
TOM.DAL.MenuRepository d = new TOM.DAL.MenuRepository();
var query = d.List().Where(m => m.PID == id);
return query.Count() > ;
}
#endregion #region 扩展支持{id=0,pid=0}格式的树
[HttpPost]
public JsonResult ExtTree()
{
TOM.DAL.MenuRepository d = new TOM.DAL.MenuRepository();
List<TOM.Model.TreeData> list = new List<TOM.Model.TreeData>();
var query = d.List();
foreach (var item in query)
{
TOM.Model.TreeData temp = new TOM.Model.TreeData();
temp.id = item.ID.ToString();
temp.pid = item.PID.ToString();
temp.text = item.Text;
temp.iconCls = "icon-add";
temp.attributes = new TOM.Model.attribute() { url = item.URL };
list.Add(temp);
}
return Json(list);
}
#endregion

至于后台方法,看看就好了,本人MVC新手,写的不好。此文章也是我备忘用的。如果能给其他人带来方便那是最好的!

最后附图全部效果

ASP.MVC EASY UI 入门之 —— Tree & ComboTree的更多相关文章

  1. Easy UI 入门

    Easy UI常用于企业级开发的UI和后台开发的UI,比较重. 以下组件中的加载方式,属性和事件,方法和组件种类并不全,只是作为参考和入门学习. 1.Draggable(拖动)组件 不依赖其他组件 1 ...

  2. spring mvc +easy ui +Mybatis 录入数据

    1.itemsEasyui.jsp 应用到的插件及知识点:日期控件My97 ,图片本地预览函数PreviewImage() (1)easy ui 的模态窗口使用时,要指定DIV的属性 data-opt ...

  3. JQuery Easy Ui (Tree树)详解(转)

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  4. 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)

    关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...

  5. easy ui Tree请求跨域数据

    扯淡篇: jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,t ...

  6. asp.net core轻松入门之MVC中Options读取配置文件

    接上一篇中讲到利用Bind方法读取配置文件 ASP.NET Core轻松入门Bind读取配置文件到C#实例 那么在这篇文章中,我将在上一篇文章的基础上,利用Options方法读取配置文件 首先注册MV ...

  7. [MVC.NET] Asp.Net MVC3 简单入门第一季

    转自:http://www.cnblogs.com/fly_dragon/archive/2011/10/12/2208042.html 初识Asp.Net MVC2.0 初识Asp.Net MVC2 ...

  8. ASP.NET Core快速入门(第6章:ASP.NET Core MVC)--学习笔记

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务40:介绍 1.Individual authentication 模板 ...

  9. Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. html中相似的标签、属性的区别

    [1]<i></i> 和 <em></em>标签 相同:都是表示斜体. 区别: (1)<em>表示被强调呈现的内容,<i>是物理 ...

  2. .NET框架设计(常被忽视的框架设计技巧)

    阅读目录: 1.开篇介绍 2.元数据缓存池模式(在运行时构造元数据缓存池) 2.1.元数据设计模式(抽象出对数据的描述数据) 2.2.借助Dynamic来改变IOC.AOP动态绑定的问题 2.3.元数 ...

  3. Nginx状态码499

    1.问题描述 140.207.202.187 - - [18/May/2016:10:30:58 +0800] "POST/v3/violations HTTP/1.1" 499 ...

  4. SQL Server开发接口生成方法

    为提高开发效率,生成固定格式的接口是必须的,以下以提供新增/修改/删除/读取接口为例: 以常见的表结构为例,特殊表结构可自己尝试去调整方法 主要通过系视图 sys.columns生成方法:为包含列的对 ...

  5. ZooKeeper日志与快照文件简单分析

    有用过Zookeeper的都知道zoo.cfg配置文件中有dataDir配置项用于存储数据,不过可能有些人不太清楚这个目录具体存储的是那些数据,默认情况下这个目录是用于存储Log(事务日志)与Snap ...

  6. android 查看解压后的.xml文件代码(axmlprinter2)

    axmlprinter2工具下载地址:http://pan.baidu.com/s/1o67eXtS 方法:1.将要查看的.xml文件复制到AXMLPrinter2.jar所在目录2.通过cmd 输入 ...

  7. 调整busybox中syslogd读取内核printk信息长度

    busybox 默认读取内核printk信息长度256, 通过CONFIG_FEATURE_SYSLOGD_READ_BUFFER_SIZE宏可调整, 如下: #cd busybox-1.21.1#m ...

  8. AngularJS几个基础概念

    作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方.作用域是视图和作用域之间的胶水.在应用将视图渲染并呈现 ...

  9. 新版Microsoft Azure Web管理控制台 - Microsoft Azure New Portal - (1)

    国际版Microsoft Azure的Preview Portal已经于12月2日正式GA,现在登录国际版的Microsoft Azure,默认就会进入Microsoft Azure New Port ...

  10. Openxml入门---Openxm读取Excel数据

    Openxml读取Excel数据: 有些问题,如果当Cell 里面是 日期和浮点型的话,对应的Cell.DataType==Null,对应的时间会转换为一个浮点型,对于这块可以通过DateTime.F ...