欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET MVC 3程序如何绑定JQuery插件JQgrid

程序员文章站 2022-04-14 10:25:34
今天试用了一些jquery的插件jqgrid,此插件能非常快捷的帮助我们建立一个crud功能的表单,并且具有分页,排序等一些基本功能,非常好用。 这里是jqgrid的下载地址: demo示例:...

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

这里是jqgrid的下载地址:

demo示例:

下面看下实施步骤:

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

[html] 
<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示例中你可以找多更多的属性和事件。

[javascript] 
<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是你需要显示的列名及数据的表现类型。sortname为排序字段,rowlist为分页显示的每页的个数选择,另外我们这里没有使用它自带的增删改查功能,如果你需要使用它们,将代码中的del:false, add: false, edit:false, search: false 设置为true即可。

另外下面的navbuttonadd是我们添加的两个自定义按钮,分别实现了自定义的查看item和search功能。你也可以添加更多按钮实现自己想要的功能。

下面可以看看在后台的action代码如何返回我们需要的数据(可以通过你需要的方式来得到例如linq to sql,entity framework等等,这里我们使用linq作为示例),首先我们需要看看绑定jqgrid数据的这个action需要接收什么样的参数:

[csharp]
public actionresult usermaintenance(string sidx, string sord, int page, int rows) 
sidx为排序字段名(这里为id),sord为排序方式(asc,desc),page为页数,rows为每页大小(page_size)
了解参数的意义之后我们可以根据他们来编写代码,以返回合适的数据。

[csharp] 
strdatacontext context = new strdatacontext(); 
int pageindex = convert.toint32(page) - 1; 
int pagesize = rows; 
int? totalrecord = context. customer.count(); 
int totalpages = (int)math.ceiling((float)totalrecord / (float)pagesize); 
 
var union = from c in context.customer 
            join p in context.group 
            on c.groupid equals p.groupid 
            select new 
            { 
                c.name, 
                c.id, 
                c.active, 
                p.groupname, 
            }; 
var results = from entity in union.orderby(sidx + " " + sord).skip(pageindex * pagesize).take(pagesize) 
              select entity; 
var jsondata = new 

    total = totalpages, 
    page = page, 
    records = totalrecord, 
    rows = (from item in results 
            select new 
            { 
                id = item.id.tostring(), 
                cell = new string[] { 
                    item.name.tostring(), 
                    item.id.tostring(), 
                    item.active.tostring(), 
                    item.groupname.tostring(),                         
                } 
            }).toarray() 
}; 
return json(jsondata, jsonrequestbehavior.allowget); 
这里context是linq to sql生成的context,另一个值得注意的地方是orderby()方法,由于默认的linq orderby方法里面不接受string类型的参数,你可以写lamba表达式来做到这一点,例如 orderby(x => x.id), 但是这样就不能根据输入参数来动态生成linq表达式了,由于不同的排序字段名你需要写多条linq表达式,而这里我们可以以这种方式写的的原因是通过dynamic linq来做到的,大家可以看看这里的资源:

.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx">http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx

推荐大家使用,很方便。