jqGrid使用方法:

原文地址:http://blog.csdn.net/y0ungroc/article/details/12008879

1. 下载文件

1.     下载jqGrid的软件包,目前最新版本为4.4.1 下载地址为: http://www.trirand.com/blog/?page_id=6

2.     下载jQuery文件,目前最新版本为1.8.2 下载地址为: http://code.jquery.com/jquery-1.8.2.min.js

3.     下载jqGrid皮肤,下载地址为: http://jqueryui.com/themeroller/

2. 准备文件

在项目的根目录下,建立相应的文件夹,放入下载的文件,目录结构如下图:

3. 页面中得代码
3.1、head中加入引用
·        css文件引入:
<link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">
·        js文件引入:
<script type="text/javascript" src="jquery-1.8.2.min.js" />
<script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>
3.2、body中的代码
<table id="list4"></table>
<div id="gridPager"></div>

其中,list4为列表jqGrid,gridPager为列表的分页div

3.3、js中的代码
$(document).ready(function(){
    $("#list4").jqGrid({
        url:'/Home/GridData',
        datatype:"json", //数据来源,本地数据
        mtype:"POST",//提交方式
        height:420,//高度,表格高度。可为数值、百分比或'auto'
        //width:1000,//这个宽度不能为百分比
        autowidth:true,//自动宽
        colNames:['订单号','客户编号','客户姓名','客户地址'],

colModel:[
                 {name:'OrderID',index:'OrderID',width:100,align:'left'},
                 {name:'UserID',index:'UserID',width:100,align:'left'},
                 {name:'Name',index:'Name',width:100,align:'left'},
                 {name:'Address',index:'Address',width:200,align:'left'}

],

        rownumbers:true,//添加左侧行号
        //altRows:true,//设置为交替行表格,默认为false

sortName:'OrderID',
              sortorder:'desc',

        viewrecords: true,//是否在浏览导航栏显示记录总数
        rowNum:15,//每页显示记录数
        rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。
        pager:$('#gridPager')
    });
});

至此,整个使用jqGrid的前端使用就基本完毕了,当加载此页面的时候,将初始化jqGrid表格,并通过url请求数据,返回datatype类型的数据。

后台代码:

public ActionResult GridDataShow()

{             return View("GridData");         }

public JsonResult GridData(string sidx,string sord,int page,int rows)

{

int pageIndex = Convert.ToInt32(page)-1;

int pageSize = rows;

int totalRecords = eshop.OrderList.Count();

int totalpages = (int)Math.Ceiling((float)totalRecords/(float)5);

var orders = eshop.OrderList.OrderBy(c=>c.OrderID).Skip(pageIndex * pageSize).Take(pageSize);

var jsonData = new {

total = totalpages,

page = page,

records = totalRecords,

rows = (from order in orders

select new {

i=order.OrderID,

cell=new  {

order.OrderID,

order.UserID,

order.Name,

order.Address

}

} ).ToArray()

};

return Json(jsonData);

}

JqGird的其他用法:

主要是一些基本操作,特殊的数据显示等。

1 刷新 jqGrid 数据。

常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid表格,使用方式如下:

$("#search_btn").click( function (){

// 此处可以添加对查询数据的合法验证

var orderId = $("#orderId").val();

$("#list4").jqGrid('setGridParam',{

datatype:'json',

postData:{'orderId':orderId}, // 发送数据

page:1

}).trigger("reloadGrid"); // 重新载入

});

① setGridParam用于设置jqGrid的options选项。返回jqGrid对象
② datatype为指定发送数据的格式;
③ postData为发送请求的数据,以key:value的形式发送,多个参数可以以逗号”,”间隔;
④ page为指定查询结果跳转到第一页;
⑤ trigger(“reloadGrid”);为重新载入jqGrid表格。

2 无数据的提示信息。

当后台返回数据为空时,jqGrid本身的提示信息在右下角,不是很显眼

