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中的一些概念：

我们调用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: [10, 20, 30],
            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="zhangsan@gmail.com"},
        new TestModel{id=2,Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
        new TestModel{id=3,Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
    };
    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的地址。

posted on 2014-02-28 17:10 Creater 阅读(395) 评论(0) 收藏举报

刷新页面返回顶部

永不停歇—胡章诚

jqGrid笔记@简单实现

导航

公告