CodePaste.NET

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   5:  <title>Untitled Document</title>
   6:  <link rel="stylesheet" type="text/css" media="screen" href="/css/redmond/jquery-ui-1.7.2.custom.css" />
   7:  <link rel="stylesheet" type="text/css" media="screen" href="/css/ui.jqgrid.css" />
   8:  <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script> 
   9:  <script src="/js/grid.locale-en.js" type="text/javascript"></script>
  10:  <script src="/js/jquery.jqGrid.min.js" type="text/javascript"></script>
  11:  </head>
  12:   
  13:  <body>
  14:   
  15:  <table id="myTable"></table>
  16:  <input type="button" value="Delete Row" onclick="deleteRow();" /><br />
  17:  <input type="button" value="Get Row IDs" onclick="getRowIDs();" /><br />
  18:  <input type="button" value="Move up" onclick="move('up');" /><br />
  19:  <input type="button" value="Move down" onclick="move('down');" /><br />
  20:  <input type="button" value="Get Current Row" onclick="getCurrentRow();" />
  21:   
  22:  <script type="text/javascript">
  23:   var $table = $('#myTable');
  24:   $(document).ready(function(){
  25:   $table.jqGrid({
  26:   datatype : 'local',
  27:   width    : 300,
  28:   height   : 250,
  29:   colNames : ['Rank', 'ID', 'Product Description'],
  30:   colModel : [
  31:   { name: 'id', index: 'id', sorttype: 'int', sortable: false },
  32:   { name: 'productID', index: 'productID', sortable: false },
  33:   { name: 'productTitle', index: 'productTitle', sortable: false }
  34:   ],
  35:   caption  : 'Top 10 Products'
  36:   });
  37:   var myData = [
  38:   <cfloop from="1" to="10" index="n"><cfoutput>
  39:   {id: '#n#', productID: '#n#', productTitle: 'A test product #n#'}
  40:   <cfif n lt 10>,</cfif>
  41:   </cfoutput></cfloop>
  42:   ]
  43:   for(var i = 0; i < myData.length; i++){
  44:   $table.jqGrid('addRowData', i + 1, myData[i]);
  45:   }
  46:   });
  47:   function deleteRow(){
  48:   var tableData = new Array();
  49:   var ids = '';
  50:   $table.delRowData($table.getGridParam('selrow'));
  51:   ids = $table.getDataIDs();
  52:   for(var i = 0; i < ids.length; i++){
  53:   tableData[i] = $table.getRowData(ids[i]);
  54:   tableData[i].id = i + 1;
  55:   }
  56:   $table.clearGridData(false);
  57:   for(i = 0; i < tableData.length; i++){
  58:   $table.addRowData(i + 1, tableData[i]);
  59:   }
  60:   }
  61:   function move(direction){
  62:   if($table.getGridParam('selrow')){
  63:   var ids = $table.getDataIDs();
  64:   var temp = 0;
  65:   var currRow = ids[ $table.getGridParam('selrow') - 1 ];
  66:   if(direction === 'up' && currRow > 1){
  67:   var r1 = $table.getRowData(currRow-1);
  68:   var r2 = $table.getRowData(currRow);
  69:   $table.delRowData(currRow-1);
  70:   $table.delRowData(currRow);
  71:   temp = r1.id;
  72:   r1.id = r2.id;
  73:   r2.id = temp;
  74:   $table.addRowData(r2.id, r2);
  75:   $table.addRowData(r1.id, r1);
  76:   }
  77:   if(direction === 'down' && currRow < (ids.length)){
  78:   var r1 = $table.getRowData(currRow);
  79:   var r2 = $table.getRowData(parseInt(currRow)+1);
  80:   $table.delRowData(currRow);
  81:   $table.delRowData(parseInt(currRow)+1);
  82:   temp = r1.id;
  83:   r1.id = r2.id;
  84:   r2.id = temp;
  85:   $table.addRowData(r1.id, r1);
  86:   $table.addRowData(r2.id, r2);
  87:   }
  88:   // Sort the table   
  89:   $table.setGridParam({sortname:'id'}).trigger('reloadGrid');
  90:   }
  91:   }
  92:   function dumpObject(obj){
  93:   var dataString = '';
  94:   for(var i in obj){
  95:   dataString += i + ': ' + obj[i] + '\n';
  96:   }
  97:   alert(dataString);
  98:   }
  99:   function getRowIDs(){
 100:   var ids = $table.getDataIDs();
 101:   var dataString = '';
 102:   for(var i = 0; i < ids.length; i++){
 103:   dataString += 'postion: ' + i + ' ' + ids[i] + '\n';
 104:   }
 105:   alert(dataString);
 106:   }
 107:   function getCurrentRow(){
 108:   var dataString = '';
 109:   var ids = $table.getDataIDs();
 110:   dataString += 'Selected Row: ' + $table.getGridParam('selrow') + '\nRow ID: ' + ids[$table.getGridParam('selrow') - 1];
 111:   alert(dataString);
 112:   }
 113:  </script>
 114:   
 115:  </body>
 116:  </html>