loadComplete: function () { // 如果数据不存在,提示信息

var rowNum = $("#list4").jqGrid('getGridParam','records');

if (rowNum      if ($("#norecords").html() == null ){

$("#list4").parent().append("</pre>

<divid="norecords">没有查询记录!</div>

<pre>");

}

$("#norecords").show();

} else { // 如果存在记录,则隐藏提示信息。

$("#norecords").hide();

}

}

① loadComplete 为jqGrid加载完成,执行的方法;

② getGridParam这个方法用来获得jqGrid的选项值。它具有一个可选参数name,name即代表着jqGrid的选项名,如果不传入name参数,则会返回jqGrid整个选项options。例:

$("#list4").jqGrid('getGridParam','records'); // 获取当前 jqGrid 的总记录数;

注意:这段代码要加在jqGrid的选项设置Option之间,即:$(“#list4″).jqGrid({});代码之间。且各个option之间加逗号间隔。

3 显示 jqGrid 统计信息。

通常统计信息都显示在jqGrid表格最后一行,分页控件之上,如下图:

代码片段:

$("#list4").jqGrid({

......

colModel:[

{name:'productName',index:'productName',align:'center',sortable: false },

{name:'productAmt',index:'productAmt',align:'center'}

],

footerrow: true , // 分页上添加一行,用于显示统计信息

......

pager:$('#gridPager'),

gridComplete: function () { // 当表格所有数据都加载完成,处理统计行数据

var rowNum = $( this ).jqGrid('getGridParam','records');

if (rowNum > 0){

var options = {

url:"test.action", // 默认是 form 的 action ,如果写的话,会覆盖 from 的 action.

dataType:"json", //'xml', 'script', or 'json' ( 接受服务端返回的类型 .)

type:"POST",

success: function (data){ // 成功后调用方法

$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});

}

};

$("#searchForm").ajaxSubmit(options);

}

}

});

详细介绍:

3.1 jqGrid的options配置; 需要在jqGrid的options中添加如下属性:

footerrow: true , // 分页上添加一行,用于显示统计信息

3.2  调用gridComplete方法,当数据加载完成后,处理统计行数据;  3.3 调用jqGrid的footerData方法,为统计行赋值:

$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});

4 jqGrid 的数据格式化。

jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置

基本用法:

jQuery("#jqGrid_id").jqGrid({

...

colModel:[

...

{name:'price',index:'price',  formatter:'integer', formatoptions:{thousandsSeparator:','}},

...

]

...

});

formatter主要是设置格式化类型(integer、email等以及函数来支持自定义类型),formatoptions用来设置对应formatter的参数,jqGrid中预定义了常见的格式及其options:

integer

thousandsSeparator: //千分位分隔符,

defaulValue

number

decimalSeparator, //小数分隔符,如”.”

thousandsSeparator, //千分位分隔符,如”,”

decimalPlaces, //小数保留位数

defaulValue

currency

decimalSeparator, //小数分隔符,如”.”

thousandsSeparator, //千分位分隔符,如”,”

decimalPlaces, //小数保留位数

defaulValue,

prefix //前缀,如加上”$”

suffix//后缀

date

srcformat, //source的本来格式

newformat //新格式

email

没有参数,会在该cell是email加上: mailto:name@domain.com

showlink

baseLinkUrl, //在当前cell中加入link的url,如”jq/query.action”

showAction, //在baseLinkUrl后加入&action=actionName

addParam, //在baseLinkUrl后加入额外的参数,如”&name=aaaa”

target,

idName //默认会在baseLinkUrl后加入,如”.action?id=1″。改如果设置idName=”name”,那么”.action?name=1″。其中取值为当前rowid

checkbox

disabled //true/false 默认为true此时的checkbox不能编辑,如当前cell的值是1、0会将1选中

select

设置下拉框,没有参数,需要和colModel里的editoptions配合使用

