源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-12-06 02:36 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JQGrid的用法解析(列编辑,添加行,删除行)
[u]复制代码[/u] 代码如下:
<script> $(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]); }
[img]http://files.jb51.net/file_images/article/201311/20131108100036.png[/img] [img]http://files.jb51.net/file_images/article/201311/20131108100050.png[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部