|
最近,，使用了一個挺不錯的數(shù)據(jù)展示插件,，是基于jquery的,，發(fā)現(xiàn)這個插件功能好強(qiáng)大,，使用上也還不錯,，雖然沒有使用extjs那么好用,，但是這個插件更加輕量級一些,。 上周又碰到了之前碰到過類似的問題，想找一個東西,，到網(wǎng)上亂找,，都沒找到，后來發(fā)現(xiàn)自己做過類似的東西,，但是沒有記載下來,，導(dǎo)致,。事實(shí)又一次證明了,，懶人是不行的！ 不扯了,，使用jqGrid其實(shí)很簡單,，附上比較簡單的代碼 Java代碼
jsp 頁面放上這兩個標(biāo)簽,，用來顯示表格，跟分頁標(biāo)簽
<table id='list'></table>
<div id='pager'></div>
var listOptions = {
colNames : ['ID', 'Name'],
colModel : [{
name : 'id',
index : 'id',
width : 55,
editable : false,
hidden : true,
editoptions : {
readonly : true,
size : 10
}
}, {
name : 'name',
index : 'name',
width : 90,
editable : true,
editoptions : {
size : 20
},
editrules: { required: true}
},{
name : 'school',
index : 'school',
width : 90,
editable : true,
edittype : 'select',
editoptions : {
dataUrl : getContentPath() 'a.do?abbreviation&.rand=' Math.random()
},
editrules: { required: true}
}],
// caption : 'List',
height : 348,
width : 600,
viewrecords : true,
multiselect : false,
pager : '#pager',
rowNum : 100,
rownumbers : true,
headertitles : true,
sortname : 'id',
url : 'query.do',
editurl : 'edit.do',
datatype : 'json',
sortorder : 'desc',
pginput : false,
pgbuttons : false,
jsonReader : {
repeatitems : false
}
};
function init() {
jQuery('#list').jqGrid(listOptions);
jQuery('#list').jqGrid('navGrid', '#pager', {
edit : true,
add : true,
del : true,
search : false
}, // options
{
editCaption : 'Edit',
top : '0',
left : '310',
jqModal : false,
reloadAfterSubmit : true,
afterShowForm : function(form) {
$('#etdDate').datepicker({
dateFormat : 'yy-mm-dd'
});
},
afterSubmit : function(response, postdata) {
var message= getMessage(response);
if(message&&message.name=='validation'){
return [false,message.message] ;
}else {
return [true,''] ;
}
}
}, // edit options
{
addCaption : 'add',
top : '0',
left : '310',
jqModal : false,
reloadAfterSubmit : true,
afterShowForm : function(form) {
$('#etdDate').datepicker({
dateFormat : 'yy-mm-dd'
});
},
afterSubmit : function(response, postdata) {
var message= getMessage(response);
if(message&&message.name=='validation'){
return [false,message.message];
}else {
return [true,''] ;
}
}
}, // add options
{
reloadAfterSubmit : true
}, // del options
{} // search options
);
jQuery('#list').jqGrid('setLabel', 'name', '', {
'text-align' : 'left'
});
}
$(function() {
init();
});
效果當(dāng)然很簡單,，一個列表,，一個分頁標(biāo)簽，增刪改查都有了,。 這不是重點(diǎn),，重點(diǎn)是jqgrid的一些常用的命令。
命令1 jQuery('#list').jqGrid('getCol','styleNumber',false); 說明：獲得jqGrid的一列,，好像第一個值是空的,，所以遍歷的時(shí)候，記得在for循環(huán)里面if（obj）{} 一下,。 命令2 jQuery('#list').getGridParam('selarrrow'); 說明：獲得jqGrid你選擇的多行的記錄的id列的值,，好像第一個值也是空的。所以最好先判斷一下,。這個命令使用的前提是你的jqGrid的multiselect 是設(shè)置多選,。 命令3 jqGrid.jqGrid('getGridParam', 'selrow') 說明：獲得你選中的行記錄的單個id 命令4 $(listId).jqGrid('restoreRow', this.lastsel) 說明：把一行處于編輯狀態(tài)的行變成非編輯狀態(tài)，但是我發(fā)現(xiàn)好像這種方式不能保存你編輯的值,，這真讓人頭疼,。 命令5 $(listId).jqGrid('editRow', id, true, null, null, null, null, function() { 說明： 把一行置于編輯狀態(tài)。但是編輯狀態(tài)之后，他得value 就變成了'<input type=*** value='**'>',所以你保存的時(shí)候拿這個value的時(shí)候還得要處理一下$(row[i].propertityName).val();就可以拿到你想要的值了,。
除了一些有用的命令之外,，還有一些有用的總結(jié)。 1如果你的某一個屬性對應(yīng)的是一個文本域,，那么如何調(diào)整這個文本域的寬度,，跟高度呢？呵呵 設(shè)置rows : '6',
|
|
|
