jqGrid with excel like feature
HTML
<link rel="stylesheet" href="http://nhoutral.com/jsDemo/js/jqgrid/4.1.2/css/ui.jqgrid.css">
<script src="http://nhoutral.com/jsDemo/js/jquery/ui/1.8.11/jquery-ui.custom.min.js"></script>
<script src="http://nhoutral.com//jsDemo/js/jquery/ui/1.8.11/i18n/jquery-ui-i18n.js"></script>
<link rel="stylesheet" href="http://nhoutral.com//jsDemo/js/jquery/ui/1.8.11/css/themes/smoothness/jquery-ui-1.8.11.custom.css">
<script src="http://nhoutral.com/jsDemo/js/jqgrid/4.1.2/js/json2.js"></script>
<script src="http://nhoutral.com/jsDemo/js/jqgrid/4.1.2/js/i18n/grid.locale-en.js"></script>
<script src="http://nhoutral.com/jsDemo/js/jqgrid/4.1.2/js/jquery.jqGrid.min.js"></script>
<script src="http://nhoutral.com/jsDemo/js/misc.js"></script>
<!-- stores the highlighted cells content from the grid -->
<input type="hidden" id="hidSelected" value="" />
<!-- stores copy of "hidselected" value on copy event -->
<input type="hidden" id="hidCopiedText" value="" />
<!-- Start and End of cell selection -->
<input type="hidden" id="hidStartCell" value="" />
<input type="hidden" id="hidEndCell" value="" />
<!-- Start and End of last modified cell(s) -->
<input type="hidden" id="hidModStartCell" value="" />
<input type="hidden" id="hidModEndCell" value="" />
<div id="grd_asset_container" >
<table id="grd_asset" width="100%" onmousedown="return disableSelection(this, enableOnSelectEvent);"></table>
</div>
<div id="pager" style='width: 100%;'>
</div>
<br />
<br />
<div style="padding-left:20px;">
Sample test site for jqGrid with excel like features (compatible with Chrome, Firefox, IE 9). <b>Feature Highlights:</b><br /><br />
<li><font color="blue">copy-paste</font></li>
<li>------one cell to many</li>
<li>------copy multiple cell blocks and duplicate it</li>
<li>------warning if the source and destination cell columns are different</li>
<li>------direct from Excel to Grid and vice-versa (only on Internet Explorer)</li>
<li>------cell modified notification on the caption...
CSS
body{ font-size: 12px; }
li { font-size:14px;}
.sel { background-color: #96B9DC !important;}
.altered {}
JavaScript
function disableSelection(target, enableOnSelectEvent) {
if (typeof target.onselectstart != "undefined") //IE route
target.onselectstart = function() {
return enableOnSelectEvent;
}
else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
target.style.MozUserSelect = (enableOnSelectEvent) ? "text" : "none";
return true;
}
/***************************************************/
/**************** JQgrid Utilities ****************/
/***************************************************/
FnGrid = function(objGrid, origcaption, txtmodifiedcaption) {
this.Id = objGrid[0].id;
this.OrigCaption = origcaption;
this.ModifiedCaption = txtmodifiedcaption;
this.GridColumns = function() {
return objGrid.getGridParam('colModel');
}
this.GetSelCells = function() {
return objGrid.find("td.sel");
}
this.ClearSelection = function() {
objGrid.find("td").removeClass("sel");
}
this.ClearSavedHistory = function() {
objGrid.removeData();
}
this.ClearMarkedChanges = function() {
objGrid.find("tr").removeClass("altered");
}
this.GetEditedRows = function() {
return objGrid.find("tr.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.IsCellInEditMode = function(cell) {
return cell.hasClass("edit-cell");
}
this.IsInEditMode = function() {
var savedRows = objGrid.getGridParam('savedRow');
return (savedRows && savedRows.length > 0);
}
this.PutCellInEdit = function(cell,...