jqGrid的使用和模板样式套用

最新推荐文章于 2018-01-02 17:21:09 发布

david123452

最新推荐文章于 2018-01-02 17:21:09 发布

阅读量496

点赞数

文章标签： json ui xhtml

原文链接：http://www.cnblogs.com/wayo/p/5892716.html

版权

一、环境的准备

需要下载jQuery和jqGrid。

官网： http://www.trirand.com

官方安装文档： http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install

注意：1、如果想支持IE6最好用 jqGrid 4.4.4以下版本+jQuery ui 2.0以下版本

2、如果想支持多表头 jquery.jqGrid-4.3版本及以上

二、jqGrid下载及安装

1、下载需要的jqGrid包

地址： http://www.trirand.com/blog/?page_id=6

2、下载 JQuery UI theme，需要与jqGrid配合使用

地址： http://jqueryui.com/download

3、基本安装：（官方文档）

步骤1：解压jqGrid和UI主题zip文件到一个临时文件夹中。

步骤2：创建一个目录在您的web服务器来保存jqGrid文件和文件夹。例如http://myserver/myproject/

步骤3：根据myproject的文件夹,创建两个额外的目录名为js和css。

步骤4：复制文件jqGrid包css目录下的ui jqgrid.css文件到上面创建的css目录。

重要:不要不小心复制文件ui jqgrid.css从src / css目录的包,这个是开发包，不需要这个

步骤5：复制jqGrid包下整个目录js到上面创建的js目录。

步骤6：复制UI主题包下整个目录css到上面创建的css目录。

三、具体使用

1、引入CSS：

2、引入JS：

因为jqGrid3.6及以后的版本集成了jQuery UI，所以，此处需要导入UI相关js和css。另外grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载，否则会出问题。

3、代码如下

html页面：

jqGrid数据绑定

$(function () {
        $("#list2").jqGrid(
          {
              url: "../JQGridTest/Index",  //这个地方用的是MVC的页面，JQGridTest是控制器的名称，Index是控制器中名为Index的ActionResult方法。
              datatype: "json",
              mtype: 'post',
              colNames: ['编号', '标题', '内容'],
              colModel: [
                  { name: 'NID', width: 200, sortable: false },
                  { name: 'Title', width: 200, sortable: false },
                  { name: 'Concent', width: 200, sortable: false }

              ],
              rowNum: 10,
              rowList: [10, 20, 30],
              pager: jQuery('#pager2'),
              recordtext: "第{0}-{1}条，共{2}条",
              height: '200',
              caption: '信息管理系统'
          })
    })

注意：如果访问不到jqGrid，那说明jQuery和jqGrid的js文件版本对应不起来，需要重新调整搭配。此外一定要注意jqGrid属性的字母大小写。

MVC数据的json返回，参考如下：

 public ActionResult Index()
        {
            NewsBLL bllNews = new NewsBLL();
            List<NewsEntity> listNewsEntity = bllNews.GetNewsList();
            var json = new
            {
                page = 1,
                total = 1,
                records = 4,
                rows = listNewsEntity
            };
            return Json(json, JsonRequestBehavior.AllowGet); 

            //return View();
        }

四、换肤

如果数据显示出来后，样式不正确，需要参考一下文章：https://my.oschina.net/dongqianlin/blog/77318

我是加的过渡性XHTML ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果要换肤可以参考文章：http://www.360doc.com/content/14/0310/09/16002580_359201920.shtml，具体如下：

进入http://jqueryui.com/themeroller/ 下载需要的皮肤。然后替换掉第一个CSS文件（jquery-ui-1.10.4.custom.min.css）即可。

五、两个重要属性

prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。

jsonReader是jqGrid的一个重要选项，用于设置如何解析从Server端发回来的json数据。

转载于:https://www.cnblogs.com/wayo/p/5892716.html

david123452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqGrid的使用和模板样式套用

一、环境的准备需要下载jQuery和jqGrid。官网：http://www.trirand.com官方安装文档：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install注意：1、如果想支持IE6最好用jqGrid4.4.4以下版本+jQuery ui 2.0以下版本2、如...
复制链接

扫一扫