今天试用了一些JQuery的插件JQgrid，此插件能非常快捷的帮助我们建立一个CRUD功能的表单，并且具有分页，排序等一些基本功能，非常好用。

这里是JQgrid的下载地址：

http://www.trirand.com/blog/

Demo示例：

http://www.trirand.com/blog/jqgrid/jqgrid.html

下面看下实施步骤：

首先下载好JQgrid的类库之后，在Layout.cshtml中引用他，那么之后我们就不需要在每一个view中都去引用相同的类库了。这里我引用了这几个文件来帮助我们开发:

    <link href="../../Scripts/JQgrid/jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>

接下来我们可以开始在你需要的view文件中书写以下代码，当然你可以根据喜好来配置它的属性，JQgrid的属性非常之多，在上面的Demo示例中你可以找多更多的属性和事件。

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '/UserView/UserMaintenance', //---necessary
            datatype: 'json',  //---necessary
            mtype: "GET", //---necessary  
            //datatype: 'local', //----add
            //data: mydata, // ---add
            colNames: ['Name', 'ID', 'Active', 'Customer Group'], //----edit
            colModel: [
       { name: 'Name', index: 'Name', width: 500, sortable: false },
       { name: 'CP_CSTMR_ID', index: 'CP_CSTMR_ID', width: 100 },
       { name: 'Active', index: 'Active', width: 100, sortable: false },
       { name: 'Customer Group', index: 'Customer Group', width: 100, sortable: false} //----edit
                          ],
            pager: '#pager',
            rowNum: 10,
            sortname: 'CP_CSTMR_ID',
            sortable: true,
            sortorder: 'asc',
            rowList: [10, 15, 20],
            viewrecords: true,
            caption: 'User Maintenance list',
            height: 230,
            loadtext: 'Loading Data please wait ...',
            postData:
            {
                name: function () { return jQuery("#name").val(); },
                active: function () { return jQuery("#active option:selected").val(); }
            },
            onSortCol: function (index, colindex, sortorder) {
            }
            //            gridComplete: function()
            //            {
            //                $(window).resize(function(){ 
            //                var winwidth=$(window).width()*0.5; 
            //                $("#list").setGridWidth(winwidth);
            //                })
            //            }
        });
        jQuery("#list")
        .jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false }, {}, {}, {}, { multipleSearch: false })
        .navButtonAdd('#pager', {
            caption: "Search",
            buttonicon: "ui-icon-search",
            onClickButton: function () {
               
            },
            position: "last",
            id:"searchButton"
        })
        .navButtonAdd('#pager', {
                    caption: "View Detail",
                    buttonicon: "ui-icon-detail",
                    id: "viewdetails",
                    onClickButton: function () {
                        test();
                    },
                    position: "last"
                })
        //jQuery("#list").jqGrid('filterToolbar', options);  
    });
</Script>

这里我们简单介绍以下，url指的是数据源对应的Action，也就是说JQgrid将从这个Action中获取数据，并且指定需要Json数据。ColName和ColMode是你需要显示的列名及数