jquery下動態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法
更新時間:2010年10月22日 14:50:20 作者:
jquery下動態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法,使用jqgrid的朋友可以參考下。
一般的,一個jqGrid的基本屬性有一下幾個常用的。
$("#id").jqGrid({
url: "",
datatype: "local",
postData: { strJson: Data },
mtype: "post",
height: 45,
width: 450,
rowNum: rum, //每頁的記錄數(shù)
pgtext: "第{0}頁 共{1}頁",
pgbuttons: true,
autoheight: true,
rownumbers: false, // 是否顯示行數(shù)
pgbuttons: true, // 分頁按鈕是否顯示
pginput: true, // 是否允許輸入分頁頁數(shù)
scrollrows: false, // 是否顯示行滾動條
viewrecords: true, // 是否顯示總記錄數(shù)
multiselect: true, // 是否顯示復(fù)選框
recordpos: "left", // 記錄數(shù)顯示位置
sortorder: "asc", //排序方式
pager: "#Pager"
)}
在初始化的時候,若不想執(zhí)行表格的初始化方法,則需要設(shè)置url為空,datatype設(shè)置為"local",否則會有js錯誤,導(dǎo)致頁面上的button按鈕不起作用。
如果需要在開始時候執(zhí)行表格的初始化,則需要設(shè)置url的值,在.net mvc架構(gòu)下,即“/controller/action/”這樣的格式,第一個"/"是必須的,否則不能進(jìn)入后臺的action中,最后一個“/”好像不是必需的,一般都加上。在設(shè)置了url后,還要注意的問題就是datatype要與postData的數(shù)據(jù)類型相匹配,否則會有錯誤。例如datatype:"json",那么postData需要傳的是json對象。
如果想動態(tài)的執(zhí)行表格的初始化,那么剛開始可以不用設(shè)置url值,datatype設(shè)置為"local"(否則報錯)。然后動態(tài)的觸發(fā)jqGrid的初始化action。
比如,在一張表中雙擊后后觸發(fā),代碼如下:
//雙擊行事件
ondblClickRow: function () {
courseData = JSON.stringify({
stuNum: studentNum,
rowNum: rum,
page: 1
});
jQuery("#courseInfoGrid").jqGrid("setGridParam", {
url: "/PersonalArrearsSettlement/GetStudentCourseInfo", //設(shè)置表格的url
datatype: "json", //設(shè)置數(shù)據(jù)類型
postData: { strJson: courseData }
});
這樣就可以動態(tài)的顯示表格的數(shù)據(jù)了。
復(fù)制代碼 代碼如下:
$("#id").jqGrid({
url: "",
datatype: "local",
postData: { strJson: Data },
mtype: "post",
height: 45,
width: 450,
rowNum: rum, //每頁的記錄數(shù)
pgtext: "第{0}頁 共{1}頁",
pgbuttons: true,
autoheight: true,
rownumbers: false, // 是否顯示行數(shù)
pgbuttons: true, // 分頁按鈕是否顯示
pginput: true, // 是否允許輸入分頁頁數(shù)
scrollrows: false, // 是否顯示行滾動條
viewrecords: true, // 是否顯示總記錄數(shù)
multiselect: true, // 是否顯示復(fù)選框
recordpos: "left", // 記錄數(shù)顯示位置
sortorder: "asc", //排序方式
pager: "#Pager"
)}
在初始化的時候,若不想執(zhí)行表格的初始化方法,則需要設(shè)置url為空,datatype設(shè)置為"local",否則會有js錯誤,導(dǎo)致頁面上的button按鈕不起作用。
如果需要在開始時候執(zhí)行表格的初始化,則需要設(shè)置url的值,在.net mvc架構(gòu)下,即“/controller/action/”這樣的格式,第一個"/"是必須的,否則不能進(jìn)入后臺的action中,最后一個“/”好像不是必需的,一般都加上。在設(shè)置了url后,還要注意的問題就是datatype要與postData的數(shù)據(jù)類型相匹配,否則會有錯誤。例如datatype:"json",那么postData需要傳的是json對象。
如果想動態(tài)的執(zhí)行表格的初始化,那么剛開始可以不用設(shè)置url值,datatype設(shè)置為"local"(否則報錯)。然后動態(tài)的觸發(fā)jqGrid的初始化action。
比如,在一張表中雙擊后后觸發(fā),代碼如下:
復(fù)制代碼 代碼如下:
//雙擊行事件
ondblClickRow: function () {
courseData = JSON.stringify({
stuNum: studentNum,
rowNum: rum,
page: 1
});
jQuery("#courseInfoGrid").jqGrid("setGridParam", {
url: "/PersonalArrearsSettlement/GetStudentCourseInfo", //設(shè)置表格的url
datatype: "json", //設(shè)置數(shù)據(jù)類型
postData: { strJson: courseData }
});
這樣就可以動態(tài)的顯示表格的數(shù)據(jù)了。
相關(guān)文章
通過jsonp獲取json數(shù)據(jù)實現(xiàn)AJAX跨域請求
JSON 可通過 JavaScript 進(jìn)行解析,JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸,這篇文章主要介紹了通過jsonp獲取json數(shù)據(jù)(實現(xiàn)AJAX跨域請求),有興趣的可以了解一下。2017-01-01
一個可綁定數(shù)據(jù)源的jQuery數(shù)據(jù)表格插件
此文將實現(xiàn)一個的jQuery表格插件jQuery.DataGrid。需要的朋友可以參考下。2010-07-07
基于jquery的loading 加載提示效果實現(xiàn)代碼
有時候為了更好的用戶體驗,使用jquery的朋友可以參考下代碼。2011-09-09

