CYQ.Data+EasyUI开发:几个相关的问题CheckBox、Tree、TreeGrid

前言:

话说到新的公司已经呆了三个星期了,从上班的第二天开始就一直在写项目文档和给开发人员培训,以至于我的QQ签名从"我不是来搞培训的“到最后直接换成”我是来搞培训的“。

虽然挂名开发经理,但下面目前就2人,手下的人虽然混过了2年工龄,但连进程,线程,泛型,面向对象等基础都摸不着头脑的小女孩,要指望她们写代码,只好时不时的抽空给讲基础了。

话说下周的下周还会从Boss的母校里招来二十几个学生过来实习,要我分解项目,写出详细的文档,然后简单培训下学生,让学生看着文档就能干活,明白了我是来搞培训的。

好了,玩笑过后,下面讲讲当前用EasyUI遇到的几点问题:

1:兼容IE8问题

话说当前最新版本easyUI 1.3.4不支持ie8,听说是jq2.0不支持的原因,只好降级使用到easyui 1.3.2,对应的jq1.8版本。

2:Form表单的CheckBox问题

easyUI有个Form表单的自动赋值:$("#id").form('load',json);

一开始用这样的代码:


using (MAction action = new MAction(TableNames.Roles))
{
   if (action.Fill(ID))
   {
     return  action.Data.ToJson();
   }
}

结果发现返回的json怎么也给checkbox赋不了值,网上也没对应的资料好寻,最后调一下js,看到普通的input赋值,想到了on。

于是把返回的true替换成on,[action.Data.ToJson().Replace("True", "on")] 就可以了。

 

3:DataGrid里的CheckBox问题:

对于表格,需要将某些bool型的字段格式化成checkbox显示,找到了半天,发现只有用formatter格式化出来自己的样式:

 var formatCheckBox = function (value, row, index) {
        if (value == "1" || value == "True") {
            return "<input type='checkbox' checked='checked' disabled='disabled' />";
        } else {
            return "<input type='checkbox' disabled='disabled'  />";
        }
    }

然后界面指定:

 <th  data-options="field:'IsEnabled',formatter:formatCheckBox" > 是否启用</th>

悲催的是,格式出来的控件,没有对应的API可以获取相关的值,目前的处理方法只好通过增加点击事件,来处理后续状态改变后值的提交。

4:Tree 的绑定(MDataTable表格直接转Json,不用多次查询数据库):

研究了一下Tree的绑定的json格式,然后写了一个递归函数,直接把一个MDataTable转成树型的Json。


 // string id,string parentID,string text,string state,string url
        /// <summary>
        /// 将表格转成Tree对应的Json,对应的字段为(id,parentiID,text,state,url)
        /// </summary>
        /// <param name="dt"></param>
        /// <param name="parentID">为0或为空</param>
        /// <returns></returns>
        public static string ToTreeJson(MDataTable dt, string parentID)
        {
            List<MDataRow> firstDt = dt.FindAll("ParentID='" + parentID + "'");//第一级菜单
            if (firstDt.Count > 0)
            {
                MDataRow row = null;
                JsonHelper json = new JsonHelper();
                string id, text, url;
                for (int i = 0; i < firstDt.Count; i++)
                {
                    row = firstDt[i];
                    id = row.Get<string>("id");
                    text = row.Get<string>("text");
                    json.Add("id", id);
                    json.Add("text", text);

                    url = row.Get<string>("url");
                    if (!string.IsNullOrEmpty(url))
                    {
                        json.Add("attributes", "{\"url\":\"" + url + "\"}", true);
                    }
                    string children = ToTreeJson(dt, id);
                    if (!string.IsNullOrEmpty(children))
                    {
                        if (row.Get<bool>("state"))
                        {
                            json.Add("state", "closed");
                        }
                        json.Add("children", children, true);
                    }
                    json.AddBr();
                }
                return json.ToString(true);
            }
            return string.Empty;


对于传进来的MDataTable,需要修改列名和对应的字段对上,然后保留一个通用的上级字段(ParentID)就可以了,最终就出来这种格式了。

 

5:TreeGrid的绑定:

在功能权限这一块,需要用到TreeGrid这种格式,最终发现决定上下级的json,是叫“_parentId”,还有该字段不能指定一个不存在的上级,不然不显示。

对于这个,我也写了一个简单的转换函数:

 /// <summary>
        /// 将表格转成GreeGrid对应的Json.
        /// </summary>
        /// <param name="dt"></param>
        /// <returns></returns>
        public static string ToTreeGridJson(MDataTable dt)
        {
            int index = dt.Columns.GetIndex("ParentID");
            if (index > -1)
            {
                dt.Columns[index].ColumnName = "_parentId";
                int value = 0;
                foreach (MDataRow row in dt.Rows)
                {
                    value = row.Get<int>(index);
                    if (value == 0 || row.Get<int>("id") == value)//GreeGrid不存在的父ID不能出现
                    {
                        row[index].Value = DBNull.Value;
                    }
                }
            }
            return dt.ToJson(true, false);
        }

树形的效果就出来了:

 

目前项目刚开始,只遇到并处理了这几个基本的问题,后续若有问题待定。 

总结:

话说男女搭配,干活不累,是有那么点道理。

本文原创发表于博客园,作者为路过秋天,原文链接:http://www.cnblogs.com/cyq1162/p/3389414.html 

时间: 2024-08-04 13:10:30

CYQ.Data+EasyUI开发:几个相关的问题CheckBox、Tree、TreeGrid的相关文章

CYQ.Data 快速开发EasyUI

EasyUI: 前端UI框架之一, 相对ExtJs来说,算是小了,这两天,抽空看了下EasyUI的相关知识,基本上可以和大伙分享一下: 官网: http://www.jeasyui.com/ 学习的话,基本上思路就三个: 一个是Demo,把所有提供的Controls看一遍,然后用到哪个,就去看哪个. 一个是Document,如果某个控件需要用JS编码控制,可能需要看一下相关的API提供的属性,事件和方法. 一个是搜相关的文章,看看一些网上的示例或教程文章.   由于EasyUI是基于JQ的语法,

CYQ.Data V5 分布式缓存Redis应用开发及实现算法原理介绍

前言: 自从CYQ.Data框架出了数据库读写分离.分布式缓存MemCache.自动缓存等大功能之后,就进入了频繁的细节打磨优化阶段. 从以下的更新列表就可以看出来了,3个月更新了100条次功能: + View Code 其实更多的时间,是放在ASP.NET Aries 业务开发框架上,上里下外全部重构了一遍. 前几天,决定把Redis集成进来,一鼓作气,解决了. 下面分享一下经历: 最初的想法: 一开始我是拒绝的,不愿动态调用第三方的客户端(关联依赖的dll太多). 最近打算支持Redis,有

CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09)

