API tools faq
paste
Guest User

slickgrid can't scroll to the bottom

a guest
Apr 4th, 2013
391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4. <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
  5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6. <head>
  7. <meta charset="utf-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9. <title>Slickgrid paging</title>
  10. <meta name="description" content="">
  11. <meta name="viewport" content="width=device-width">
  12. <!--<link rel="stylesheet" type="text/css" media="screen" href="http://192.168.1.18/mine/assets/default/styles/jqgrid/jquery-ui-1.10.1.custom.min.css" />-->
  13. <!--<link rel="stylesheet" type="text/css" media="screen" href="http://192.168.1.18/mine/assets/default/styles/bootstrap/bootstrap.min.css" />-->
  14. <link rel="stylesheet" type="text/css" media="screen" href="http://192.168.1.18/mine/assets/default/styles/slickgrid/slick_grid.css" />
  15. <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  16. <script src="http://192.168.1.18/mine/assets/default/scripts/jqgrid/jquery-1.9.1.min.js" type="text/javascript"></script>
  17. <script type="text/javascript" src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/jquery.event.drag-2.0.min.js"></script>
  18. <script type="text/javascript" src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.core.js"></script>
  19. <script type="text/javascript" src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.grid.js"></script>
  20. <!-- I THINK THIS IS REQUIREMENT FOR INLINE EDITING-->
  21. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.cellrangedecorator.js"></script>
  22. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.cellrangeselector.js"></script>
  23. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.cellselectionmodel.js"></script>
  24. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.formatters.js"></script>
  25. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.editors.js"></script>
  26. <!-- BUAT PAGING -->
  27. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.dataview.js"></script>
  28. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.pager.js"></script>
  29. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.cellselectionmodel.js"></script>
  30. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.rowselectionmodel.js"></script>
  31. <!-- BUAT PAGING -->
  32. <script src="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.pager.js"></script>
  33. <link rel="stylesheet" type="text/css" href="http://192.168.1.18/mine/assets/default/scripts/slickgrid/slick.pager.css">
  34. <link rel="stylesheet" type="text/css" href="http://192.168.1.18/mine/assets/default/styles/slickgrid/slick.example.css">
  35. <link rel="stylesheet" type="text/css" href="http://192.168.1.18/mine/assets/default/styles/jqgrid/jquery-ui-1.10.1.custom.min.css">
  36. <!-- DO WE NEED THIS??? -->
  37. <script src="http://192.168.1.18/mine/assets/default/scripts/jqgrid/jquery-ui-1.10.1.custom.min.js"></script>
  38.  
  39. </head>
  40. <body>
  41. <!--[if lt IE 7]>
  42. <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
  43. <![endif]-->
  44. <script type="text/javascript">
  45. var ajaxFileURL="slickgrid_json/json_db_slickgrid/1400";
  46. var ajaxUpdateURL="update";
  47.  
  48. function populateList(ajaxFileURL){
  49. //var msgDelete = 'Anda yakin ingin hapus data ini?';
  50. //var deleteIcon = '<img src="del.png" border="0" />';
  51.  
  52. var grid;
  53. var columns = [
  54. //id='id', name='nama di field', field='data yang diisikan', option lain
  55. {id: "id", name: "ID", field: "id", sortable: true, width: 30},
  56. {id: "username", name: "Username", field: "username", sortable: true, editor: Slick.Editors.Text},
  57. {id: "age", name: "Age", field: "age", sortable: true, editor: Slick.Editors.Text, width: 30},
  58. {id: "city", name: "City", field: "city", sortable: true, editor: Slick.Editors.Text},
  59. {id: "country", name: "Country", field: "country", sortable: true, editor: Slick.Editors.LongText},
  60. {id: "gender", name: "Gender", field: "gender", sortable: true, editor: Slick.Editors.Text, width:30}
  61. ];
  62. var options = {
  63. editable: true,
  64. enableAddRow: false,
  65. asyncEditorLoading: false,
  66. autoEdit: false,
  67. forceFitColumns: true,
  68. enableRowReordering: true,
  69. enableCellNavigation: true,
  70. enableColumnReorder: false,
  71. //yo mamen, jangan lupa kalau mau make fitur multi-sort di beberapa column atau di semua column => multiColumnSort: true
  72. multiColumnSort: true
  73. };
  74. //tambahan dari stackoverflow juga
  75. $.getJSON(ajaxFileURL,ajaxUpdateURL,function(data){
  76. //i don't know should i use looping method, but i found this at stackoverflow
  77. //this extract json data
  78. for(var i=0; i< data.length; i++)
  79. {
  80. data[i]["id"] = data[i].id;
  81. data[i]["username"] = data[i].username;
  82. data[i]["age"] = data[i].age;
  83. data[i]["city"] = data[i].city;
  84. data[i]["country"] = data[i].country;
  85. data[i]["gender"]=data[i].gender;
  86. }
  87. //function dibawah cuman buat ngasih tau apa request JSON sampai atau tidak
  88. //alert("JSON DATA = "+data[1].invdate);
  89. //data contains the response from the ajax call at this point
  90.  
  91.  
  92.  
  93.  
  94. dataView = new Slick.Data.DataView();
  95. grid = new Slick.Grid("#myGrid", dataView, columns, options);
  96. var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
  97.  
  98.  
  99.  
  100.  
  101. grid.onCellChange.subscribe(function(e, args){
  102. //jika kolom tak terdefinisi, means no value...
  103. //berarti dia mo insert data
  104. if (typeof(args.item.id)=='undefined')
  105. $.post(ajaxFileURL+"?action=insert", args.item);
  106. //jika yang lain???? berarti update
  107. else{
  108. $.post(ajaxUpdateURL, args.item, function(ServerResponseUpt){
  109. // if database return an error then display it to the user and undo the cell change
  110. if(parseInt(ServerResponseUpt.affected_rows) < 1 || ServerResponseUpt.error_msg != "") {
  111. alert("UPDATE ERROR: "+ServerResponseUpt.error_msg);
  112. args.item[ previousCellNames[0] ] = previousCellValues[0];
  113. grid.updateRow(args.row);
  114. grid.updateRowCount();
  115. grid.render();
  116. }
  117. previousCellNames = new Array();
  118. previousCellValues = new Array();
  119. }, "json");
  120.  
  121. // refresh the data on grid
  122. grid.updateRow(args.row);
  123. grid.updateRowCount();
  124. grid.render();
  125. }
  126. console.log(args.item.id);
  127. })
  128. grid.onAddNewRow.subscribe(function(e, args) {
  129. var item = args.item;
  130. var column = args.column;
  131. grid.invalidateRow(data.length);
  132. data.push(item);
  133. grid.updateRowCount();
  134. grid.invalidate();
  135. grid.render();
  136. });
  137.  
  138.  
  139. // wire up model events to drive the grid
  140. dataView.onRowCountChanged.subscribe(function (e, args) {
  141. grid.updateRowCount();
  142. grid.render();
  143. });
  144. dataView.onRowsChanged.subscribe(function (e, args) {
  145. grid.invalidateRows(args.rows);
  146. grid.render();
  147. });
  148.  
  149. // Feed the data into the dataview
  150. dataView.setItems(data);
  151.  
  152. });
  153. };
  154. // outside function to DELETE
  155. /*
  156. function removeClick(ajaxFileURL, dbRowId, gridRow) {
  157. $.post( ajaxFileURL+'?action=delete', {id:dbRowId} );
  158. var item = dataView1.getItem(gridRow);//RowNum is the number of the row
  159. var rowID = item.id
  160. dataView1.deleteItem(rowID);//RowID is the actual ID of the grid row and not the DB row
  161. grid1.invalidate();
  162. grid1.render();
  163. };
  164. */
  165.  
  166. jQuery(document).ready(function($) {
  167. // Stuff to do as soon as the DOM is ready;
  168. populateList(ajaxFileURL);
  169. });
  170. </script>
  171.  
  172. <p></p>
  173. <div style="position: relative">
  174. <table width="100%">
  175. <tr>
  176. <td valign="top" width="50%">
  177. <div id="myGrid" style="width:500px; height:500px;"></div>
  178. <div id="pager" style="width: 500px; height:20px;"></div>
  179. </td>
  180. <td valign="top">
  181. <h2>Demonstrates:</h2>
  182. <ul>
  183. <li>basic grid with minimal configuration</li>
  184. <li>and multi-sorting column (some column)</li>
  185. <li>Lama eksekusi skrip : 0.0681</li>
  186. <li>Memori yang digunakan : 3.46MB</li>
  187. </ul>
  188. </td>
  189. </tr>
  190. </table>
  191. </div>
  192. <!--end of SlickGrid-->
  193. </body>
  194. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!