最近在跟着學長做一個管理系統，在學習java的同時，接觸到了jgrid，不得不說jqgrid十分的強大表格控件。分頁，排序，搜索，編輯，刪除。。。功能很豐富
首先在js中定義表格模板：
$("#table_list_2").jqGrid({
url:url,
// data:mydata,
datatype: "json",
height:380,
autowidth:true,
shrinkToFit:true,
multiSort: true,
rownumbers: true, //是否顯示行號
multiselect: true, //是否有多選功能
rowNum:10,
rowList:[10,20,30],
emptyrecords : "沒有記錄",
//下面的colName和colModel是對應的，，colNames的值對應表格中的表頭，而colModel的值對應於下面幾行的值，所以列數要相等
//注意colModel中name對應的是json數據的鍵，所以要根據后台傳來的數據來設置
colNames:["國家","學校","起始時間","終止時間","詳情","操作"],
colModel:[{name:"country",index:"country",editable:true,width:60,search:true,
editrules: {
required: true
},
//searchoptions是設置表格中用來搜索的條件的,eq表示相等，ne為不等
searchoptions: {
sopt: ['eq', 'ne']
}
},
{name:"organization",index:"organization",editable:true,width:90,
editrules: {
required: true
},
searchoptions: {
sopt: ['eq', 'ne']
}},
{name:"start_date",index:"start_date",editable:true,width:100,sorttype:"date",formatter:"date",
editrules: {
required: true
},
//這里調用了laydate的插件，對比其他的日期插件，個人認為是比較好看的
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //選擇好日期的回調
$(element).trigger("change");
}})
})
}
},
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt'],
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //選擇好日期的回調
$(element).trigger("change");
}})
})
}
}},
{name:"end_date",index:"end_date",editable:true,width:100,sorttype:"date",formatter:"date",
editrules: {
required: true
},
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //選擇好日期的回調
$(element).trigger("change");
}})
})
}
},
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt'],
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //選擇好日期的回調
$(element).trigger("change");
}})
})
}
}},
{name:"details",index:"details",editable:true,width:80},
{
sortable: false,
formatter : 'actions', // 在每一行顯示編輯按鈕與刪除按鈕
formatoptions : { // 按鈕設定
url: updateUrl, //in-line 更新對應的接口
delOptions: {
url: deleteUrl, //刪除對應接口
afterSubmit: function (response, postdata) {
var result = response.responseJSON.success;
return [result, '刪除失敗！', postdata.id];
}
}
}
}],
pager:"#pager_list_2",
//排序為降序
sortorder: "desc",
viewrecords:true,
//設置jqGrid將要向Server傳遞的參數名稱,用來分頁
prmNames: {
rows: 'limit',
page: 'page'
},
jsonReader: {
root: 'result',
total: 'pages',
page: 'page',
records: 'recores',
repeatitems: false
},
caption:"出國經歷",
add:true,edit:true,addtext:"Add",edittext:"Edit",hidegrid:false
)};
2. jqgird編輯
這里有兩種編輯形式，1.行內編輯。
行內編輯的樣式是這樣的比較方便吧
行內編輯的代碼是需要在colModel中加入的：
{ sortable: false, formatter : 'actions', // 在每一行顯示編輯按鈕與刪除按鈕 formatoptions : { // 按鈕設定 url: updateUrl, //in-line 更新對應的接口 delOptions: { url: deleteUrl, //刪除對應接口 afterSubmit: function (response, postdata) { var result = response.responseJSON.success; return [result, '刪除失敗！', postdata.id]; } } } }
這里的updateUrl和deleteUrl我是在前面便先定義了的，值為后台操縱數據庫的接口，我在java里是controller的方法。
2.彈窗編輯。
彈窗編輯的樣式
這里的代碼是類似的：
{//編輯按鈕選項
key: true,
url: updateUrl,
mtype: 'POST',
editCaption: "編輯",
restoreAfterError: true,
afterSubmit : function(response, postdata) {
var result = response.responseJSON.success;
return [result,'更新失敗！',postdata.id];
},
closeAfterEdit: true,
extraparam: {
}
}
這些都是jqgrid自帶的，這里的編輯按鈕是彈窗編輯的。。
3.分頁
//設置jqGrid將要向Server傳遞的參數名稱 prmNames: { rows: 'limit', page: 'page' },
后台將會接收傳來的限制參數，來顯示當前頁應該顯示的數據，，后台根據傳來的當前頁數來判斷 下一頁的記錄
查看NetWork的Headers信息，發現傳到后台的limit是每頁最多顯示記錄條數，page為當前頁。
4.排序和搜索
//搜素按鈕對應搜索框設置 multipleSearch:true, //是否開啟多條件搜索功能 caption: "搜索...", //搜索模態框標頭 multipleGroup: true, //復雜條件與或搜索 Find: "搜索", //搜索按鈕顯示名稱 Reset: "重置", //重置按鈕名稱 // top: 100, showQuery: false, //是否在搜索模態框中顯示生成的搜索條件語句 searchOnEnter: true, //按下回車建是否開始搜索 groupOps: [ { op: "AND", text: "滿足以下所有條件" }, { op: "OR", text: "滿足以下任意條件" } ], //邏輯條件名稱設置 // jqModal: true, // modal: true, drag: true, //搜索模態框是否能夠被拖拽動 }
根據Headers顯示：
sidx表示排序的列，也就是根據哪一列排序，
sord表示排序的規則，filters代表過濾元素，即
按照這些要求進行搜索
后台將接收過濾條件進行操作
$(window).bind("resize",function(){
var width=$(".jqGrid_wrapper").width();
$("#table_list_2").setGridWidth(width)
});
綁定事件，