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

时间:2022-12-08 17:10:41
  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 }