吐槽一次MVC与Jq EasyUI的经历

标签: 吐槽 mvc jq | 发表时间:2012-09-24 12:21 | 作者:tyb1222
出处:http://www.cnblogs.com/

MVC在Web开发中的优势(在TDD方面、逻辑与UI的彻底分离)已无需多言,除此之外个人感觉在给UI提供JSON各式的数据也更加方便。

但是总体上说,在公司的这次MVC经历最后的感觉还是比较失败。个人记录下来在此做个反思,同时希望和大家一起交流,向大家学习。

整体项目截图如下:

 

(图1)

首先从以上截图中, 个人就犯错了。从整体架构上来说,项目中的授权部分(Accredit )之前是希望通过AOP的方式进行的,最后和在基础加上的AOP部分就发生了剧烈的冲突。这是一个非常致命的错误!导致只有的AOP上无法进行。

 

 接下来的问题,注意体现就是EasyUI上了。

1、EasyUI数据绑定 

 EasyUI 在统计数据表中比较方便。数据只要有只有配置响应的字段名称就可以很方便的进行绑定。个人目前知道有两种方式:

        方式一、

在页面的加载的时候,使用datagrid方法进行。如下代码:

    

               $('#grid').datagrid({ title: '数据列表',
                iconCls: 'icon-save',
                nowrap: false,
                striped: true,                
                url: '<%Url.Action("LoadMyPostMeetings") %>',
                remoteSort: true,
                fitColumns: true,
                fit: true,
                width:'auto',
                height:'auto',
                idField: 'Guid',
                frozenColumns: [[
                    { field: 'Id', checkbox: true }
                ]],
                columns: [[                    
                    { field: 'Title', title: '标题', width: 80, align: 'left'},
                    {
                        field: 'Time',
                        title: '时间',
                        width: 60,
                        align: 'left',
                        formatter: function(value) {
                            var date = (new Date(parseInt(value.substring(value.indexOf('(') + 1, value.indexOf(')')))));
                            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "  " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                        }
                    },
                    {
                        field: 'ImportantLevel',
                        title: '重要等级',
                        width: 30,
                        align: 'left',
                        formatter: function(value) {
                            switch (value) {
                            case 0:
                                return "普通";
                            case 1:
                                return "重要";
                            default:
                                return "非常重要";                                
                            }                            
                        }
                    },
                    { field: 'Address', title: '会议地点', width: 40, align: 'left' }
                ]],
                pagination: true,
                rownumbers: true,
                onLoadSuccess:function (data){                 
                    if(data.Identity) {
                        for (var i = 0; i < data.rows.length; i++) {
                            if (data.rows[i].IsCompleted == 1) {
                                $(".datagrid-body >table tr").eq(i).find("td:last").find("a").eq(1).removeAttr("href").removeAttr("onclick").attr("title", "已关闭");;
                            }
                        }
                    } else {
                        for (var k = 0; k < data.total; k++) {
                            $(".datagrid-body >table tr").eq(k).find("td:last").find("a").eq(1).removeAttr("href").removeAttr("onclick").attr("title", "已关闭");;
                        }
                    }
                }});  

 

这种方式可以在代码中对所要绑定的数据进行格式化,如以上代码中的formatter 。

            

方式二、由表定义需要显示的字段名称,datagrid函数获取数据进行绑定。如下:

  <table id="userTable"  toolbar="#toolbar" >
    <thead>
        <tr>
                    <th checkbox="true" field="Guid" />
                    <th field="UserName" sortable="true" width="25%">用户名</th>
                    <th field="AccountName" sortable="true" width="25%">账号</th>
                    <th field="BeginIP" sortable="true" width="25%">起始IP</th>
           <th field="EndIP" sortable="true" width="25%">截止IP</th>
         </tr>
    </thead>
        </table> 


 $('#userTable').datagrid({
                    title: '账号列表',
                    iconCls: 'icon-save',
                    nowrap: false,
                    striped: true,
                    url: '<%=Url.Action("LoadUsers") %>',
                    remoteSort: true,
                    fitColumns: true,
                    fit: true,
                    idField: 'Guid',
                    frozenColumns: [[
                        { field: 'Id', checkbox: true }
                    ]]  });  

 

当然 ,像一些EasyUI中设置表格是否分页等信息也可以在表格的HTML中进行设置,datagrid只获取JSON格式的数据然后对表格进行绑定。

 

总结:比较绑定表格的这两种方式,我发现:

一、第一种虽然需在JS中定义需要显示的字段数据,但是对数据可以方便的进行格式化。第二种方式,直接在表格中定义需显示的字段,却不太好对数据进行格式化。

 二、在使用datagrid对表格进行数据绑定的时候,  获取数据的URL信息(如:url: '<%=Url.Action("LoadUsers") %>')在以后是不能变更的。这里的不能变更指的是不能换成另外一个Action进行获取另外的JSON数据对表格进行绑定处理。 当然,如需使用同一个Action进行处理,只是在Action中的参数不同,还是可以这样使用的。

可能以上第二点中说的不是文字表述的不是特别清楚明了,我这里举例进行说明.

 

      (图2) 

如上图,在表格上方有一组操作方法,在其中的【搜索】中,我弹出一个DIV,选中条件然后重新获取数据对表格进行绑定。这时,获取到JSON数据后,这样对表格进行重新绑定:

$("#userTable").datagrid('reload',jsonDatas) 

这样,由于对表格进行reload,又重新指定数据源,表格是显示了正确数据。但是,若此时,对表格的查询结果进行分页,则表格显示的数据不再是查询获取到的数据,而是重新返回到有datagrid中设置的url: '<%=Url.Action("LoadUsers") %>'在你选定的分页上的数据。问题就比较悲剧了。

在这点上,EasyUI也有一种解决问题的方式将 你选定的条件发送到Url指定的Controller进行处理,如下:

$("#userTable").datagrid('load',{'key1':'value1','key2':'value2'}); 

当然,url所指定的Action中需有key1、key2这样的参数。

2、 为列表指定操作区:

为列表指定操作区,如图2。同表格的绑定方式一样,同样有两种方式。

方式一、在表格的datagrid方法中中,通过toolbar指定:如下代码: 
 

 

#("userTable").datagrid({ 

/* 前面表格部分同上,在此省略*/

toolbar: ['-', {
                        id: 'btnSave',
                        text: '添加',
                        iconCls: 'icon-add',
                        handler: function() {
                            this.href = '<%=Url.Action("AddMeeting1") %>/';
                        }
                    },
                    '-', {
                        id: 'btnUpdate',
                        text: '修改',
                        iconCls: 'icon-edit',
                        handler: function(msg) {
                            var row = $('#grid').datagrid('getSelected');
                            if (row) {
                                this.href = '<%=Url.Action("AddMeeting1") %>' + "/" + row.Guid;

                            } else {
                                $.messager.alert('提示', '请选择要修改的数据');
                                return;
                            }
                        }
});

方式二、在表格的HTML中使用easyUI中的toolbar指定。如下代码:


 <table id="dg"  toolbar="#toolbar" > 
      
 </table> 

   <div id="toolbar">
            使用人姓名:<input type="text" name="searchName" id="searchName" />
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="check()">查询</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">增加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="ShowImportUsers()">导入用户数据</a></div>  

        

 这两张方式倒是没有什么不同,只是在第一种方式中,如果要有一个查询的输入框(如下图三:):不知如何写一个input标签到配置的toolbar中,因此第二种方式更占优势。

 

 

3、 在表格的datagrid中设定多少行为已经选中

通常,为了操作批量操作,一般都会在表格第一列显示一个CheckBox。在通过JS,也很容易地将Checkbox勾选上,代码如下:

    for (var i = 0; i < result.Total; i++) { 
  
    $(".datagrid-body input[type=checkbox]:eq(" + i + ")").attr("checked", "checked");
}  

但是千万别以为这样操作了就万事大吉,最重要的问题还有待解决。

在EasyUI中,如果我们将表格手动勾选上以后,是通过$("#userTable").datagrid('getSelections')获取选中的行的。但是以上将Checkbox勾选上的JS,固然是将Table中的行选中了,但通过$("#userTable").datagrid('getSelections')是获取不到行的。

如何将EasyUI绑定的表格行通过JS“真正”绑定上呢,? 答案就是$("#userTable").datagrid('selectRow', i) 。

4、combogrid中的搜索问题:

EasyUI中的combox 也就<Select>,可以手动输入。可以使用如下代码将它动态进行绑定:

 

                   $('#selectUser').combogrid({ 
     panelWidth: 155,
                    idField: 'Guid',
                    textField: 'UserName',
                    fit:true,
                    url: '<%=Url.Action("LoadUserDatas") %>',
                    columns: [[
                        { field: 'UserName', title: '姓名', width: 60 },
                        { field: '', title: '部门', width: 100 }
                    ]]});  

       

同datagrid一样,也是通过url指定的Action进行数据获取。

 

                       (图4)

 由于我这输入后,需要通过选择的文本获取人员的GUID,然后写入库,这种方式可以实现,下拉表中如果搜索到,人员的会自动被选中。也无需单独处理。

 

 

 

 

 

 

 

 

 

 

 

               

 

 