事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便支持wpf的开发,同时,框架仍保留最低.net framework2.0版本的支持. 支持WPF的起因: CYQ.Data 一直是基于2.0语法下支持开发的框架,在未直接支持WPF之前,对于控件列表的绑定,因为WPF竟然不支持DataTable,研究后发现需要从MDataTable.ToDataTable().DefaultView来转一次绑定:另外对于UI控件,也只能

CYQ.Data 数据框架 跨平台应用开发

昨天发布的一篇:CYQ.Data 数据框架 性能评测 为大伙揭开了CYQ.Data 的性能体验,在写数据方面,表现的相当接近原始的ADO.NET操作.   那在数据读取方面呢? 有兴趣的朋友可自行测试一下.   本篇为你揭开的是:CYQ.Data 能否跨平台应用开发? 相信大伙都有点知道,.NET 跨平台,目前也只能折腾Mono了.   杂七几句: 早些时期[从我的文章时期看,去年4月份],领导找我谈过话. 问:.NET 能不能跨平台,如果能跨平台,公司就没必要养一个Java的团队. 因为公司的

终于等到你:CYQ.Data V5系列 (ORM数据层)最新版本开源了

前言: 不要问我框架为什么从收费授权转到免费开源,人生没有那么多为什么,这些年我开源的东西并不少,虽然这个是最核心的,看淡了就也没什么了. 群里的网友:太平说: 记得一年前你开源另一个项目的时候我就说过  这么多年 秋天有两点没变 一是还是单身 另外一个就是cyq.data还没开源  终于等到开源了! 也许吧,只有把cyq.data最终开源了,才能解决单身问题,不然我在这上面花的时间太多,都没时间和妹子聊天了.   几个重要网址: 源码SVN地址:https://github.com/cyq11

CYQ.Data 从入门到放弃ORM系列:开篇:自动化框架编程思维

前言: 随着CYQ.Data 开始回归免费使用之后,发现用户的情绪越来越激动,为了保持这持续的激动性,让我有了开源的念头. 同时,由于框架经过这5-6年来的不断演进,以前发的早期教程已经太落后了,包括使用方式,及相关介绍,都容易引人误解. 为此,我打算重新写个系列来介绍最新的版本,让大伙从传统的ORM编程过渡到自动化框架型思维编程(自已造的词). 于是:这个新系列的名称就叫:CYQ.Data 从入门到放弃ORM系列 什么是:CYQ.Data 1:它是一个ORM框架. 2:它是一个数据层组件. 3

CYQ.Data 轻量数据层之路 SQLHelper 回头太难(八)

提前说明:正如网友反映的一样,为了不至于产生明显的误导,特别加了此首段说明 SQLHelper,几乎是每个过来者必经的阶段,写好一个SQLHelper是非常重要的一环,所以希望年轻的来者,要多加实践,别只看不动手,哪怕照着写一写,也是相当的有益. 对于本框架系列,希望年轻来者在掌握使用的同时,动手照着系列文章写一写,如果照着写出来的,相信成长不是一点半点的:别光看不练,最后只能忽悠却动不了手.       这篇文章很不好写,我在电脑前思索了一天,也不知怎么下手. 关于SQLHelper的文章遍地

CYQ.Data 快速开发之UI(赋值、取值、绑定)原理

昨夜园子猴子问了几个我CYQ.Data使用的小问题,经过简单解答后,他表示"妈妈再也不用担心我的学习",并于事后以资鼓励,希望这框架越走越好. 除了技术上的交流,双方在生活,S上面的问题上也进行了双边友好交流,最后猴子给发了一个国外的Sex网站,对此分享行为,我表示高度赞赏.   好了,言归正题,讲点技术问题: CYQ.Data 的使用操作方式,已经有相关文章介绍了,就不再介绍了. 本节就讲一下实现原理,具体源码,可直接下载开源的V4.0可以学习. 下载地址:http://www.cy

CYQ.Data 轻量数据层之路 V2.0 震撼惊世 支持多数据库/内置Aop(二十五)

所有文章索引:CYQ.Data 轻量数据层之路 框架开源系列 索引   前言: 从V1.5发布到现在时隔20天了,终于发布2.0版本了,2.0系列版本由于引入多数据库支持,内部结构改动较大. 但是外面调用方式仍保持一致向下兼容,因此若从原来V1.N版本升级到2.N版本,只需要轻轻更换CYQ.Data.DLL即可,界面代码不需要改变.   疑问? 最近26号才刚发布了V1.5.5,怎么才3天又发布了2.0版本?就这么点时间改动就很大,那不是很不稳定? 解疑: V1.5.5版本是拿V1.5版本的源码