jqGrid常用功能设置 - 夕阳 - ITeye技术网站
博客分类：
这是随便写的一个例子，其中主要为大家演示了一些常用操作：
页面效果如下：
代码如下：
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&jQuery EasyUI&/title&
&!-- 引入css --&
&link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/redmond/jquery-ui-1.8.2.custom.css"&
&link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/ui.jqgrid.css"&
&link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/ui.multiselect.css"&
&!-- 引入js 顺序：jquery、jquery-ui、grid.locale-cn、jqGrid --&
&script type="text/javascript" src="../js/jqGrid/js/jquery.min.js"&&/script&
&script type="text/javascript" src="../js/jqGrid/js/jquery-ui-1.8.2.custom.min.js"&&/script&
&script type="text/javascript" src="../js/jqGrid/js/i18n/grid.locale-cn.js"&&/script&
&script type="text/javascript" src="../js/jqGrid/js/jquery.jqGrid.min.js"&&/script&
&script type="text/javascript" src="../js/jqGrid/mon.js"&&/script&
$(function(){
$("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Check','InvNo','Date', 'Client', 'Amount','Tax','Total','Notes','Modify','Delete'],
colModel:[
{name:'title',index:'title',width:60, align:"center",
formatter:function(cellvalue, options, rowObject){
return "&input type='radio' name='myId' value='"+cellvalue+"'
onclick=\"radioSelect('myId', 'listTable')\" /&";
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100,
cellattr:function(rowId, val, rawObject, cm, rdata) {
return "style='color:font-weight:text-decoration:underline'";
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false},
{name:'operMod',index:'operMod',align:"center",width:"80",
formatter: function (value, grid, rows, state) {
return "&a href=\"#\" style=\"color:#f60\" onclick=\"Modify(" + value + ")\"&Edit&/a&"
{name:'operDel',index:'operDel', width:80,align:"center"}
rownumbers:true,
rownumWidth:40,
caption: "Manipulating Array Data",
gridComplete: function () {
var ids = jQuery("#list4").jqGrid("getDataIDs");
for (var i = 0; i & ids. i++) {
var id = ids[i];
modify = "&a href=\"#\" style=\"color:#f60\" onclick=\"Delete(" + id + ")\"&Delete&/a&";
jQuery("#list4").jqGrid("setRowData", id, { operDel: modify });
var mydata = [
{id:"1",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
for(var i=0;i&=mydata.i++)
$("#list4").jqGrid('addRowData',i+1,mydata[i]);
&table id="list4"&&/table&
&div id="pager"&&/div&
在这个例子中，有一下几个知识点：
1）设置No自增列：
colNames和colModel中不需要做任何设置，只需要添加 rownumbers:true，另外rownumWidth:40是设置这一列的宽度值。
rownumbers:true,
rownumWidth:40,
2）添加一个radioButton列：
在formatter中添加function，返回一个html字符串
{name:'title',index:'title',width:60, align:"center",
formatter:function(cellvalue, options, rowObject){
return "&input type='radio' name='myId' value='"+cellvalue+"'
onclick=\"radioSelect('myId', 'listTable')\" /&";
3）给行内添加按钮：
方法一：在colModel中的列属性中添加：
{name:'operMod',index:'operMod',align:"center",width:"80",
formatter: function (value, grid, rows, state) {
return "&a href=\"#\"
style=\"color:#f60\" onclick=\"Modify(" + value + ")\"&Edit&/a&"
方法二：在gridComplete中添加：
gridComplete: function () {
var ids = jQuery("#list4").jqGrid("getDataIDs");
for (var i = 0; i & ids. i++) {
var id = ids[i];
modify = "&a href=\"#\" style=\"color:#f60\" onclick=\"Delete(" + id + ")\"&Delete&/a&";
jQuery("#list4").jqGrid("setRowData", id, { operDel: modify });
4）改变list中某一列数据的样式，例如颜色，字体等
利用列的cellattr属性：
{name:'name',index:'name', width:100,
cellattr:function(rowId, val, rawObject, cm, rdata) {
return "style='color:font-weight:
text-decoration:underline'";
5）关于jqGrid的theme， 从3.5版本开始，jqGrid完全支持jquery UI的theme。我们可以从/themeroller/下载我们所需要的theme
6）关于datatype: "local"
jqGrid可支持的数据类型：xml、json、jsonp、local or clientSide、xmlstring、jsonstring、script、function (…)。
在初始化的时候，若不想执行表格的初始化方法，则需要设置url为空，datatype设置为"local",否则会有js错误，导致页面上的button按钮不起作用
设置url的值，在.net mvc架构下，即“/controller/action/”这样的格式，第一个"/"是必须的，否则不能进入后台的action中。
在设置了url后，还要注意的问题就是datatype要与postData的数据类型相匹配，否则会有错误。例如datatype:"json",那么postData需要传的是json对象。
最后，例子很随意，凑合着看吧
浏览 12470
wangxiao5530
浏览: 74131 次
来自: 大连
图片都裂了。。看不到了。。我想知道的是，如何把Y轴给设置一下， ...
怎么改变X轴的字体颜色？
一直在找相关文件