jqGrid笔记@简单实现

jqGrid在MVC中的版本是已经通过 HtmlHelper 的扩展方法封装后的产物,webForm版本貌似也将其封装成了服务器端空间,所以我推荐下载原生的jqGrid版本的地址为:http://www.trirand.com/blog/?page_id=6

推荐的Demo学习网址为:http://trirand.com/blog/jqgrid/jqgrid.html

Documentation:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

 

jqGrid中的一些概念:

griddesc[1]

 

 

 我们调用jqGrid的时候用的语法是:

jQuery( " #grid_id ").jqGrid(options);

这里的option是一系列的键值对,可以是方法、属性值、事件,其中有些是可选的,有些事必须的,你可以将我下面的demo中的options作为参考。

 

第一个jqGrid Demo                                                                                                    

接收json数据时候的前台代码:   
如果要前台要接受xml数据,前台代码请看: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:conventions

<head runat= " server "
    <meta name= " viewport " content= " width=device-width " />

    <script src= " ../../Scripts/jquery-1.7.2.min.js "></script> 
    <script src= " ../../Scripts/jquery-ui-1.8.21.custom.min.js "></script> 
    <script src= " ../../Scripts/grid.locale-en.js "></script> 
    <script src= " ../../Scripts/jquery.jqGrid.min.js "></script>

<script type= " text/javascript "
    $(function () { 
        jQuery( " #list2 ").jqGrid({ 
            url:  ' /Home/ReturnJson '
            datatype:  " json "
            colNames: [ ' Name '' PhoneNo '' EmailAddress '], 
            colModel: [ 
                { name:  ' Name ', index:  ' Name ', width:  55 }, 
                { name:  ' PhoneNo ', index:  ' PhoneNo ', width:  90 }, 
                { name:  ' EmailAddress ', index:  ' EmailAddress ', width:  100 }, 
            ], 
            sortname:  ' Name '
            autoWidth: false
            rowNum:  10
            rowList: [ 102030], 
            pager:  ' #pager2 '
            sortname:  ' id '
            viewrecords:  true
            autoencode:  true
            sortorder:  " desc "
            caption:  " JSON Example "
            jsonReader: { 
                repeatitems:  false 
            }, 
        }); 
        jQuery( " #list2 ").jqGrid( ' navGrid '' #pager2 ', { edit:  false, add:  false, del:  false });

    }) 
</script> 
    <title>Index</title> 
</head> 
<body> 
    <div> 
                <table id= " list2 "></table> 
        <div id= " pager2 "></div> 
    </div> 
</body> 
</html>

 

 
返回json数据的后台代码后台代码:
MVC中返回xml数据时候需要扩展,扩展的方式请看: http://www.cnblogs.com/xfrog/archive/2011/01/06/1929212.html
public ActionResult Second() 

     return View(); 
}

public JsonResult ReturnJson( int page, int rows, string search, string sidx, string sord) 

    TestModel[] data =  new TestModel[] { 
         new TestModel{id= 1,Name= " 张三 ", PhoneNo= " 123 ", EmailAddress= " [email protected] "}, 
         new TestModel{id= 2,Name= " 李四 ", PhoneNo= " 456 ", EmailAddress= " [email protected] "}, 
         new TestModel{id= 3,Name= " 王五 ", PhoneNo= " 789 ", EmailAddress= " [email protected] "}, 
    }; 
     int currentPage = Convert.ToInt32(page)- 1
     int totalRecords = data.Length; 
     var totalPages = ( int)Math.Ceiling(totalRecords/( float)rows);

     var jsonData =  new 
    { 
        page=page, 
        total=totalPages, 
        records=totalRecords, 
        rows = data 
    };

     return Json(jsonData,JsonRequestBehavior.AllowGet); 

 

但我们能够成功的run起来我们的demo以后,如果要实现一些特殊的功能,我们可以从demo中进行学习,在文章额考试我们给出了demo的地址。

 

 

 

 

 

  

你可能感兴趣的:(jqGrid)