colModel:[

{name:'id',    index:'id',     formatter:  customFmatter},

{name:'name',  index:'name',   formatter: "showlink",formatoptions:{baseLinkUrl:"save.action",idName: "id",addParam:"&name=123"}},

{name:'price', index:'price',  formatter: "currency", formatoptions:{thousandsSeparator:",",decimalSeparator:".",prefix:"$"}},

{name:'email', index:'email',  formatter: "email"},

{name:'amount',index:'amount', formatter: "number", formatoptions:{thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},

{name:'gender',index:'gender', formatter: "checkbox",formatoptions:{disabled: false }},

{name:'type',  index:'type',   formatter: "select",editoptions:{value:"0:无效;1:正常;2:未知"}}

]

其中customFmatter声明如下:

function customFmatter(cellvalue, options,rowObject){

console.log(cellvalue);

console.log(options);

console.log(rowObject);

return "["+cellvalue+"]";

};

在页面显示的效果如下:

当然还得支持自定义formatter函数,只需要在formatter:customFmatter设置formatter函数,该函数有三个签名:

function customFmatter(cellvalue, options,rowObject){

}

//cellvalue- 当前 cell 的值

//options- 该 cell 的 options 设置,包括 {rowId, colModel,pos,gid}

//rowObject- 当前 cell 所在 row 的值,如 { id=1, name="name1",price=123.1, ...}

当然对于自定义formatter,在修改时需要获取原来的值,这里就提供了unformat函数,这里见官网的例子:

jQuery("#grid_id").jqGrid({

...

colModel:[

...

{name:'price',index:'price', width:60, align:"center", editable: true , formatter:imageFormat,unformat:imageUnFormat},

...

]

...

});

function imageFormat( cellvalue, options,rowObject ){

return '</pre>

<imgsrc="'+cellvalue+'" alt="" />

<pre>';

}

function imageUnFormat( cellvalue, options, cell){

return $('img', cell).attr('src');

}

5 常见错误问题:

chrome报错:

Uncaught TypeError: Cannot read property‘integer’ of undefined

IE报错:

SCRIPT5007: 无法获取属性“integer”的值: 对象为 null 或未定义
出现这样的问题,是由于页面没有添加语言文件的引用导致的
解决办法为:添加语言文件js

<scripttype="text/javascript"src="js/i18n/grid.locale-cn.js"></script>

jqGrid(2)的更多相关文章

  1. jqGrid合并表头

    jqGrid是一款常用的制表软件,最近开发刚好用到.记录一下常用功能留着以后查找顺便发扬一下开源精神. 二级表头是一种经常会碰到的需求,很多时候为了方便查找需要在原有的表头上再加一层,区分表格不同列的 ...

  2. jqGrid插件getCol方法的一个改进

    jgGrid插件是非常常用的一个基于jQuery的表格插件,功能非常强大.我最近也频繁使用.但是这个插件也有一些不够完善的地方.比如这个getCol方法. getCol方法接受三个参数 colname ...

  3. jqgrid+bootstrap样式实践

    jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...

  4. jqGrid jqGrid分页参数+条件查询

    HTML <div class="row"> <div class="col-sm-20"> <form id="for ...

  5. 重复加载同一个jqgrid

    重复加载同一个jqgrid时需要先清除原先的数据,再进行加载新的数据: 清除时使用方法:jQuery.jgrid.gridUnload('jqGridId'); 同时还有一个GridDestroy的方 ...

  6. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  7. 五分钟搭建起一个包含CRUD功能的JqGrid表格

    之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的 ...

  8. [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  9. jqGrid的autoencode参数设置为true在客户端可能引发的编码问题

    不久前使用jqGrid+MVC做过一段时间开发. 一开始,分页参数几乎都是默认值,jqGrid的分页功能很好用. 考虑到each input is evil,我们的系统对安全性又有较高要求,所以,为了 ...

  10. jQuery插件:jqGrid引入及基本属性

    1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...

随机推荐

  1. JavaScript对象的创建之基于构造方法+原型方式

    为了解决原型所带来的问题,此处需要通过组合构造方法和原型来实现对象的创建,将属性在构造方法中定义,将方法在原型中定义.这种有效集合了两者的优点,是目前最为常用的一种方式. function Perso ...

  2. C和C++头文件的不同

    #include <IOSTREAM.h>void main(){    std::cout<<"Hello,World!"<<std::end ...

  3. [转]整理索引碎片,提升SQL Server速度

    数据库表A有十万条记录,查询速度本来还可以,但导入一千条数据后,问题出现了.当选择的数据在原十万条记录之间时,速度还是挺快的:但当选择的数据在这一千条数据之间时,速度变得奇慢. 凭经验,这是索引碎片问 ...

  4. ajax跨域提交

    ajax跨域提交     如果在两个网站之间进行异步互动想要通过ajax时不可能的,因为header不支持xmlhttprequest这种方式的跨域提交. 但是jquery的ajax同时还提供了jso ...

  5. 剑指Offer:面试题4——替换空格(java实现)

    问题描述:请实现一个函数,把字符串中的每个空格替换成"%20". 例如: 输入:"We are happy." 输出:"We%20are%20happ ...

  6. Docker学习总结之docker入门

    Understanding Docker 以下均翻译自Docker官方文档 ,转载请注明:Vikings翻译. What is Docker? Docker 是一个开源的平台,设计目标是可以方便开发, ...

  7. Avl树的基本操作(c语言实现)

    #include<stdio.h> #include<stdlib.h> typedef struct AvlNode *Position; typedef struct Av ...

  8. 使用python脚本实现基于指定字符串的文本排序

    朋友用ansible导出了一个文件,文件中包含上千台机器的磁盘信息,他想要知道哪些机器最需要赶紧扩磁盘.思路是,按剩余磁盘空间百分数,从小到大对文本内容重新排序.下面是具体实现. 源文件ip.txt的 ...

  9. ios开发之OC基础-oc小程序

    本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

  10. UnityVS 2013的使用

    如果已安装旧版,先卸载,然后在安装新版本: 安装完毕后,打开Unity,在Build Settings中设置: Import the Visual Studio Tools Unity package ...