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

  1 <script>
  2 
  3 $(document).ready(function()
  4 {
  5  initPlsfList();
  6 });
  7 //初始化grid列表
  8 function initPlsfList(){
  9  //缓存表列数组,key 为页面元素的name ,value 对应数据库中的字段
 10  var cellArray = new Array();
 11  cellArray["zoneID"] ="ZONE_ID"; 
 12  cellArray["factorPG"] ="FACTOR_PG"; 
 13  cellArray["factorQG"] ="FACTOR_QG";
 14  cellArray["factorPL"] ="FACTOR_PL";
 15  cellArray["factorQL"] ="FACTOR_QL";
 16  cellArray["valid"] ="VALID";
 17  
 18 
 19  var caseID = '${caseID}';
 20  $("#plsfList").jqGrid({
 21         url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",
 22         datatype: "json",
 23         mtype:"POST",
 24         height: "auto",
 25         width: "auto",
 26         colNames:[
 27                   'id',
 28                   "<fmt:message key='case.valid'/>", 
 29                   "<fmt:message key='zone'/>", 
 30                   "<fmt:message key='pasf'/>", 
 31                   "<fmt:message key='pisf'/>",
 32                   "<fmt:message key='lasf'/>",
 33                   "<fmt:message key='lisf'/>",
 34                   'modeID'
 35                   ],
 36         colModel:[
 37                   {name:'id',index:'id', width:100,hidden:true},
 38                   {name:'valid',index:'valid', width:100,editable:true,
 39                    formatter:formatValid,
 40        editable:true,edittype:'checkbox',
 41              editoptions:{value:'1:0',defaultValue:'1'}
 42                   },
 43                   {name:'zoneName',index:'zoneName', width:150,editable:true},
 44                   {name:'factorPG',index:'factorPG', width:100,editable:true},
 45                   {name:'factorQG',index:'factorQG', width:100,editable:true},
 46                   {name:'factorPL',index:'factorPL', width:100,editable:true},
 47                   {name:'factorQL',index:'factorQL', width:100,editable:true},
 48                   {name:'caseID',index:'caseID', width:100,hidden:true},
 49                  ],
 50         rowNum:10,
 51         rowList:[10,20,30],
 52         pager: '',
 53         cellEdit:true,
 54         viewrecords: true,
 55         jsonReader: { repeatitems : false, id: "id" },
 56         viewsortcols:[false,'horizontal',false],
 57         sortable:false,
 58         sortorder:"asc",
 59         sortname:"id",
 60         multiselect: true,
 61         cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",
 62      cellsubmit: 'remote',
 63         gridComplete: function() {
 64          var $selecAll = $("#cb_plsfList");
 65          var cb_title = "<fmt:message key='select.all' bundle='${commonResources}'/>" ;
 66          if($selecAll){
 67           $selecAll.attr("title",cb_title);
 68          }
 69          //设置全选checkbox title
 70             var rowIds = jQuery("#plsfList").jqGrid('getDataIDs');
 71             for(var k=0; k<rowIds.length; k++) {
 72                var curRowData = jQuery("#plsfList").jqGrid('getRowData', rowIds[k]);
 73                var curChk = $("#"+rowIds[k]+"").find(":checkbox");
 74                //curChk.attr('title', curRowData.modeName);   //给checkbox赋予额外的属性值
 75             }
 76 
 77         },
 78         onSortCol:function(index,iCol,sortorder){
 79          return false ;
 80         },
 81         ondblClickRow: function (rowid,iRow,iCol,e) {
 82          /*var $plsfList = $("#plsfList");
 83          if (isRowNeedSave($plsfList)){
 84           showMessage("请先保存");
 85          }else{
 86           $("#operate").val("update");
 87           newrowid = rowid ;
 88           $plsfList.setGridParam({cellEdit:false});
 89           $plsfList.jqGrid('editRow', rowid, true);
 90           //确定按钮可用
 91              $("#confirm_btn").attr("disabled",false);
 92 
 93          }*/
 94         },
 95         beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){
 96          //列提交前的拦截方法
 97          var $plsfList = $("#plsfList") ;
 98          var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>' ;
 99          //设置列提交的url。updateCellName:要编辑的列名 ;updateCellValue :是编辑的值
100          $editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname]);
101          $editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value);
102          //给jqgrid 从新设置cellurl 值
103          $plsfList.setGridParam({cellurl:$editUrl});
104          return false ;
105         },
106         afterEditCell:function(rowid, cellname, value, iRow, iCol){
107         //动态修改lie时,当列 变为可修改状态时,给列add一个button,且列中元素不可编辑,点击button  弹出一个模态窗口,可以选择元素 ,赋值给grid当前编辑列中单行表单域中.
108          $("#"+rowid+" input[type='checkbox']").attr("checked",value == "<fmt:message key='case.valid'/>" ? true:false);
109          if(iCol==3){
110           $("#irowNum").val(rowid);
111           var $data = $("#"+rowid +">td"); //获取这个行里所有的td元素,即:获取所有子元素
112           $zoneInput = $data.find("input").eq("1") ;
113           $zoneInput.css("width","100px");
114           $zoneInput.attr("disabled",true);
115           $zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");
116       }
117         }
118 
119     });
120 
121 
122 //grid添加新的一行
123 var newrowid ;
124 function addRow()
125 {
126  $("#operate").val("");
127  var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow"); 
128  var ids = jQuery("#plsfList").jqGrid('getDataIDs');
129  //获得当前最大行号(数据编号)
130  var rowid = Math.max.apply(Math,ids);
131  //获得新添加行的行号(数据编号)
132  newrowid = rowid+1;
133     var dataRow = {  
134      id: "",
135      valid:"",
136      zoneID:'',
137      factorPG:'',
138      factorQG:'',
139      factorPL:'',
140      factorQL:'',
141      caseID:''
142     };    
143 
144     //将新添加的行插入到第一列
145     $("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first");
146     //设置grid单元格不可编辑
147     $("#plsfList").setGridParam({cellEdit:false});
148     //设置grid单元格可编辑
149     $('#plsfList').jqGrid('editRow', newrowid, false);
150     //确定按钮可用
151     $("#confirm_btn").attr("disabled",false);
152     //给添加的列加选择按钮
153     var $zoneInput = $("#"+newrowid+"_zoneName");
154     $zoneInput.attr("disabled",true).css("width",100);
155  $zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");
156 
157 }
158 
159 
160 function insertPlsf(){
161  var $plsfList = $("#plsfList") ;
162  var $operate = $("#operate").val();
163  //设置grid单元格可编辑
164  $plsfList.setGridParam({cellEdit:true});
165  //设置grid行不可编辑
166  //$plsfList.jqGrid('editRow', newrowid, false);
167  //拼接请求的url
168  var url = '<%=basePath%>'+"/lfc/powerlsfactor/save" ;
169  var $params = $plsfList.find("input[id^="+newrowid+"]");
170  var $check_val = $params.eq(0).is(':checked') ? 1:0;
171  url = addParamToUrl(url,'valid',$check_val);
172  url = addParamToUrl(url,'zoneID',$("#zone_id").val());
173  url = addParamToUrl(url,'factorPG',$params.eq(2).val());
174  url = addParamToUrl(url,'factorQG',$params.eq(3).val());
175  url = addParamToUrl(url,'factorPL',$params.eq(4).val());
176  url = addParamToUrl(url,'factorQL',$params.eq(5).val());
177 
178  var $caseID = $("#caseID").val();
179  url = addParamToUrl(url,'caseID',$caseID);
180 
181  $.ajax({url:url,type:"post",timeout:5000, 
182       success:function(data){
183           showMessage(data);
184           reloadGrid();
185       }
186  });
187  //将新添加行号 初始为空
188  newrowid = '' ;
189  //确定按钮不可用
190     $("#confirm_btn").attr("disabled",true);
191 }
192 
193 
194 //格式zone列输出内容
195 function formatZone(cellvalue, options, rowObject){
196  if(cellvalue == 0){
197   return 0;
198  }else if(cellvalue == 1){
199   return 1;
200  }else if(cellvalue == 2){
201   return 2;
202  }else{
203   return 3;
204  }
205 }
206 
207 
208 function isRowNeedSave($jqgrid){
209  var $editTr = $jqgrid.find("tr[editable=1]") ;
210  var flag = false ;
211  if ( $editTr && $editTr.length > 0){
212   flag = true ;
213  }
214  return flag ;
215 }
216 
217 
218 function cancel(){
219  reloadGrid();
220  //确定按钮不可用
221     $("#confirm_btn").attr("disabled",true);
222     //设置grid单元格可编辑
223     $("#plsfList").setGridParam({cellEdit:true});
224     //设置grid单元格可编辑
225     $('#plsfList').jqGrid('editRow', newrowid, true);
226 }
227 
228  
229 
230 function fnCallDialogForEidt(){
231  //获得当前行号(数据编号)
232  var returnValue = "";
233  returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"");
234  if(returnValue==""||returnValue==null)
235   return;
236  var $plsfList = $("#plsfList");
237  var $params = $plsfList.find("input[id$='zoneName']");
238  var names = returnValue.split(",");
239  $params.eq(0).val(names[1]);
240  $("#zone_id").val(names[0]);
241 }

 

posted @ 2014-04-09 17:40  拾遗日志  阅读(5656)  评论(1编辑  收藏  举报