可编辑的GridView

// The script file for the GridView Extender, which allows editing cells in a GridView control // Copyright 2007 Webappexpert // Version history: // 29 september 2007: create initial version Type.registerNamespace('BM.Extenders'); BM.Extenders.GridViewBehavior = function(element) { BM.Extenders.GridViewBehavior.initializeBase(this, [element]); this._cancelButtonText = null; this._saveButtonText = null; this._editableColumns = null; this._changedNotification = null; this._serviceMethod = null; this._failureText = null; this._successText = null; this._hiddenColumns = null; } BM.Extenders.GridViewBehavior.prototype = { initialize : function() { BM.Extenders.GridViewBehavior.callBaseMethod(this, 'initialize'); //hook up to the initialization of the request Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(onPostBack); var element = this.get_element(); gridName = element.id; initialise(); }, dispose : function() { //remove the event handler Sys.WebForms.PageRequestManager.getInstance().remove_initializeRequest(onPostBack); BM.Extenders.GridViewBehavior.callBaseMethod(this, 'dispose'); }, get_CancelButtonText: function() { return this._cancelButtonText; }, set_CancelButtonText: function(value) { if(this._cancelButtonText !== value) { this._cancelButtonText = value; cancelButtonText = value; this.raisePropertyChanged('CancelButtonText'); } }, get_SaveButtonText: function() { return this._saveButtonText; }, set_SaveButtonText: function(value) { if(this._saveButtonText !== value) { this._saveButtonText = value; saveButtonText = value; this.raisePropertyChanged('SaveButtonText'); } }, get_EditableColumns: function() { return this._editableColumns; }, set_EditableColumns: function(value) { if(this._editableColumns !== value) { this._editableColumns = value; editableColumns = value.split(','); this.raisePropertyChanged('EditableColumns'); } }, get_ChangedNotification: function() { return this._changedNotification; }, set_ChangedNotification: function(value) { if(this._changedNotification !== value) { this._changedNotification = value; changedNotification = value; this.raisePropertyChanged('ChangedNotification'); } }, get_ServiceMethod: function() { return this._serviceMethod; }, set_ServiceMethod: function(value) { if(this._serviceMethod !== value) { this._serviceMethod = value; serviceMethod = value; this.raisePropertyChanged('ServiceMethod'); } }, get_FailureText: function() { return this._failureText; }, set_FailureText: function(value) { if(this._failureText !== value) { this._failureText = value; failureText = value; this.raisePropertyChanged("FailureText"); } }, get_SuccessText: function() { return this._successText; }, set_SuccessText: function(value) { if(this._successText !== value) { this._successText = value; successText = value; this.raisePropertyChanged("SuccessText"); } }, get_HiddenColumns: function() { return this._hiddenColumns; }, set_HiddenColumns: function(value) { if(this._hiddenColumns !== value) { this._hiddenColumns = value; hiddenColumns = value.split(','); this.raisePropertyChanged("HiddenColumns"); } } } BM.Extenders.GridViewBehavior.registerClass('BM.Extenders.GridViewBehavior', AjaxControlToolkit.BehaviorBase); /***************************************************************************************************************** * THE INJECTION LOGIC ******************************************************************************************************************/ var index = new Array(); var gridName; var buttonColumn = 0; var editing = false; var saveButtonText = "Save"; var cancelButtonText = "Cancel"; var editableColumns = []; var changedNotification = ""; var serviceMethod = ""; var hiddenColumns = []; /*************************************************** * fired when the page has loaded * * injects the needed functionality in the grid * ****************************************************/ function initialise() { var rows = $get(gridName).rows; buttonColumn = rows[0].cells.length; var baseButtons = "<span style=\"visibility:hidden;\"><input type=\"button\" value=\"" + saveButtonText + "\" onclick=\"send({0})\" />&nbsp;&nbsp;<input type=\"button\" value=\"" + cancelButtonText + "\" onclick=\"cancel()\" /></span>"; //add the button column with formatted basestring //create BM.Extenders.TableCell objects out of the cell + add the onclick function for(i=0; i<rows.length; i++) { var cell = rows[i].insertCell(buttonColumn); if(i>0) { cell.innerHTML = String.format(baseButtons, i); for(j=0;j<editableColumns.length; j++) { //check valid column number given if(editableColumns[j]<buttonColumn && editableColumns[j] >= 0) { cell = $create(BM.Extenders.TableCell, {row: i, col: editableColumns[j]}, {click: edit}, null, rows[i].cells[editableColumns[j]]); } } } //hide the hidden columns if(hiddenColumns.length>0){ for(j=0; j<hiddenColumns.length; j++) { if(hiddenColumns[j] >= 0) { //hide the column rows[i].cells[hiddenColumns[j]].style.display = "none"; } } } } } /*************************************************** * specific functionalities * ****************************************************/ function edit(eventElement) { var row = eventElement.get_row(); var col = eventElement.get_col(); //first cell to edit if(!editing) { var cell = getCell(row, col); setEditing(row, col); makeEditable(cell); }else{ //determine which cell was previously being edited if(evalEditingRow(row, col)) { //another cell in the same row //remove textbox from previously edited cell var cell = getCell(index[0], index[1]); updateCell(cell); //push the items back to make room index.Slide(1,2); cell = getCell(row, col); setEditing(row, col); makeEditable(cell); } if(evalDifferentRow(row)) { //click raised on different row //get the cell var cell = getCell(index[0], index[1]); //remove textbox updateCell(cell); var changed = evalCellChanged(); var proceed = false; //if no notification text defined, proceed anyway var notify = true; if(changedNotification === "") { notify = false; proceed = true; } if(changed && notify) { if(window.confirm(changedNotification)) proceed = true;