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/lsfactorctor/IDc/lsfactor/IDqueox caseID "' />",<BR>        資料類型: "json",<BR>        mtype:"POST",<BR> <BR>        colNames: [ <BR>                 'id',<BR>                          "<fmt:message key='zone'/>", <BR>              message key='pasf'/>", <BR>                 "<fmt:message key='pisf  lasf' />",<BR>                 "<fmt :message key='lisf'/>",<BR>                 'modeID'<BR>     : [<BR>                  {name:'id',index:'id', width ：100，隱藏： true},<BR>                  {name:'valid',index:'valid', width:100,editable: 🎜> editable:true,edittype:'checkbox',<BR> editoptions:{value:'1:0',defaultValue:'1'}<BR>                  },<🠎)   width:150,editable:true},<BR> {name:'factorPG',index:'factorPG', width:100,editable:true},<BR>                  {name:'factorQG',index:        {name:'factorQG',index:        {name:'factorQG',index:"factor10, widtable> {name:'factorPL',index:'factorPL', width:100,editable:true},<BR>                  {name:'factorQL',index:        {name:'factorQL',index:     ¢ >                  {名稱：'caseID'，指標：'caseID'，寬度：100，：true}，<BR>    um：10，<BR> rowList:[10,20,30],<BR>尋呼機: '',<BR>        cellEdit:true,<BR>        viewrecords: true,<BR>   ); false，'水平ntal ' ，false]，<BR>可排序：false，<BR> 排序順序：“ asc”，<BR> 排序名稱：“ id”，<BR> multiSelect：true，<BR> cellurl :"<c:url value =' /lfc/powerlsfactor/save'/>",<BR>     cellsubmit: '遠端',<BR>        gridComplete: function() {<BR>     gridComplete:         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>      🎜>     factorPL: '',<BR>     factorQL:'',<BR>     caseID:''<BR>    };    <BR><>＠   };    <BR><> ).jqGrid("addRowData", newrowid, dataRow, "first");<BR>    //設定grid單元格無法編輯<br>    $("#plsfList").setGridParam({cellEdit:false};<🎟 >    //設定grid單元格可編輯<br>    $('#plsfList').jqGrid('editRow', newrowid, false);<BR>    //確定按鈕可用<BR> attr("disabled",false);<BR>    //給新增的欄位加選擇按鈕<BR>    var $zoneInput = $("#" newrowid "_zoneName");<> ,true).css("width",100);<BR> $zoneInput.after("<input type='button' value='選擇' onclick='fnCallDialogForEidt()' />");<BR><BR>}<BR> <BR><BR>function insertPlsf(){<BR> var $plsfList = $("#plsfList") ;<br> var $operate = $("#operate").val();<br> var $operate = $("#operate").val(); ///設定grid儲存格可編輯<P> $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);<BR> <BR> $.ajax({url:url,type:"post",timeout:5000, <br>      success:function(data){<br>     🎜> }<BR> }); //將新加行號初始為空<P> newrowid = '' ;<BR> //確定按鈕不可用<BR>    $("#confirm_btn").不可用<BR>    $("#confirm_btn"). "disabled",true);<BR>}<BR> <BR><BR>//格式zone欄位輸出內容<BR>function formatZone(cellvalue, options, rowObject){<BR> if(cellvalue == 0){<BR>  return 0 if(cellvalue == 0){  return 0 if(cellvalue == 0){<P>  return 0 if🎜} cellvalue == 1){<BR>  return 1;<BR> }else if(cellvalue == 2){<BR>  return 2;<BR> }else{<BR>  return 2;<BR> }else{<BR>  return 2;<BR> }else{<BR> }<BR> <BR><BR>function isRowNeedSave($jqgrid){ var $editTr = $jqgrid.find("tr[editable=1]") ;<P> var flag = false ;<BR>5< && $editTr.length > 0){<BR>  flag = true ;<BR> }<BR> return flag ;<BR>}<BR> <BR><BR>function cancel(){ reloadGrid();<P> //確定按鈕不可用<BR>    $("#confirm_btn").attr("disabled",truetrue);<BR> //設定grid儲存格可編輯<BR>    $("#plsfList").setGridParam({cellEdit:true});<BR>    //設定grid儲存格可編輯<BR>    $('#plsfList //設定grid儲存格可編輯<BR>  jqGrid('editRow', newrowid, true);<BR>}<BR> <BR>  <P>function fnCallDialogForEidt(){ //取得目前行號（資料編號）<P> var returnValue = "";<BR> returnValue = window.showModalDialog("<c:url value='/elelf> 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><BR><BR></script>