本文链接

相关 [吐槽 mvc jq] 推荐:

吐槽一次MVC与Jq EasyUI的经历

- - 博客园_首页
MVC在Web开发中的优势(在TDD方面、逻辑与UI的彻底分离)已无需多言,除此之外个人感觉在给UI提供JSON各式的数据也更加方便. 但是总体上说,在公司的这次MVC经历最后的感觉还是比较失败. 个人记录下来在此做个反思,同时希望和大家一起交流,向大家学习. 首先从以上截图中, 个人就犯错了. 从整体架构上来说,项目中的授权部分(Accredit )之前是希望通过AOP的方式进行的,最后和在基础加上的AOP部分就发生了剧烈的冲突.

jq 解决iframe高度自适应。

- - Web前端 - ITeye博客
已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

MVC演化史

- huige - 火丁笔记
Martin Fowler在他所写的《企业应用架构模式》一书中感慨道:MVC已经成为我们最常误用的模式. 人们之所以常常误用MVC,很大程度上是因为混淆了不同的MVC变体. 大概上世纪七十年代,Xerox PARC的Trygve提出了MVC的概念,并应用在Smalltalk系统中,为了和其它类型的MVC加以区分,历史上习惯的称之为Classic MVC.

Spring MVC 和 Struts2

- - CSDN博客架构设计推荐文章
Web层面的框架学习了三个Struts1和2,SpringMVC,那他们之间肯定存在一个优劣和适用的环境,Struts1和2的异同点我已经做过对比《 Struts1和Struts2》,这篇将对比下Struts2和SpringMVC的异同,下面数据基本来源于网络,本人是搜集整理所得,供大家参考. 一个项目使用什么样的技术,决定的因素很多,我所能想到的有:对系统的性能、开发的效率、团队学习的成本、业务场景等,下面尽量从这几个方面入手,来分析比较下他们之间存在的优劣.

最佳MVC实践

- - CSDN博客架构设计推荐文章
原文地址 http://www.yiiframework.com/doc/guide/1.1/zh_cn/basics.best-practices 最佳MVC实践(Best MVC Practices). Although Model-View-Controller (MVC) is known by nearly every Web developer, how to properly use MVC in real application development still eludes many people.

srping mvc RequestMapping实现

- - CSDN博客推荐文章
spring mvc中定义请求的url只需要在方法上添加注解: @RequestMapping("aa.mvc")即可定义访问的url地址,但是你是否有考虑过为什么添加这个注解就可以实现url访问地址的定义了呢. 首先定义注解RequestMapping. mvc中常需要对输入值进行合法性校验,所以也定义了校验的注解MyValid.

jQ中文API离线版下载(适用版本1.4.4,1.5,1.5.1,1.5.2,1.6,1.6.1,1.6.2)

- jk - WEB前端开发
在众多网友的要求下jQ中文API离线版(air版本)终于整理完成发布了.

史上最内涵JQ小说—— 一个帅哥和一只蟑螂!!!!!

- 愤怒的青年 - 我们爱讲冷笑话
那个帅哥哼着小曲儿在洗碗,嗯哼嗯哼,哗啦哗啦. 小蟑螂爱屋及乌了,帅哥干什么都好看. 小蟑螂今年一岁多,是三个月前搬到这户人家的. 没办法,上一家的药太厉害了,一下子就把妹妹药死了. 小蟑螂好难过,看着妹妹被纸巾包住,丢进垃圾桶. 小蟑螂再也不敢在那家偷吃东西,饿着肚子逃出来,来到帅哥家. 帅哥妈妈曾经来帮忙撒药,却不知道撒的都是过期货.

MVC就是个选择题

- Dash - Becomin&#39; Charles
由于采用了Web开发框架来开发项目,所以我首次在真正的项目中采用MVC的开发模式. 随着项目的不断深入,我也在不断反思,MVC设计模式到底给项目带来了什么. 听起来都很难听对吗,但是确实如此. 清晰的代码结构,易于维护,易于扩展. 当然,我不是在批判MVC,只是觉得,在使用MVC过程中,还是需要投入更深入的思考,到底怎样才能用好这个设计模式.

表现层模式-MVC

- - 博客园_首页
       在前面简述了从服务层到数据层参见 架构设计目录. 剩下了表现层,一个再好的中间层表现也必须有一个用户界面,提供和用户交互,将用户行为输入转化为系统操作,进入后台逻辑. 在当下RAD(快速应用开发)工具的支持下,我们可以比较快速的完成UI设计,RAD追求所见即所得的快速反馈,快速应用.