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代碼

<! DOCTYPE html >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
     < title ></ title >
     < link rel ="stylesheet" type ="text/css" href ="/easyui/themes/default/easyui.css" >
< link rel ="stylesheet" type ="text/css" href ="/easyui/themes/icon.css" >
     < link rel ="stylesheet" type ="text/css" href ="http://www.jeasyui.com/easyui/demo/demo.css" >

     < script src ="/easyui/jquery.min.js" ></ script >
     < script src ="/easyui/jquery.easyui.min.js" ></ script >
</ head >

< body >
<%--     <div id= " p " class= " easyui-progressbar " style= " width:400px; "></div>
   <script>
        $( function () {
            var value = $( " #p ").progressbar( " getValue ");
             while (value < 100)
            {
                value += 0.1;
                $( " #p ").progressbar( " setValue ",value);
            }
        }
        );
    </script>
    <hr />-- %>

    < table id ="dg" title ="EasyUI+CYQ.Data"   style ="width:550px;height:250px"
        toolbar ="#toolbar" closable ="true"
        rownumbers ="true" fitColumns ="true" singleSelect ="true" >
     < thead >
         < tr >

                 < th field ="firstname" width ="50" >First Name </ th >
                 < th field ="lastname" width ="50" >Last Name </ th >
                 < th field ="phone" width ="50" >Phone </ th >
                 < th field ="email" width ="50" >Email </ th >

            <%-- <th field= " ID " width= " 50 ">ID            </th>
            <th field= " UserName " width= " 50 ">UserName</th>
            <th field= " CreateTime " width= " 50 ">CreateTime</th>-- %>
         </ tr >
     </ thead >
</ table >
      < div id ="toolbar" >
         < a href ="javascript:void(0)" class ="easyui-linkbutton" iconCls ="icon-add" plain ="true" onclick ="newUser()" >New User </ a >
         < a href ="javascript:void(0)" class ="easyui-linkbutton" iconCls ="icon-edit" plain ="true" onclick ="editUser()" >Edit User </ a >
         < a href ="javascript:void(0)" class ="easyui-linkbutton" iconCls ="icon-remove" plain ="true" onclick ="destroyUser()" >Remove User </ a >
     </ div >
         < div id ="dlg" class ="easyui-dialog" style ="width:400px;height:280px;padding:10px 20px"
            closed ="true" buttons ="#dlg-buttons" >
         < div class ="ftitle" >User Information </ div >
         < form id ="fm" method ="post" novalidate >
             < div class ="fitem" >
                 < label >UserName: </ label >
                 < input name ="UserName" class ="easyui-validatebox" required ="true" />
             </ div >
             < div class ="fitem" >
                 < label >CreateTime: </ label >
                 < input name ="CreateTime" />
             </ div >
         </ form >
     </ div >
     < div id ="dlg-buttons" >
         < a href ="javascript:void(0)" class ="easyui-linkbutton" iconCls ="icon-ok" onclick ="saveUser()" >Save </ a >
         < a href ="javascript:void(0)" class ="easyui-linkbutton" iconCls ="icon-cancel" onclick ="javascript:$('#dlg').dialog('close')" >Cancel </ a >
     </ div >

         < input type ="button" onclick ="search();" value ="Search" />
         < script >
             // $.getJSON("json.ashx",function(result){$("#dg").datagrid("loadData",result.data);$("#db").datagrid("gerPager").pagination({"total":result.count});}
             var dg = $('#dg');
             var a = "1";
             var b = "2";
             var qp = { "a": a, "b": b };
             function search()
            {
                a = "2";
                b = "3";
                dg.datagrid("options").queryParams = { "a": a, "b": b };
                dg.datagrid("reload");
            }
            $( function () {
                dg.datagrid({
                    "url": "http://www.jeasyui.com/demo/main/get_users.php",
                    "queryParams": qp,
                    "pagination": true
                });
            });
             function newUser()
            {
                $("#dlg").dialog("open").dialog('setTitle', 'New User');;
                $('#fm').form('clear');
                url = 'json.ashx?t=1';
            }
             function saveUser()
            {
                $('#fm').form('submit', {
                    url: url,
                    onSubmit: function () {
                         return $( this).form('validate');
                    },
                    success: function (result) {
                         var result = eval('(' + result + ')');
                         if (result.errorMsg) {
                            $.messager.show({
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        } else {
                            $('#dlg').dialog('close');         // close the dialog
                            $('#dg').datagrid('reload');     // reload the user data
                        }
                    }
                });
            }
             function editUser()
            {
                 var row = $('#dg').datagrid('getSelected');
                 if (row) {
                    $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
                    $('#fm').form('load', row);
                    url = 'json.ashx?t=2&id=' + row.id;
                }
            }
             function destroyUser() {
                 var row = $('#dg').datagrid('getSelected');
                 if (row) {
                    $.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {
                         if (r) {
                            $.post('json.ashx', { id: row.id }, function (result) {
                                 if (result.success) {
                                    $('#dg').datagrid('reload');     // reload the user data
                                } else {
                                    $.messager.show({     // show error message
                                        title: 'Error',
                                        msg: result.errorMsg
                                    });
                                }
                            }, 'json');
                        }
                    });
                }
            }
         </ script >
      < style type ="text/css" >
        #fm{
            margin: 0;
            padding: 10px 30px;
        }
        .ftitle{
            font-size: 14px;
            font-weight: bold;
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }
        .fitem{
            margin-bottom: 5px;
        }
        .fitem label{
            display: inline-block;
            width: 80px;
        }
     </ style >
</ body >
</ html >

View Code

總結：

1：EasyUI這個前端框架還是不錯的，雖然商業使用是需要付費的，但是對公司來說小錢，而且多數小公司根本沒打算交錢。

2：CYQ.Data 經過小調整，能夠更簡便的支持EasyUI開發。

3：如果你是用的開源版本V4.55，若需要支持EasyUI，JsonHelper類的輸出，把Count變為Total，把data改成rows即可。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CYQ.Data 快速開發之UI（賦值、取值、綁定）原理 cyq.data開源 cyq.data 常見使用方法 CYQ.Data V5 分布式緩存MemCached應用開發介紹 CYQ.Data V5 分布式緩存Redis應用開發及實現算法原理介紹 CYQ.Data 支持 PostgreSQL 數據庫 CYQ.Data V5 MDataTable 專屬篇介紹 CYQ.Data 數據框架使用篇一入門指南---001 CYQ.Data 正式支持 DotNET Core 版本發布 CYQ.Data V5 批量插入與批量更新示例