自定义jqGrid编辑功能，当行获取焦点时编辑，失去焦点时保存

Posted 2021-01-22 yxdmoodoo

  1 http://www.360doc.com/content/17/0719/15/9200790_672577533.shtml
  2 /*******************************************
  3 * Description:
  4 * 自定义jqGrid编辑功能，当行获取焦点时编辑，失去焦点时保存
  5 *
  6 * 调用方法：
  7 * 在jGrid的(opts参数中)"editurl"属性的上面或下面添加属性 customEdit: true
  8 *
  9 * Author:
 10 *******************************************/
 11 var JqGridCustomEdit = {
 12     _cacheName: "editGrid_PrevRowKey",
 13     _saveBtnName: "editGrid_BtnSave",
 14 
 15     init: function (gridID) {
 16         //this.createSaveButton(gridID);
 17         this.createRowBlurEvent(gridID);
 18     },
 19 
 20     createSaveButton: function (gridID) {
 21         var self = this;
 22         var saveBtnID = gridID + "_" + self._saveBtnName;
 23         var htmlButton = ‘<input type="button" id="‘ + saveBtnID + ‘" onClick="JqGridCustomEdit._saveData(‘‘ + gridID + ‘‘)" style="display:none" value="saveRow" />‘;
 24         $("body").append(htmlButton);
 25     },
 26 
 27     createRowBlurEvent: function (gridID) {
 28         var self = this;
 29         $("body").bind("click", function (event) {
 30             self.onRowBlur(gridID, event);
 31         });
 32     },
 33 
 34     onSave: function (gridID) {
 35         var saveBtnID = gridID + "_" + this._saveBtnName;
 36         $("#" + saveBtnID).click();
 37     },
 38     showEditCss: function (gridID, show) {
 39         if (show) {
 40             $("#" + gridID + "_ilsave").removeClass(‘ui-state-disabled‘);
 41             $("#" + gridID + "_ilcancel").removeClass(‘ui-state-disabled‘);
 42             $("#" + gridID + "_iladd").addClass(‘ui-state-disabled‘);
 43             $("#" + gridID + "_iledit").addClass(‘ui-state-disabled‘);
 44         }
 45         else {
 46             $("#" + gridID + "_ilsave").addClass(‘ui-state-disabled‘);
 47             $("#" + gridID + "_ilcancel").addClass(‘ui-state-disabled‘);
 48             $("#" + gridID + "_iladd").removeClass(‘ui-state-disabled‘);
 49             $("#" + gridID + "_iledit").removeClass(‘ui-state-disabled‘);
 50         }
 51     },
 52     onSelectRow: function (gridID, rowid) {
 53         var self = this;
 54         var rowKeyCacheID = gridID + "_" + self._cacheName;
 55         var prevRowKey = $("body").data(rowKeyCacheID);
 56 
 57         $("body").data(rowKeyCacheID, rowid);
 58 
 59         JqGridFormatCell.beforEditRow(gridID, rowid);
 60         $("#" + gridID).jqGrid("editRow", rowid, $("#" + gridID).get(0).p.editParams);
 61         self.showEditCss(gridID, true);
 62     },
 63 
 64     onRowBlur: function (gridID, event) {
 65         var haveEditRow = false;
 66         $("#" + gridID).find("tr").each(function () {
 67             if ($(this).attr("editable") == "1") {
 68                 haveEditRow = true;
 69                 return false;
 70             }
 71         });
 72 
 73         if (haveEditRow) {
 74             var self = this;
 75             var rowid = $("#" + gridID).jqGrid(‘getGridParam‘, ‘selrow‘);
 76             if (rowid == null) { return; }
 77 
 78             var eventObj = ((event.srcElement) ? event.srcElement : event.target);
 79             var prev = false;
 80             var next = false;
 81             var pClass = $(eventObj).parent().attr("class");
 82             var nClass = $(eventObj).parent().attr("class");
 83             if (pClass) prev = pClass.indexOf("ui-datepicker-prev") != -1;
 84             if (nClass) next = nClass.indexOf("ui-datepicker-next") != -1;
 85             if ($("#ui-datepicker-div").find(eventObj).length > 0 || prev || next) { return; }
 86 
 87             if (eventObj.tagName == "TD") {
 88                 var currgriddom = $("#" + gridID).find(eventObj).length;
 89                 if (currgriddom == 0) {
 90                     self._saveData(gridID);
 91                 }
 92                 //                var $eventTR = $(eventObj).parent();
 93                 //                if ($eventTR.attr("id") != rowid) {
 94                 //                    self._saveData(gridID);
 95                 //                }
 96             }
 97             else if (eventObj.tagName == "INPUT" || eventObj.tagName == "SELECT" || eventObj.tagName == "OPTION") {
 98                 var rid = $(eventObj).attr("id");
 99                 if (rid && rid.indexOf(rowid) == -1) {
100                     self._saveData(gridID);
101                 }
102             }
103             else {
104                 self._saveData(gridID);
105             }
106         }
107     },
108 
109     _saveData: function (gridID) {
110         var self = this;
111         var rowKeyCacheID = gridID + "_" + self._cacheName;
112 
113         var rowid = $("body").data(rowKeyCacheID);
114         if (rowid == null) {
115             return false;
116         }
117         if (rowid == "new_row" && $("#" + rowid).attr("class").indexOf("jqgrid-new-row") != -1) {
118             $("#" + gridID).jqGrid(‘saveRow‘, rowid, $("#" + gridID).get(0).p.addParams);
119         } else {
120             $("#" + gridID).jqGrid(‘saveRow‘, rowid, $("#" + gridID).get(0).p.editParams);
121         }
122         self.showEditCss(gridID, false);
123         //        $("#" + gridID).jqGrid(‘saveRow‘, rowid, function (result) {
124         //            self.showEditCss(gridID, false);
125         //            if (result.responseText == "") {
126         //                //$.jAlert("Update is missing!");
127         //                return false;
128         //            } else {
129         //                $("body").removeData(rowKeyCacheID);
130         //                //$.jAlert("Update is successful");
131         //                return true;
132         //            }
133         //        });
134     }