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

/*******************************************
* 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;
        //            }
        //        });
    }
};

 

posted @ 2013-09-27 14:41  刀叨  阅读(8991)  评论(0编辑  收藏  举报