我和小美的擼碼日記(2)之第一個基於MVC+Jqgrid的列表頁面

一、前言

    “尼瑪哥，上周你教我改了下OA系統UI，黃總看了很滿意呀。”
    “不錯不錯，看來小美進步很大，可以提前結束試用期，到時候加工資別忘了請我吃飯呀！”
    “尼瑪哥，你有女朋友了嗎？”

    “小美，這樣不好吧，雖然我很優秀，你也很不錯，但是我不是因為對你有企圖才教你寫程序呀！當然你執意要這樣的話，我也只好從了你啦。”

    “尼瑪哥，你老人家想多了，我只是想告訴你，像你這么小氣還讓女孩子請吃飯，能交到女朋友才怪。對啦，我們OA系統以前是.net WebForm的，里面的表格都是gridview的，MVC里我都沒找到，這個怎么辦呀？”

    “嗯，gridview是個服務器控制，沒辦法直接在視圖里面用，而且用服務器控件用戶體驗也不好，這次教你個新玩意兒，用jqgrid吧。jqgrid是個js開源的表格插件，輕量級，好控制，效果也很不錯。給你看下官網和我在其它項目中的使用效果”

    Jqgrid官網： http://www.trirand.com/blog/

    “尼瑪哥，搞什么鬼呀，本來很好看的界面，你打什么馬塞克呀，你不知道馬塞克嚴重影響到了人類的進步嗎？”

    “小美，不要在意這些細節，博客園是大家學習知識的地方，所以呢我把有關公司的一些東西打了點碼。重點是在於和大家一起學技術，你看人家Teacher蒼，哪部電影沒打碼，人家不照樣紅。”

二、Jqgrid在MVC中的使用

    “尼瑪哥，jqgrid是個js插件，要怎么樣才以跟MVC結合起來使用呢？”

    “小美，光說你可能不理解，我來舉個栗子，教你做一項基礎資料，做個‘部門管理’，然后一步步跟你來講我是怎么把jqgrid插到你的MVC中去的。”

    “用Jqgrid來展示數據其實很簡單，引入這個插件以后，我們只需塞給它一個Json數據包，馬上一個漂亮的數據列表就可以展現在我們面前。"

    “尼瑪哥，我昨天查了下MVC，它其實就是model、View、Control，model是實體，View是來顯示數據的，Control主要控制前后台的交互；那這個Jqgrid插件應該就是放在View上的吧。”

    “聰明，本來我還想着怎么來跟你解釋下，你自己先預習了，不錯呀，小美。好了，前戲來過了，我們正式開擼吧。”

    “尼瑪哥，Model我直接用代碼生成器給生成了，然后我覺得控制器應該是從后台取到部門列表，然后轉換成Json傳給前台，代碼仿照你上次教我寫菜單Json那樣寫的，你看看可以不。”

/// <summary>
    /// 部門管理控制器
    /// </summary>
    public class DepartmentController : PublicController<Base_Department>
    {
        Base_DepartmentBll base_departmentbll = new Base_DepartmentBll();
        /// <summary>
        /// 【部門管理】返回列表JONS
        /// </summary>
        /// <returns></returns>
        public ActionResult GridListJson(JqGridParam jqgridparam)
        {
            DataTable ListData = base_departmentbll.GetList(ref jqgridparam);
            return Content(ListData.ToJson());
        }
    }

    /// <summary>
    /// 部門管理
    /// <author>
    ///        <name>she</name>
    ///        <date>2014.08.07 12:34</date>
    /// </author>
    /// </summary>
    public class Base_DepartmentBll : RepositoryFactory<Base_Department>
    {
            /// <summary>
        /// 獲取部門 列表
        /// </summary>
        /// <param name="jqgridparam"></param>
        /// <returns></returns>
        public DataTable GetList( ref JqGridParam jqgridparam)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append(@"SELECT  *
                            FROM    ( SELECT    d.DepartmentId ,            --主鍵
                                                c.FullName AS CompanyName ,    --所屬公司
                                                d.CompanyId ,                --所屬公司Id
                                                d.Code ,                    --編碼
                                                d.FullName ,                --部門名稱
                                                d.ShortName ,                --部門簡稱
                                                d.Nature ,                    --部門性質
                                                d.Manager ,                    --負責人
                                                d.Phone ,                    --電話
                                                d.Fax ,                        --傳真
                                                d.Enabled ,                    --有效
                                                d.SortCode,                 --排序嗎
                                                d.Remark                    --說明
                                      FROM      Base_Department d
                                                LEFT JOIN Base_Company c ON c.CompanyId = d.CompanyId
                                    ) T WHERE 1=1 ");
            List<DbParameter> parameter = new List<DbParameter>();
            return Repository().FindTablePageBySql(strSql.ToString(), parameter.ToArray(), ref jqgridparam);
            return Repository().FindTableBySql(strSql.ToString(), parameter.ToArray());
        }
    }

   “不錯呀，學習能力很強，小美你這點很像我呀！”
   “尼瑪哥，那個GetList函數里有個 ref JqGridParam jqgridparam參數，我是照抄過來的，那個參數有什么用呢？”

   “小美，你看下最后調的那個方法FindTablePageBySql，里面都有Page這單詞，明顯是分頁用的。還有了，你現在也能看懂不少代碼了，遇到這類公用方法別光知道調用，自己也F12跳進去看看，對你學開發很有幫助呀。”

   “好了，View層的代碼我來教你寫，其實我也是從官方Demo那里學的。以后你也別光看日語電影了，歐美系列的也看看，以后就能看懂英文文檔，對你提高技術有幫助的。”

 

