CYQ.Data 快速开发EasyUI

简介:

EasyUI:

前端UI框架之一, 相对ExtJs来说,算是小了,这两天,抽空看了下EasyUI的相关知识,基本上可以和大伙分享一下:

官网: http://www.jeasyui.com/

学习的话,基本上思路就三个:

一个是Demo,把所有提供的Controls看一遍,然后用到哪个,就去看哪个。

一个是Document,如果某个控件需要用JS编码控制,可能需要看一下相关的API提供的属性,事件和方法。

一个是搜相关的文章,看看一些网上的示例或教程文章。

 

由于EasyUI是基于JQ的语法,所以最好备有JQ的API手册。 

 

EasyUI 易遇到的坑:

如下图,折腾基本的增删改查+分页(费了我不少时间,遇到几个坑):

 

基本用法,可以看官网的Demo,这里说下我遇到的几个问题:

1:分页和加载数据问题: 

一开始由于不知道表格的需要的默认Json格式,所以只能动态绑定数据,大体代码如下:

$.getJSON("json.ashx", function(result){$("#dg").datagrid("loadData",result.data);}

然后又要另外把记录总数赋给分页控件:

$.getJSON("json.ashx", function(result){$("#dg").datagrid("loadData",result.data);$("#db").datagrid("gerPager").pagination({"total":result.count});}

折腾了N久后,发现了Json的格式,只要输出的Json格式按它的要求,只要指定url就可以了,分页控件也会自动绑定,输出的格式为:

复制代码
{"total":"42","errorMsg":"","success":"true","rows":[{"ID":"1","UserName":"22222","CreateTime":"2012/9/27 17:13:52"},{"ID":"2","UserName":"2","CreateTime":"2012/9/27 17:12:05"},{"ID":"3","UserName":"1","CreateTime":"2013/4/18 18:18:22"},{"ID":"7","UserName":"ttttttttttt","CreateTime":"2012/9/27 17:15:33"},{"ID":"8","UserName":"ttttttt","CreateTime":""},{"ID":"9","UserName":"999","CreateTime":""},{"ID":"10","UserName":"2222","CreateTime":""},{"ID":"11","UserName":"333","CreateTime":""},{"ID":"12","UserName":"44","CreateTime":""},{"ID":"13","UserName":"55","CreateTime":""}]}
复制代码

其中total和rows数组是标配字段名,刚好CYQ.Data后台表格的输出代码是count和data,名称不一致,为了更方便支持easyui,只好把输出名改成一致了。

2:重复发送请求的问题:

当通过以下代码指定请求url时,发现请求发送了2次:

复制代码
 $( function () {
                $("#dg").datagrid({
                    "url": "Json.ashx",
                    "pagination": true
                });
            });
复制代码

后来寻得,把html中的class去掉即可。

 <table id="dg" title="My Users" class="easyui-datagrid"
 变更为:
 <table id="dg" title="My Users" 


CYQ.Data 快速开发EasyUI:

为了与EasyUI配合的更方便,我对CYQ.Data框架的JsonHelper这个类小小调整了几个小点,使的开发更爽了一些。 

1:数据加载与分页:

 

前端按EasyUI的Demo,而后端代码可以写成通杀式代码如下:

复制代码
  public  string OutJson( string tName,  int pageIndex,  int pageSize,  string  where)
        {
             string json =  string.Empty;
             using (MAction action =  new MAction(tName))
            {
                json=action.Select(pageIndex, pageSize,  where).ToJson();//输出的格式直接迎合easyUI
            }
             return json;
        }
复制代码

一个URL过来,根据参数指定表名和条件直接返回,通杀。

2:新增加和更新通杀式代码:

 

复制代码
public  string UpdateOrInsert( string tName, int id) //默认easyUI会自动Post数据过来,这里采用自动取值。
        {
             bool result =  false;
             using (MAction action =  new MAction(tName))
            {
                 if (id >  0)
                {
                    result=action.Insert( true);
                }
                 else
                {
                    result=action.Update(id,  true);
                }
            }
             return JsonHelper.OutResult(result, result ?  "" :  " 操作失败! ");//新增的方法,配合easyUI需要的保存提示。
        }
复制代码

3:删除通杀式代码:

 

复制代码
  public  string Delete( string tName,  int id)
        {
             bool result =  false;
             using (MAction action =  new MAction(tName))
            {
               result = action.Delete(id);
            }
             return JsonHelper.OutResult(result, result ?  "" :  " 操作失败! ");
        }
复制代码


基本后台属于小调整就可以通杀了,基础的CRUD开发起来还是相当简单的。

 

补充:界面UI的HTML代码

View Code 

总结:

1:EasyUI这个前端框架还是不错的,虽然商业使用是需要付费的,但是对公司来说小钱,而且多数小公司根本没打算交钱。

2:CYQ.Data 经过小调整,能够更简便的支持EasyUI开发。

3:如果你是用的开源版本V4.55,若需要支持EasyUI,JsonHelper类的输出,把Count变为Total,把data改成rows即可。 


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

相关文章
|
JSON 前端开发 数据格式

热门文章

最新文章