API tools faq
paste
ilc2831

Jqgrid

ilc2831
Apr 11th, 2016
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.72 KB | None | 0 0
raw download clone embed print report
  1. <title>P-Dos # List Of Wells</title>
  2. <link rel="stylesheet" href="<?= base_url() ?>components/_mod/jquery-ui/jquery-ui.css" />
  3. <link rel="stylesheet" href="<?= base_url() ?>components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
  4. <link rel="stylesheet" href="<?= base_url() ?>components/_mod/jqgrid/ui.jqgrid.css" />
  5.  
  6. <!-- ajax layout which only needs content area -->
  7. <div class="row">
  8. <div class="col-xs-12">
  9. <!-- PAGE CONTENT BEGINS -->
  10. <table id="grid-table"></table>
  11. <div id="grid-pager"></div>
  12. <!-- PAGE CONTENT ENDS -->
  13. </div><!-- /.col -->
  14. </div><!-- /.row -->
  15.  
  16. <!-- page specific plugin scripts -->
  17. <script type="text/javascript">
  18. var JS_SITE_URL = "<?= site_url() ?>";
  19. var JS_BASE_URL = "<?= base_url() ?>";
  20.  
  21. var company_id = "<?= $company_id ?>";
  22. var region_id = "<?= $region_id ?>";
  23. var company_name = "<?= $com->company_name ?>";
  24. var region_name = "<?= $reg->region_name ?>";
  25.  
  26. var scripts = [null,
  27. JS_BASE_URL + "components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
  28. JS_BASE_URL + "components/jqGrid/js/jquery.jqGrid.js",
  29. JS_BASE_URL + "components/jqGrid/js/i18n/grid.locale-en.js", null];
  30.  
  31. $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
  32. //inline scripts related to this page
  33. jQuery(function ($) {
  34. var grid_selector = "#grid-table";
  35. var pager_selector = "#grid-pager";
  36.  
  37. //resize to fit page size
  38. $(window).on('resize.jqGrid', function () {
  39. $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
  40. })
  41.  
  42. //resize on sidebar collapse/expand
  43. var parent_column = $(grid_selector).closest('[class*="col-"]');
  44. $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
  45. if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
  46. //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
  47. setTimeout(function () {
  48. $(grid_selector).jqGrid('setGridWidth', parent_column.width());
  49. }, 0);
  50. }
  51. })
  52.  
  53. var selr = jQuery(grid_selector).jqGrid('getGridParam', 'selrow');
  54. jQuery(grid_selector).setGridParam({datatype: 'json', page: 1}).trigger("reloadGrid");
  55. jQuery(grid_selector).jqGrid({
  56. datatype: "json",
  57. url: JS_SITE_URL + "/well/getListWells",
  58. mtype: "POST",
  59. height: "100%",
  60. colNames: ['', 'Wells Id', 'Wells Name', 'Drilling Rig', 'Drilling Contractor', 'Spud Date', 'TD Date', 'TD Depth'],
  61. colModel: [
  62. {name: '', index: '', width: 100, fixed: true, sortable: false, resize: false,
  63. formatter: 'actions',
  64. formatoptions: {
  65. keys: true,
  66. deldata: {
  67. id: $(selr + 'wells_id').val()
  68. },
  69. delOptions: {
  70. recreateForm: true,
  71. beforeShowForm: beforeDeleteCallback,
  72. },
  73. adwbutton: false
  74. },
  75. search: false
  76. },
  77. {name: 'wells_id', index: 'wells_id', editable: false, align: 'center', width: 150,
  78. searchoptions: {
  79. clearSearch: false
  80. }
  81. },
  82. {name: 'wells_name', index: 'wells_name', editable: true, align: 'left', width: 300,
  83. searchoptions: {
  84. clearSearch: false
  85. }
  86. },
  87. {name: 'drilling_rig', index: 'drilling_rig', editable: true, align: 'left', width: 300,
  88. searchoptions: {
  89. clearSearch: false
  90. }
  91. },
  92. {name: 'drilling_contractor', index: 'drilling_contractor', editable: true, align: 'left', width: 300,
  93. editoptions: {
  94. },
  95. searchoptions: {
  96. clearSearch: false
  97. }
  98. },
  99. {name: 'spud_date', index: 'spud_date', editable: true, align: 'center', width: 150,
  100. editoptions: {
  101. },
  102. searchoptions: {
  103. clearSearch: false
  104. },
  105. sorttype: "date", unformat: pickDate,
  106. formatter: 'date',
  107. formatoptions: {
  108. srcformat: 'ISO8601Long',
  109. newformat: 'd-m-Y H:i',
  110. defaultValue: null
  111. }
  112. },
  113. {name: 'td_date', index: 'td_date', editable: true, align: 'center', width: 150,
  114. editoptions: {
  115. },
  116. searchoptions: {
  117. clearSearch: false
  118. },
  119. sorttype: "date", unformat: pickDate,
  120. formatter: 'date',
  121. formatoptions: {
  122. srcformat: 'ISO8601Long',
  123. newformat: 'd-m-Y H:i',
  124. defaultValue: null
  125. }
  126. },
  127. {name: 'td_depth', index: 'td_depth', editable: true, align: 'center', width: 150,
  128. editoptions: {
  129. },
  130. searchoptions: {
  131. clearSearch: false
  132. }
  133. }
  134. ],
  135. jsonReader: {
  136. root: "rows",
  137. page: "page",
  138. total: "total",
  139. records: "records",
  140. repeatitems: true,
  141. cell: "cell",
  142. id: "id",
  143. userdata: "userdata"
  144. },
  145. viewrecords: true,
  146. rowNum: 10,
  147. rowList: [10, 20, 30, 50, 100],
  148. pager: pager_selector,
  149. loadonce: false,
  150. altRows: true,
  151. closeAfterAdd: true,
  152. closeAfterEdit: true,
  153. multiselect: true,
  154. multiboxonly: true,
  155. shrinkToFit: false,
  156. loadComplete: function () {
  157. var table = this;
  158. setTimeout(function () {
  159. styleCheckbox(table);
  160. updateActionIcons(table);
  161. updatePagerIcons(table);
  162. enableTooltips(table);
  163. }, 0);
  164. },
  165. editurl: JS_SITE_URL + "/well/simpan_wells?cid=" + company_id + "&rid=" + region_id,
  166. reloadAfterSubmit: true,
  167. caption: "List of Well " + company_name + "#Region : " + region_name,
  168. ondblClickRow: function (rowId) {
  169. location.href = "#docs/file_wells?wid=" + rowId;
  170. },
  171. serializeGridData: function (postData) {
  172. var newPostData = $.extend(postData, {
  173. companyID: company_id,
  174. regionID: region_id
  175. });
  176. return $.param(newPostData);
  177. }
  178. });
  179.  
  180. jQuery(grid_selector).jqGrid('filterToolbar', {
  181. autosearch: true,
  182. stringResult: true,
  183. searchOperators: false,
  184. searchOnEnter: false,
  185. defaultSearch: "cn",
  186. enableClear: false
  187. });
  188.  
  189. $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
  190. //enable datepicker
  191. function pickDate(cellvalue, options, cell) {
  192. setTimeout(function () {
  193. $(cell).find('input[type=text]')
  194. .datepicker({format: 'dd-mm-yyyy', autoclose: true});
  195. }, 0);
  196. }
  197.  
  198. jQuery(grid_selector).jqGrid('navGrid', pager_selector,
  199. {//navbar options
  200. edit: false,
  201. editicon: 'ace-icon fa fa-pencil blue',
  202. add: true,
  203. addicon: 'ace-icon fa fa-plus-circle purple',
  204. del: false,
  205. delicon: 'ace-icon fa fa-trash-o red',
  206. search: false,
  207. searchicon: 'ace-icon fa fa-search orange',
  208. refresh: true,
  209. refreshicon: 'ace-icon fa fa-refresh green',
  210. view: false,
  211. viewicon: 'ace-icon fa fa-search-plus grey',
  212. },
  213. {
  214. width: 500,
  215. editCaption: 'Edit Wells',
  216. bSubmit: "Simpan",
  217. bCancel: "Batal",
  218. closeAfterEdit: true,
  219. closeOnEscape: true,
  220. reloadAfterSubmit: true,
  221. refreshtext: 'Reload',
  222. recreateForm: true,
  223. beforeShowForm: function (e) {
  224. var form = $(e[0]);
  225. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  226. style_edit_form(form);
  227. }
  228. },
  229. {
  230. //new record form
  231. width: 500,
  232. addCaption: 'Add Wells',
  233. closeAfterAdd: true,
  234. recreateForm: true,
  235. viewPagerButtons: false,
  236. beforeShowForm: function (e) {
  237. var form = $(e[0]);
  238. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
  239. .wrapInner('<div class="widget-header" />')
  240. style_edit_form(form);
  241. }
  242. },
  243. {
  244. //delete record form
  245. width: 300,
  246. caption: "Delete Wells",
  247. msg: "Are You Sure?",
  248. bSubmit: "Hapus",
  249. bCancel: "Batal",
  250. recreateForm: true,
  251. beforeShowForm: function (e) {
  252. var form = $(e[0]);
  253. if (form.data('styled'))
  254. return false;
  255. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  256. style_delete_form(form);
  257. }
  258. },
  259. {
  260. //search form
  261. recreateForm: true,
  262. afterShowSearch: function (e) {
  263. var form = $(e[0]);
  264. form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
  265. style_search_form(form);
  266. },
  267. afterRedraw: function () {
  268. style_search_filters($(this));
  269. }
  270. ,
  271. multipleSearch: true
  272. },
  273. {
  274. //view record form
  275. recreateForm: true,
  276. beforeShowForm: function (e) {
  277. var form = $(e[0]);
  278. form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
  279. }
  280. }
  281. )
  282.  
  283. function style_edit_form(form) {
  284. //update buttons classes
  285. var buttons = form.next().find('.EditButton .fm-button');
  286. buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
  287. buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
  288. buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
  289. buttons = form.next().find('.navButton a');
  290. buttons.find('.ui-icon').hide();
  291. buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
  292. buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
  293. }
  294. function style_delete_form(form) {
  295. var buttons = form.next().find('.EditButton .fm-button');
  296. buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
  297. buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
  298. buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
  299. }
  300. function style_search_filters(form) {
  301. form.find('.delete-rule').val('X');
  302. form.find('.add-rule').addClass('btn btn-xs btn-primary');
  303. form.find('.add-group').addClass('btn btn-xs btn-success');
  304. form.find('.delete-group').addClass('btn btn-xs btn-danger');
  305. }
  306. function style_search_form(form) {
  307. var dialog = form.closest('.ui-jqdialog');
  308. var buttons = dialog.find('.EditTable')
  309. buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
  310. buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
  311. buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
  312. }
  313.  
  314. function beforeDeleteCallback(e) {
  315. var form = $(e[0]);
  316. if (form.data('styled'))
  317. return false;
  318. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  319. style_delete_form(form);
  320. //form.data('styled', true);
  321. }
  322.  
  323. function beforeEditCallback(e) {
  324. var form = $(e[0]);
  325. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  326. style_edit_form(form);
  327. }
  328.  
  329. //it causes some flicker when reloading or navigating grid
  330. //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
  331. //or go back to default browser checkbox styles for the grid
  332. function styleCheckbox(table) {
  333. }
  334.  
  335. function updateActionIcons(table) {
  336. }
  337.  
  338. //replace icons with FontAwesome icons like above
  339. function updatePagerIcons(table) {
  340. var replacement =
  341. {
  342. 'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
  343. 'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
  344. 'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
  345. 'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
  346. };
  347. $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
  348. var icon = $(this);
  349. var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
  350.  
  351. if ($class in replacement)
  352. icon.attr('class', 'ui-icon ' + replacement[$class]);
  353. });
  354. }
  355.  
  356. function enableTooltips(table) {
  357. $('.navtable .ui-pg-button').tooltip({container: 'body'});
  358. $(table).find('.ui-pg-div').tooltip({container: 'body'});
  359. }
  360.  
  361. $(document).one('ajaxloadstart.page', function (e) {
  362. $.jgrid.gridDestroy(grid_selector);
  363. $('.ui-jqdialog').remove();
  364. });
  365. });
  366. });
  367. </script>
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!