@{
    ViewBag.Title = "部門管理";
}
<!--框架必需start-->
<link href="~/Content/Styles/learunui-framework.css" rel="stylesheet" />
<script src="~/Content/Scripts/jquery/jquery-1.8.2.min.js"></script>
<script src="~/Content/Scripts/learunui-framework.js"></script>
<!--框架必需end-->
<!--jqgrid表格組件start-->
<script src="~/Content/Scripts/jqgrid/jquery-ui-custom.min.js"></script>
<script src="~/Content/Scripts/jqgrid/grid.locale-cn.js"></script>
<link href="~/Content/Scripts/jqgrid/css/jqgrid.css" rel="stylesheet" />
<script src="~/Content/Scripts/jqgrid/jqGrid.js"></script>
<!--表格組件end-->
<link href="~/Content/Scripts/tree/tree.css" rel="stylesheet" />
<script src="~/Content/Scripts/tree/tree.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        GetGrid("");
    });
    //加載表格
    function GetGrid(CompanyId) {
        $("#gridTable").jqGrid({
            url: "/Department/GridListJson",
            datatype: "json",
            height: $(window).height() - 105,
            autowidth: true,
            colModel: [
                { label: '主鍵', name: 'departmentid', index: "departmentid", hidden: true },
                { label: '編碼', name: 'code', index: "code", width: 80 },
                { label: '部門', name: 'fullname', index: "fullname", width: 100 },
                { label: '簡稱', name: 'shortname', index: "shortname", width: 100 },
                { label: '性質', name: 'nature', index: "nature", width: 100, align: "center" },
                { label: '負責人', name: 'manager', index: "manager", width: 80, align: "center" },
                { label: '電話', name: 'phone', index: "phone", width: 100, align: "center" },
                { label: '傳真', name: 'fax', index: "fax", width: 100, align: "center" },
                { label: '所屬公司', name: 'companyname', index: "companyname", width: 120 },
                {
                    label: '有效', name: 'enabled', index: 'enabled', width: 45, align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>";
                        if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>";
                    }
                },
                { label: '說明', name: 'remark', index: "remark", width: 300 }
            ],
            pager: "#gridPager",
            sortname: 'SortCode',
            sortorder: 'asc',
            rownumbers: true,
            shrinkToFit: false,
            gridview: true,
        });
    }
</script>
<div id="layout" class="layout">
    <div class="layoutPanel layout-center">
        <div class="btnbartitle">
            <div>
                部門列表<span id="CenterTitle"></span>
            </div>
        </div>
        <table id="gridTable"></table>
        <div id="gridPager"></div>
    </div>
</div>

 “尼瑪哥，你以前跟我講前后台交互要用AV技術的，這邊怎么就沒看到Ajax調用的痕跡呢？”

 “小美，你又傻了吧，你看羞羞小電影的時候難道還在辦公室這種公司場所看，肯定是找個地方躲起來偷偷看，Jqgrid是個插件，它當然是封裝了一下，你看那里有個URL參數，我把它指向你控制器里獲取Json的Action，這樣Jqgrid就能獲得返回的Json了。”

 “哦，原來是他們封裝了東西，那gridPager這個分頁的東西，肯定也是后台封裝了東西，不然根本跟列表聯系不上。”

 “對，小美很聰明，這東西是開源的，有時間你也去看一下，對你以后用這插件也會有幫助的，源碼你自己去下。”

 源碼下載地址：http://download.csdn.net/detail/jeff95599/8248247

 “尼瑪哥，你給我的源碼里怎么跟上面的圖片有點不一樣，左側的公司樹怎么不見了？工具欄也沒有。”

 “小美，我都跟你說了，一步步，慢慢來，你先把這個表格弄好了，下周再教你剩下的。”