jqgrid学习笔记(转载)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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]);}