jqgrid中文幫助文件網址：http://blog.mn886.net/jqGrid/
jqgrid：用來做什麼？
jqgrid是web端前臺表格控制元件，用它可以輕鬆將資料格式化顯示，前後臺用過ajax進行互動。
jqgrid：原理？
jqGrid是典型的B/S架構，伺服器端只是提供資料管理，客戶端只提供資料顯示。
例項：
$(document).ready(function()
{
initPlsfList();
});
//初始化grid列表
function initPlsfList(){
//快取表列陣列,key 為頁面元素的name ，value 對應資料庫中的欄位
var cellArray = new Array();
cellArray["zoneID"] ="ZONE_ID";
cellArray["factorPG"] ="FACTOR_PG";
cellArray["factorQG"] ="FACTOR_QG";
cellArray["factorPL"] ="FACTOR_PL";
cellArray["factorQL"] ="FACTOR_QL";
cellArray["valid"] ="VALID";
var caseID = '${caseID}';
$("#plsfList").jqGrid({
url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",
datatype: "json",
mtype:"POST",
height: "auto",
width: "auto",
colNames:[
'id',
"<fmt:message key='case.valid'/>",
"<fmt:message key='zone'/>",
"<fmt:message key='pasf'/>",
"<fmt:message key='pisf'/>",
"<fmt:message key='lasf'/>",
"<fmt:message key='lisf'/>",
'modeID'
],
colModel:[
{name:'id',index:'id', width:100,hidden:true},
{name:'valid',index:'valid', width:100,editable:true,
formatter:formatValid,
editable:true,edittype:'checkbox',
editoptions:{value:'1:0',defaultValue:'1'}
},
{name:'zoneName',index:'zoneName', width:150,editable:true},
{name:'factorPG',index:'factorPG', width:100,editable:true},
{name:'factorQG',index:'factorQG', width:100,editable:true},
{name:'factorPL',index:'factorPL', width:100,editable:true},
{name:'factorQL',index:'factorQL', width:100,editable:true},
{name:'caseID',index:'caseID', width:100,hidden:true},
],
rowNum:10,
rowList:[10,20,30],
pager: '',
cellEdit:true,
viewrecords: true,
jsonReader: { repeatitems : false, id: "id" },
viewsortcols:[false,'horizontal',false],
sortable:false,
sortorder:"asc",
sortname:"id",
multiselect: true,
cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",
cellsubmit: 'remote',
gridComplete: function() {
var $selecAll = $("#cb_plsfList");
var cb_title = "<fmt:message key='select.all' bundle='${commonResources}'/>" ;
if($selecAll){
$selecAll.attr("title",cb_title);
}
//設定全選checkbox title
var rowIds = jQuery("#plsfList").jqGrid('getDataIDs');
for(var k=0; k<rowIds.length; k++) {
var curRowData = jQuery("#plsfList").jqGrid('getRowData', rowIds[k]);
var curChk = $("#"+rowIds[k]+"").find(":checkbox");
//curChk.attr('title', curRowData.modeName); //給checkbox賦予額外的屬性值
}
},
onSortCol:function(index,iCol,sortorder){
return false ;
},
ondblClickRow: function (rowid,iRow,iCol,e) {
/*var $plsfList = $("#plsfList");
if (isRowNeedSave($plsfList)){
showMessage("請先儲存");
}else{
$("#operate").val("update");
newrowid = rowid ;
$plsfList.setGridParam({cellEdit:false});
$plsfList.jqGrid('editRow', rowid, true);
//確定按鈕可用
$("#confirm_btn").attr("disabled",false);
}*/
},
beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){
//列提交前的攔截方法
var $plsfList = $("#plsfList") ;
var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>' ;
//設定列提交的url。updateCellName：要編輯的列名 ；updateCellValue ：是編輯的值
$editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname]);
$editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value);
//給jqgrid 從新設定cellurl 值
$plsfList.setGridParam({cellurl:$editUrl});
return false ;
},
afterEditCell:function(rowid, cellname, value, iRow, iCol){
//動態修改lie時，當列 變為可修改狀態時，給列add一個button，且列中元素不可編輯，點選button 彈出一個模態視窗，可以選擇元素 ，賦值給grid當前編輯列中單行表單域中.
$("#"+rowid+" input[type='checkbox']").attr("checked",value == "<fmt:message key='case.valid'/>" ? true:false);
if(iCol==3){
$("#irowNum").val(rowid);
var $data = $("#"+rowid +">td"); //獲取這個行裡所有的td元素，即：獲取所有子元素
$zoneInput = $data.find("input").eq("1") ;
$zoneInput.css("width","100px");
$zoneInput.attr("disabled",true);
$zoneInput.after("<input type='button' value='選擇' onclick='fnCallDialogForEidt()' />");
}
}
});
//grid新增新的一行
var newrowid ;
function addRow()
{
$("#operate").val("");
var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow");
var ids = jQuery("#plsfList").jqGrid('getDataIDs');
//獲得當前最大行號（資料編號）
var rowid = Math.max.apply(Math,ids);
//獲得新新增行的行號（資料編號）
newrowid = rowid+1;
var dataRow = {
id: "",
valid:"",
zoneID:'',
factorPG:'',
factorQG:'',
factorPL:'',
factorQL:'',
caseID:''
};
//將新新增的行插入到第一列
$("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first");
//設定grid單元格不可編輯
$("#plsfList").setGridParam({cellEdit:false});
//設定grid單元格可編輯
$('#plsfList').jqGrid('editRow', newrowid, false);
//確定按鈕可用
$("#confirm_btn").attr("disabled",false);
//給新增的列加選擇按鈕
var $zoneInput = $("#"+newrowid+"_zoneName");
$zoneInput.attr("disabled",true).css("width",100);
$zoneInput.after("<input type='button' value='選擇' onclick='fnCallDialogForEidt()' />");
}
function insertPlsf(){
var $plsfList = $("#plsfList") ;
var $operate = $("#operate").val();
//設定grid單元格可編輯
$plsfList.setGridParam({cellEdit:true});
//設定grid行不可編輯
//$plsfList.jqGrid('editRow', newrowid, false);
//拼接請求的url
var url = '<%=basePath%>'+"/lfc/powerlsfactor/save" ;
var $params = $plsfList.find("input[id^="+newrowid+"]");
var $check_val = $params.eq(0).is(':checked') ? 1:0;
url = addParamToUrl(url,'valid',$check_val);
url = addParamToUrl(url,'zoneID',$("#zone_id").val());
url = addParamToUrl(url,'factorPG',$params.eq(2).val());
url = addParamToUrl(url,'factorQG',$params.eq(3).val());
url = addParamToUrl(url,'factorPL',$params.eq(4).val());
url = addParamToUrl(url,'factorQL',$params.eq(5).val());
var $caseID = $("#caseID").val();
url = addParamToUrl(url,'caseID',$caseID);
$.ajax({url:url,type:"post",timeout:5000,
success:function(data){
showMessage(data);
reloadGrid();
}
});
//將新新增行號 初始為空
newrowid = '' ;
//確定按鈕不可用
$("#confirm_btn").attr("disabled",true);
}
//格式zone列輸出內容
function formatZone(cellvalue, options, rowObject){
if(cellvalue == 0){
return 0;
}else if(cellvalue == 1){
return 1;
}else if(cellvalue == 2){
return 2;
}else{
return 3;
}
}
function isRowNeedSave($jqgrid){
var $editTr = $jqgrid.find("tr[editable=1]") ;
var flag = false ;
if ( $editTr && $editTr.length > 0){
flag = true ;
}
return flag ;
}
function cancel(){
reloadGrid();
//確定按鈕不可用
$("#confirm_btn").attr("disabled",true);
//設定grid單元格可編輯
$("#plsfList").setGridParam({cellEdit:true});
//設定grid單元格可編輯
$('#plsfList').jqGrid('editRow', newrowid, true);
}
function fnCallDialogForEidt(){
//獲得當前行號（資料編號）
var returnValue = "";
returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"");
if(returnValue==""||returnValue==null)
return;
var $plsfList = $("#plsfList");
var $params = $plsfList.find("input[id$='zoneName']");
var names = returnValue.split(",");
$params.eq(0).val(names[1]);
$("#zone_id").val(names[0]);
}