Edited 5/14/12: I was finally able to jump out of my laziness and prepare this to share the actual EXCEL LIKE JQGRID. . Cell selection may work in jsfiddle on multiple browsers, but it should work fine in your development window. Good luck !!!!
Edited 9/13/11: This is my first use of JQGrid. I am using ver 4.1.2. I spent several weeks building an excellent grid, and the most difficult task was to find the right information on how to use JQGrid. My current installation has a lot of ajax updates and art galleries and the use of jqgrid formatting, but what I put here is the main code that allows you to use JQgrid server-side swap to outperform both copying and demonstrating several other functions on jqgrid. This is just my way to get back all the help I received from this community.
For people who just jumped into JQGrid, you will soon find out that there is some problem using Textarea in jqgrid. You can find some solutions here .
Original post:
Just give a little update before asking my question ....
I was able to come up with some additional functions on jqgrid that I use (after going through many forums), including: copy-paste back and forth from Excel to jqgrid, editing a cell when pressed and dblclick, copy and paste several cells from one block to another in the same grid using mouse selection (hence the use of Javascript to "summarize selected cells" in IE6 )
Most copy functions are only inserted into IE at this time. I save all the changes together to the "Save" button, so all updates on the cells are displayed on the screen only until the user clicks the "Save" button.
Despite the fact that now it is still in motion, I would like to see the implementation design on paper now, and not later. I am looking for an easy way for UNDO only for the LAST changes. I was thinking about using jQuery's "data ()" and "removeData ()" methods to implement this, but if there is something already existing in the jqgrid infrastructure, I would like to know. Any suggestions?
<style type="text/css"> .sel {background-color: #96B9DC !important; } .altered {} </style> <script type="text/javascript"> var enableOnSelectEvent = false; </script> <div style="width:100%; background-color:#FFF; border:1px solid #000;"><input id="btnsavechanges" value="Save Changes" style="width:120px;" class="formbutton ui-corner-all" type="button" onclick="getChanges(); return false;" /></div> <table id="grd_asset" width="100%" onSelectStart="return enableOnSelectEvent;"></table> <div id="pfrmac" style='width:100%;'></div> <input type="hidden" id="hidSelected" value="" /> <input type="hidden" id="hidCopiedText" value="" /> <input type="hidden" id="hidStartCell" value="" /> <input type="hidden" id="hidEndCell" value="" /> <input type="hidden" id="hidModStartCell" value="" /> <input type="hidden" id="hidModEndCell" value="" /> <script type="text/javascript"> FnGrid = function () { this.GridColumns = function () { return assetGrid.jqGrid('getGridParam', 'colModel'); } this.GetSelCells = function () { return assetGrid.find("td.sel"); } this.ClearSelection = function () { assetGrid.find("td").removeClass("sel"); } this.ClearSavedHistory = function () { assetGrid.removeData(); } this.ClearMarkedChanges = function () { assetGrid.find("tr").removeClass("altered"); } this.GetRowCells = function (cell) { return cell.parent().children("td") } this.GetRowId = function (cell) { var row = cell.closest('tr.jqgrow'); return row.attr('id'); } this.GetRowIndex = function (cell) { var cellrow = cell.parent(); return cellrow.parent().children("tr").index(cellrow); } this.GetColIndex = function (cell) { return cell.parent().children("td").index(cell); } this.IsInEditMode = function () { var savedRows = assetGrid.getGridParam('savedRow'); return (savedRows && savedRows.length > 0); } this.PutCellInEdit = function (cell, irow, icol, edit) { assetGrid.editCell(irow, icol, edit); </script>
Thank you very much in advance!