JQgrid實現全表單元格編輯

本文轉載自查看原文 2019-12-31 09:54 1626 jqGrid/ js

 1 jQuery("#baseWageDataValueGrid").jqGrid('setGridParam',{'cellEdit':true});
 2                         
 3                              //修改所有td tabindex
 4                              var tdList = $('#baseWageDataValueGrid').find('td');
 5                              if(!!tdList && tdList.length>0){
 6                                  $.each(tdList,function(i,o) {
 7                                      $(o).attr('tabindex','1');
 8                                  });
 9                              }
10                              //依次發起單元格編輯，並保存
11                              var list = jQuery("#baseWageDataValueGrid").getDataIDs();
12                              var putList = [];
13                              if(!!list && list.length>0) {
14                                  for(var i=list.length;;i-- ) {
15                                      var td = $('#baseWageDataValueGrid').find("td[tabindex='0']");
16                                      if(td.length>0) {
17                                          var put = {};
18                                          put.td = td;
19                                          put.input = td.get(0).children[0];
20                                          putList.push(put);
21                                      } 
22                                      if(i>0) {
23                                          jQuery("#baseWageDataValueGrid").jqGrid('editCell',i,7, true);
24                                      } else {
25                                          break;
26                                      }
27                                  }
28                              }
29                              //還原加載后被刪除 元素，提交元素事件
30                              if(putList.length>0) {
31                                  $.each(putList,function(i,put) {
32                                      $(put.td).empty();
33                                      $(put.td.get(0).parentNode).addClass('edited');
34                                      $(put.td.get(0).parentNode).addClass('selected-row');
35                                      $(put.td.get(0).parentNode).addClass('active');
36                                      $(put.td).attr('tabindex','0');
37                                      $(put.td).addClass('edit-cell');
38                                      $(put.td).addClass('success');
39                                      $(put.td).append(put.input);
40 //    給單元格注冊自定義事件
41                                      $(put.input).on('change',function(o,n) {
42                                          var _this = this;
43                                          var m = this.value;
44                                          var rowid= this.attributes['rowid'].value;
45                                          $.ajax({
46                                              url: __ctx+'/platform/performance/baseWageDataValue/updateSave.htm',
47                                              data:{id:rowid,value:m,itemId:$('#itemId').val()},
48                                              success:function (data) {
49                                                  // 根據返回的數據版本ID判斷是否重新加載數據
50                                                  baseWageDataValue.saveResponse(data);
51 //                                                //使還原的 元素與事件只能使用一次
52 //                                                $(_this.parentNode).removeClass('success');
53 //                                                $(_this.parentNode).removeClass('edit-cell');
54 //                                                $(_this.parentNode.parentNode).removeClass('edited');
55 //                                                $(_this.parentNode.parentNode).removeClass('selected-row');
56 //                                                $(_this.parentNode.parentNode).removeClass('active');
57 //                                                $(_this.parentNode).empty();
58 //                                                //修改顯示值
59 //                                                jQuery("#baseWageDataValueGrid").jqGrid('setCell',rowid,7,m,false,false, true); 
60                                              },
61                                              error:function () {
62                                                  layer.msg("網絡錯誤!");
63                                              }
64                                          })
65                                      });
66                                  });
67                              }
68                              //屏蔽原有編輯事件
69                          jQuery("#baseWageDataValueGrid").jqGrid('setGridParam',{'cellEdit':false});

將JS代碼加入JQgrid 的gridComplete（加載完成后事件）中后，實現效果如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jqGrid合並單元格 JqGrid單元格自動換行 JqGrid自定義獲取編輯中單元格的值基於Grid快速實現CRUD：單元格編輯 element-ui實現單元格點擊可編輯 vue+element-ui 實現table單元格點擊編輯，並且按上下左右鍵單元格之間切換 antd typescript 可編輯單元格 DataGridView 單擊單元格啟動編輯 GridControl單元格編輯驗證的方法 Extjs之grid單元格編輯校驗