JQGrid的用法解析(列编辑,添加行,删除行)_jquery

<script> <p>$(document).ready(function()<br>{<br> initPlsfList();<br>});<br>//初始化grid列表<br>function initPlsfList(){<br> //缓存表列数组,key 为页面元素的name ，value 对应数据库中的字段<br> var cellArray = new Array();<br> cellArray["zoneID"] ="ZONE_ID"; <br> cellArray["factorPG"] ="FACTOR_PG"; <br> cellArray["factorQG"] ="FACTOR_QG";<br> cellArray["factorPL"] ="FACTOR_PL";<br> cellArray["factorQL"] ="FACTOR_QL";<br> cellArray["valid"] ="VALID";<br>  <p> var caseID = '${caseID}';<br> $("#plsfList").jqGrid({<br>        url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",<br>        datatype: "json",<br>        mtype:"POST",<br>        height: "auto",<br>        width: "auto",<br>        colNames:[<br>                  'id',<br>                  "<fmt:message key='case.valid'/>", <br>                  "<fmt:message key='zone'/>", <br>                  "<fmt:message key='pasf'/>", <br>                  "<fmt:message key='pisf'/>",<br>                  "<fmt:message key='lasf'/>",<br>                  "<fmt:message key='lisf'/>",<br>                  'modeID'<br>                  ],<br>        colModel:[<br>                  {name:'id',index:'id', width:100,hidden:true},<br>                  {name:'valid',index:'valid', width:100,editable:true,<br>                   formatter:formatValid,<br>       editable:true,edittype:'checkbox',<br>             editoptions:{value:'1:0',defaultValue:'1'}<br>                  },<br>                  {name:'zoneName',index:'zoneName', width:150,editable:true},<br>                  {name:'factorPG',index:'factorPG', width:100,editable:true},<br>                  {name:'factorQG',index:'factorQG', width:100,editable:true},<br>                  {name:'factorPL',index:'factorPL', width:100,editable:true},<br>                  {name:'factorQL',index:'factorQL', width:100,editable:true},<br>                  {name:'caseID',index:'caseID', width:100,hidden:true},<br>                 ],<br>        rowNum:10,<br>        rowList:[10,20,30],<br>        pager: '',<br>        cellEdit:true,<br>        viewrecords: true,<br>        jsonReader: { repeatitems : false, id: "id" },<br>        viewsortcols:[false,'horizontal',false],<br>        sortable:false,<br>        sortorder:"asc",<br>        sortname:"id",<br>        multiselect: true,<br>        cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",<br>     cellsubmit: 'remote',<br>        gridComplete: function() {<br>         var $selecAll = $("#cb_plsfList");<br>         var cb_title = "<fmt:message key='select.all' bundle='${commonResources}'/>" ;<br>         if($selecAll){<br>          $selecAll.attr("title",cb_title);<br>         }<br>         //设置全选checkbox title<br>            var rowIds = jQuery("#plsfList").jqGrid('getDataIDs');<br>            for(var k=0; k<rowIds.length; k++) {<br>               var curRowData = jQuery("#plsfList").jqGrid('getRowData', rowIds[k]);<br>               var curChk = $("#"+rowIds[k]+"").find(":checkbox");<br>               //curChk.attr('title', curRowData.modeName);   //给checkbox赋予额外的属性值<br>            }<br><br>        },<br>        onSortCol:function(index,iCol,sortorder){<br>         return false ;<br>        },<br>        ondblClickRow: function (rowid,iRow,iCol,e) {<br>         /*var $plsfList = $("#plsfList");<br>         if (isRowNeedSave($plsfList)){<br>          showMessage("请先保存");<br>         }else{<br>          $("#operate").val("update");<br>          newrowid = rowid ;<br>          $plsfList.setGridParam({cellEdit:false});<br>          $plsfList.jqGrid('editRow', rowid, true);<br>          //确定按钮可用<br>             $("#confirm_btn").attr("disabled",false);<br><br>         }*/<br>        },<br>        beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){<br>         //列提交前的拦截方法<br>         var $plsfList = $("#plsfList") ;<br>         var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>' ;<br>         //设置列提交的url。updateCellName：要编辑的列名 ；updateCellValue ：是编辑的值<br>         $editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname]);<br>         $editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value);<br>         //给jqgrid 从新设置cellurl 值<br>         $plsfList.setGridParam({cellurl:$editUrl});<br>         return false ;<br>        },<br>        afterEditCell:function(rowid, cellname, value, iRow, iCol){<br>        //动态修改lie时，当列 变为可修改状态时，给列add一个button，且列中元素不可编辑，点击button  弹出一个模态窗口，可以选择元素 ，赋值给grid当前编辑列中单行表单域中.<br>         $("#"+rowid+" input[type='checkbox']").attr("checked",value == "<fmt:message key='case.valid'/>" ? true:false);<br>         if(iCol==3){<br>          $("#irowNum").val(rowid);<br>          var $data = $("#"+rowid +">td"); //获取这个行里所有的td元素，即：获取所有子元素<br>          $zoneInput = $data.find("input").eq("1") ;<br>          $zoneInput.css("width","100px");<br>          $zoneInput.attr("disabled",true);<br>          $zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");<br>      }<br>        } <p>    }); <p><br>//grid添加新的一行<br>var newrowid ;<br>function addRow()<br>{<br> $("#operate").val("");<br> var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow"); <br> var ids = jQuery("#plsfList").jqGrid('getDataIDs');<br> //获得当前最大行号（数据编号）<br> var rowid = Math.max.apply(Math,ids);<br> //获得新添加行的行号（数据编号）<br> newrowid = rowid+1;<br>    var dataRow = {  <br>     id: "",<br>     valid:"",<br>     zoneID:'',<br>     factorPG:'',<br>     factorQG:'',<br>     factorPL:'',<br>     factorQL:'',<br>     caseID:''<br>    };    <br><br>    //将新添加的行插入到第一列<br>    $("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first");<br>    //设置grid单元格不可编辑<br>    $("#plsfList").setGridParam({cellEdit:false});<br>    //设置grid单元格可编辑<br>    $('#plsfList').jqGrid('editRow', newrowid, false);<br>    //确定按钮可用<br>    $("#confirm_btn").attr("disabled",false);<br>    //给添加的列加选择按钮<br>    var $zoneInput = $("#"+newrowid+"_zoneName");<br>    $zoneInput.attr("disabled",true).css("width",100);<br> $zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");<br><br>} <p><br>function insertPlsf(){<br> var $plsfList = $("#plsfList") ;<br> var $operate = $("#operate").val();<br> //设置grid单元格可编辑<br> $plsfList.setGridParam({cellEdit:true});<br> //设置grid行不可编辑<br> //$plsfList.jqGrid('editRow', newrowid, false);<br> //拼接请求的url<br> var url = '<%=basePath%>'+"/lfc/powerlsfactor/save" ;<br> var $params = $plsfList.find("input[id^="+newrowid+"]");<br> var $check_val = $params.eq(0).is(':checked') ? 1:0;<br> url = addParamToUrl(url,'valid',$check_val);<br> url = addParamToUrl(url,'zoneID',$("#zone_id").val());<br> url = addParamToUrl(url,'factorPG',$params.eq(2).val());<br> url = addParamToUrl(url,'factorQG',$params.eq(3).val());<br> url = addParamToUrl(url,'factorPL',$params.eq(4).val());<br> url = addParamToUrl(url,'factorQL',$params.eq(5).val());<br><br> var $caseID = $("#caseID").val();<br> url = addParamToUrl(url,'caseID',$caseID); <p> $.ajax({url:url,type:"post",timeout:5000, <br>      success:function(data){<br>          showMessage(data);<br>          reloadGrid();<br>      }<br> });<br> //将新添加行号 初始为空<br> newrowid = '' ;<br> //确定按钮不可用<br>    $("#confirm_btn").attr("disabled",true);<br>} <p><br>//格式zone列输出内容<br>function formatZone(cellvalue, options, rowObject){<br> if(cellvalue == 0){<br>  return 0;<br> }else if(cellvalue == 1){<br>  return 1;<br> }else if(cellvalue == 2){<br>  return 2;<br> }else{<br>  return 3;<br> }<br>} <p><br>function isRowNeedSave($jqgrid){<br> var $editTr = $jqgrid.find("tr[editable=1]") ;<br> var flag = false ;<br> if ( $editTr && $editTr.length > 0){<br>  flag = true ;<br> }<br> return flag ;<br>} <p><br>function cancel(){<br> reloadGrid();<br> //确定按钮不可用<br>    $("#confirm_btn").attr("disabled",true);<br>    //设置grid单元格可编辑<br>    $("#plsfList").setGridParam({cellEdit:true});<br>    //设置grid单元格可编辑<br>    $('#plsfList').jqGrid('editRow', newrowid, true);<br>} <p>  <p>function fnCallDialogForEidt(){<br> //获得当前行号（数据编号）<br> var returnValue = "";<br> returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"");<br> if(returnValue==""||returnValue==null)<br>  return;<br> var $plsfList = $("#plsfList");<br> var $params = $plsfList.find("input[id$='zoneName']");<br> var names = returnValue.split(",");<br> $params.eq(0).val(names[1]);<br> $("#zone_id").val(names[0]);<br>}<br></script>