jqGrid用法匯總(全經(jīng)典)
支持多種類型的數(shù)據(jù)集合作為數(shù)據(jù)源
jqGrid可以綁定三種類型的數(shù)據(jù):XML,JSON和數(shù)組。使用不同的數(shù)據(jù)類型主要是設(shè)置datatype屬性,它的值分別為'xml','json','local'(數(shù)組)
$("#grid1").jqgrid(
........
datatype: "xml",
........
);
下面則列舉各種數(shù)據(jù)類型的格式
XML格式：
<rows> <page></page> <total></total> <records></records> <row id="rowid"> <cell>value1</cell> ......... <cell>valueN</cell> </row> </rows>
json格式
{"page":"頁(yè)號(hào)","rows":[{name1:'value1',name2:'value2',.....nameN:'valueN'},.... {....} ], "total":記錄數(shù),"records":總記錄數(shù)}
數(shù)組格式
var datas=[
{name1:'value1',name2:'value2',..... nameN:'valueN'},
....
{....}
];
//把數(shù)據(jù)添加到j(luò)qgrid里
for (var i = 0; i <= mydata.length; i++) {
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
}
或者設(shè)置data屬性
$("#grid1").jqgrid(
......
data:mydata, datatype:'local',
.......
);
統(tǒng)計(jì)運(yùn)算的功能
將footerrow設(shè)為true,綁定gridComplete事件。
$("#grid1").jqgrid(......
footerrow: true,
gridComplete: completeMethod,
.......);
function completeMethod()
{
var sum_amount=$("#grid1").getCol('amount',false,'sum');
var sum_tax=$("#grid1").getCol('tax',false,'sum');
var sum_total=$("#grid1").getCol('total',false,'sum');
$("#grid1").footerData('set', { name: '合計(jì):', amount: sum_amount, tax: sum_tax, total: sum_total });
}
統(tǒng)計(jì)時(shí)利用getCol方法，第一個(gè)參數(shù)為colMode的name值，第二個(gè)設(shè)為false，否則會(huì)返回一個(gè)數(shù)組而不是但一個(gè)數(shù)據(jù)，第三個(gè)是設(shè)置統(tǒng)計(jì)方式，有'sum','avg'和'count'。
排序
只要單擊列的標(biāo)題，就可以對(duì)該列進(jìn)行升序或降序的排序。設(shè)置該列是否允許排序，在列的屬性里設(shè)置sortable，同時(shí)對(duì)于不同的數(shù)據(jù)類型，也需要設(shè)置其相應(yīng)的排序類型sorttype，類型有int/integer 整型,float/number/currency 浮點(diǎn)型，date 日期，text 文本，function 定義函數(shù)來實(shí)現(xiàn)自定的排序規(guī)則。
$("#grid1").jqgrid( ........
colModel: [
.........
{ name: 'id', index: 'id', width: 60, myexport: true, editable: true , sorttype: "int", sortable: true},
.............
],
........);
分組
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
jQuery("#list48").jqGrid({
data: mydata,
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#plist48",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name']
},
caption: "Grouping Array Data"
});
還有復(fù)雜一點(diǎn)的排序，那還是上jqGrid Demos看看吧！
篩選
jqGrid的篩選并不是在grid里面的內(nèi)容進(jìn)行篩選，其實(shí)是對(duì)數(shù)據(jù)庫(kù)里的數(shù)據(jù)篩選查詢。
html:
<table id="s2list"></table> <div id="s2pager"></div>
javascript:
jQuery("#s3list").jqGrid('navGrid','#s3pager',{edit:false,add:false,del:false,search:false,refresh:false}); jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s', onClickButton:function(){ mygrid[0].toggleToolbar() }});jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh', onClickButton:function(){ mygrid[0].clearToolbar() }}); jQuery("#s3list").jqGrid('filterToolbar');
增刪改查工具欄及分頁(yè)欄
jqGrid附帶了分頁(yè)欄，在分頁(yè)欄上可以添加增加，修改，刪除以及查詢按鈕。
在html多添加一個(gè)層，這個(gè)層就存放分頁(yè)欄：
<div id="pager"></div>
$("#grid1").jqgrid(
......
pager:"#pager", //通過這屬性還可以設(shè)置可選的頁(yè)面大小 rowList: [10, 20, 30],
.......
);//這里的 edit,add等就是對(duì)應(yīng)編輯新增等按鈕，通過設(shè)置布爾值來決定是否顯示
jQuery("#grid1").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true, refresh: true});//或者用這種形式
jQuery("#grid1").jqGrid('navGrid', '#pager',
{}, //options
{height: 280, reloadAfterSubmit: false }, // edit options
{height: 280, reloadAfterSubmit: false }, // add options
{reloadAfterSubmit: false }, // del options
{} // search options
);
記得要在colModel里給可供編輯的列的editable賦值為true，才可以編輯。
分頁(yè)讀取數(shù)據(jù)
既然上面已提及到分頁(yè)，下面則介紹另一種分頁(yè)方式，通過滾動(dòng)條進(jìn)行翻頁(yè)。在這種分頁(yè)方式中，數(shù)據(jù)庫(kù)的所有數(shù)據(jù)并非一下子讀取出來填充到grid中，而是通過滾動(dòng)條的位置得出當(dāng)前瀏覽到的哪一頁(yè)數(shù)據(jù)，才從數(shù)據(jù)庫(kù)讀取那部分的數(shù)據(jù)。
$("#grid1").jqgrid(
......
//設(shè)置了這個(gè)才會(huì)根據(jù)滾動(dòng)分頁(yè)讀取數(shù)據(jù)
scroll: 1,
//設(shè)置頁(yè)面的大小
rowNum: 10,
.......
);
下面的例子只是用到本地的數(shù)據(jù)，同樣也是實(shí)現(xiàn)了滾動(dòng)翻頁(yè)的效果
jQuery("#scrolling").jqGrid({
scroll: 1,
datatype: "local",
data:mydata,
height: 100,
width: 600,
colNames: ['Index', 'Name', 'Code'],
colModel: [
{ name: 'id', index: 'id', width: 65 },
{ name: 'name', index: 'name', width: 150 },
{ name: 'note', index: 'note', width: 100 }
],
rowNum: 5,
gridview: true,
pager: '#pscrolling',
sortname: 'item_id',
viewrecords: true,
sortorder: "asc",
caption: "Loading data while scrolling"
});
父子表
通過以下設(shè)置可使用子表
$("#grid1").jqgrid(
......
//啟用子表
subGrid : true,
subGridUrl: '............',
//設(shè)置子表的屬性
subGridModel: [{
name : ['name1','name2',......,'nameN'],
width : [width1,width2,.....,widthN] } ],
.......
);
這里子表的設(shè)置只是最基本的，更多屬性的資料可參閱 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
Get/Set 單元格的值
獲取某個(gè)單元格的值就調(diào)用getCell(rowid, iCol) 。iCol既可以是當(dāng)前列在colModel中的位置索引也可以是name值。注意：在編輯行或者單元格時(shí)不能使用此方法，此時(shí)返回的并不是改變的值，而是原始值。
設(shè)置某個(gè)單元格的值就調(diào)用setCell(rowid,colname, data, class, properties)。rowid：當(dāng)前行id；colname：列名稱，也可以是列的位置索引，從0開始；data：改變單元格的內(nèi)容，如果為空則不更 新；class：如果是string則會(huì)使用addClass方法將其加入到單元格的css中，如果是array則會(huì)直接加到style屬性中；properties：設(shè)置單元格屬性colModel。
當(dāng)然也可以Get/Set 行或者列，在這里可查閱更多get/set/add的方法http://www.trirand.com/jqgridwiki/doku.php?
數(shù)據(jù)驗(yàn)證
通過設(shè)置colModel的editrules屬性，可以對(duì)輸入的數(shù)據(jù)進(jìn)行驗(yàn)證
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },
...
]
...
});
下面則是可用的驗(yàn)證選項(xiàng)
設(shè)置條帶狀的列
jQuery("#ghcs").jqGrid('setGroupHeaders', { //設(shè)置列頭是否啟用colSpan效果
useColSpanStyle: false,
groupHeaders:[
{ startColumnName: 'colName', //合并列組的第一個(gè)列名 numberOfColumns: number, //合并列的數(shù)量 titleText: 'title' //合并列的標(biāo)題 }, ........
]
}
編輯器
jqGrid的模板列自帶了一些很基本的編輯器，包括：'text'單行文本框, 'textarea'多行文本框, 'select'下拉框, 'checkbox'復(fù)選框, 'password'密碼框, 'button'按鈕, 'image'圖片按鈕, 'file'文件上傳框 以及'custom'自定義編輯器。
在colModel里設(shè)置edittype則可
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'text',editoptions: {size:10, maxlength: 15}....}, ... ] ... });
其中editoption是對(duì)編輯器的一些設(shè)置，文本框就可以設(shè)置size,maxlength等；復(fù)選框可設(shè)置value ；
ditoptions: { value:"Yes:No" }
下拉框以這種形式
editoptions: { value: “val1:text1; val2:text2; val3:text3” }
更多資料參閱http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
模板列調(diào)用其他編輯器
上面介紹的編輯器只是使用了html的表單元素而已，下面介紹的是調(diào)用插件。
<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
function InitDatePicker(cl) {
$(cl).click(function () {
WdatePicker();
});
}
....
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'date', ..., editable:true, edittype:'text',editoptions: {dataInit:InitDatePicker}....},
...
] ,
...
});
.......
</script>
這里調(diào)用了My97DatePicker插件作為日歷編輯器。
如果想在一個(gè)模板列里放置多種控件，可以用一下方式
jQuery("#grid_id").jqGrid({
...
afterInsertRow: function (rowid, aData) {
var controls=" "; //放置在模板里的控件
.......
$("#grid_id").jqGrid('setCell', rowid, 'tag', controls);
}
...
});
這個(gè)其實(shí)是在grid的單元格內(nèi)通過編輯其html來實(shí)現(xiàn)。
模仿Excel移動(dòng)選擇單元格
設(shè)置單元格編輯模式后，可以通過上下左右的導(dǎo)航鍵跳到需要編輯的單元格，按回車進(jìn)入編輯狀態(tài)，按Esc鍵不保存更改內(nèi)容，按回車保存更改內(nèi)容
jQuery("#grid_id").jqGrid({
...
cellEdit:true,
cellsubmit:'clientArray', //定義了單元格內(nèi)容保存位置 默認(rèn)值是'remote'
...
});
以上所述是小編給大家介紹的jqGrid用法匯總，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- jqgrid 簡(jiǎn)單學(xué)習(xí)筆記
- JQGrid的用法解析(列編輯,添加行,刪除行)
- jQuery中jqGrid分頁(yè)實(shí)現(xiàn)代碼
- jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法
- jqGrid隨窗口大小變化自適應(yīng)大小的示例代碼
- Bootstrap嵌入jqGrid，使你的table牛逼起來
- 一個(gè)關(guān)于jqGrid使用的小例子(行按鈕)
- jqGrid 學(xué)習(xí)筆記整理——進(jìn)階篇(一 )
- 給jqGrid數(shù)據(jù)行添加修改和刪除操作鏈接（之一）
- 利用jqgrid實(shí)現(xiàn)上移下移單元格功能
相關(guān)文章
在Web項(xiàng)目中引入Jquery插件報(bào)錯(cuò)的完美解決方案(圖解)
這篇文章主要介紹了在Web項(xiàng)目中引入Jquery插件報(bào)錯(cuò)的完美解決方案的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
本文詳細(xì)介紹scrollable中方法使用及本文完整示例。2009-09-09
基于JQuery的簡(jiǎn)單實(shí)現(xiàn)折疊菜單代碼
利用JQUERY簡(jiǎn)單的實(shí)現(xiàn)功能菜單的折疊效果。本人初學(xué)，寫后臺(tái)稍多一點(diǎn)，很少寫前臺(tái)的效果。還請(qǐng)大蝦們多多指教。2010-09-09
這篇文章主要介紹了JQuery綁定事件四種實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
jQuery通過寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了jQuery通過寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04
今天正好用到這個(gè)，就網(wǎng)上搜了搜，貼出來了。需要的朋友可以參考下。2011-03-03
基于jquery完美拖拽，可返回拖動(dòng)軌跡 用JQ實(shí)現(xiàn)，話不多說，直接上碼2012-03-03
翻譯整理的jQuery使用查詢手冊(cè)...2007-03-03
JQuery事件e參數(shù)的方法preventDefault()取消默認(rèn)行為
JQuery事件的e參數(shù)的方法preventDefault()可以取消對(duì)象的默認(rèn)行為，下有個(gè)不錯(cuò)的示例，大家可以參考下，希望對(duì)大家有所幫助2013-09-09
這篇文章主要介紹了Jquery使用css方法改變樣式的方法,實(shí)例分析了jQuery中css方法操作樣式的技巧,需要的朋友可以參考下2015-05-05