/******************************************* * Description: * 自定义jqGrid编辑功能,当行获取焦点时编辑,失去焦点时保存 * * 调用方法: * 在jGrid的(opts参数中)"editurl"属性的上面或下面添加属性 customEdit: true * * Author: *******************************************/ var JqGridCustomEdit = { _cacheName: "editGrid_PrevRowKey", _saveBtnName: "editGrid_BtnSave", init: function (gridID) { //this.createSaveButton(gridID); this.createRowBlurEvent(gridID); }, createSaveButton: function (gridID) { var self = this; var saveBtnID = gridID + "_" + self._saveBtnName; var htmlButton = '<input type="button" id="' + saveBtnID + '" onClick="JqGridCustomEdit._saveData(\'' + gridID + '\')" style="display:none" value="saveRow" />'; $("body").append(htmlButton); }, createRowBlurEvent: function (gridID) { var self = this; $("body").bind("click", function (event) { self.onRowBlur(gridID, event); }); }, onSave: function (gridID) { var saveBtnID = gridID + "_" + this._saveBtnName; $("#" + saveBtnID).click(); }, showEditCss: function (gridID, show) { if (show) { $("#" + gridID + "_ilsave").removeClass('ui-state-disabled'); $("#" + gridID + "_ilcancel").removeClass('ui-state-disabled'); $("#" + gridID + "_iladd").addClass('ui-state-disabled'); $("#" + gridID + "_iledit").addClass('ui-state-disabled'); } else { $("#" + gridID + "_ilsave").addClass('ui-state-disabled'); $("#" + gridID + "_ilcancel").addClass('ui-state-disabled'); $("#" + gridID + "_iladd").removeClass('ui-state-disabled'); $("#" + gridID + "_iledit").removeClass('ui-state-disabled'); } }, onSelectRow: function (gridID, rowid) { var self = this; var rowKeyCacheID = gridID + "_" + self._cacheName; var prevRowKey = $("body").data(rowKeyCacheID); $("body").data(rowKeyCacheID, rowid); JqGridFormatCell.beforEditRow(gridID, rowid); $("#" + gridID).jqGrid("editRow", rowid, $("#" + gridID).get(0).p.editParams); self.showEditCss(gridID, true); }, onRowBlur: function (gridID, event) { var haveEditRow = false; $("#" + gridID).find("tr").each(function () { if ($(this).attr("editable") == "1") { haveEditRow = true; return false; } }); if (haveEditRow) { var self = this; var rowid = $("#" + gridID).jqGrid('getGridParam', 'selrow'); if (rowid == null) { return; } var eventObj = ((event.srcElement) ? event.srcElement : event.target); var prev = false; var next = false; var pClass = $(eventObj).parent().attr("class"); var nClass = $(eventObj).parent().attr("class"); if (pClass) prev = pClass.indexOf("ui-datepicker-prev") != -1; if (nClass) next = nClass.indexOf("ui-datepicker-next") != -1; if ($("#ui-datepicker-div").find(eventObj).length > 0 || prev || next) { return; } if (eventObj.tagName == "TD") { var currgriddom = $("#" + gridID).find(eventObj).length; if (currgriddom == 0) { self._saveData(gridID); } // var $eventTR = $(eventObj).parent(); // if ($eventTR.attr("id") != rowid) { // self._saveData(gridID); // } } else if (eventObj.tagName == "INPUT" || eventObj.tagName == "SELECT" || eventObj.tagName == "OPTION") { var rid = $(eventObj).attr("id"); if (rid && rid.indexOf(rowid) == -1) { self._saveData(gridID); } } else { self._saveData(gridID); } } }, _saveData: function (gridID) { var self = this; var rowKeyCacheID = gridID + "_" + self._cacheName; var rowid = $("body").data(rowKeyCacheID); if (rowid == null) { return false; } if (rowid == "new_row" && $("#" + rowid).attr("class").indexOf("jqgrid-new-row") != -1) { $("#" + gridID).jqGrid('saveRow', rowid, $("#" + gridID).get(0).p.addParams); } else { $("#" + gridID).jqGrid('saveRow', rowid, $("#" + gridID).get(0).p.editParams); } self.showEditCss(gridID, false); // $("#" + gridID).jqGrid('saveRow', rowid, function (result) { // self.showEditCss(gridID, false); // if (result.responseText == "") { // //$.jAlert("Update is missing!"); // return false; // } else { // $("body").removeData(rowKeyCacheID); // //$.jAlert("Update is successful"); // return true; // } // }); } };