Jqgrid Example

Posted onby admin

Getting Started jqxGrid The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing.

Jqgrid ExampleJqgrid example
  1. In the above image a sample jQGrid created is displayed. In the View Information section, you can see that there is only 10 items (data) is displayed out of 257 data. Which means only 10 data is fetching at a time from database, this will leads the grid loading is faster.
  2. JqGrid is implemented as jQuery plugin, our plugin uses jQuery UI CSS or Bootstrap CSS for styling. Thus one would have to include the corresponding JavaScript and CSS files. The second basic thing, which one should know, is the fact that free jqGrid uses HTML internally.
  3. Not a member of Pastebin yet? Sign Up, it unlocks many cool features! JavaScript 8.18 KB.
Dec 9th, 2010
Never
Not a member of Pastebin yet?Sign Up, it unlocks many cool features!

Jqgrid Example Code Project

Example
  1. {%if sub_show_hr_flag %}
  2. var last_selected_row;
  3. jQuery('#grid').jqGrid({
  4. url:'{{ json_data_handler }}?year={{ get_param_year }}&month={{ get_param_month }}&project_id={{ get_param_project_id }}',
  5. mtype:'GET',
  6. colNames:['hour_record_pk','project_pk','WD','date','sum','description','WP'],
  7. {name:'hour_record_pk',index:'hour_record_pk', width:25, hidden:true, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
  8. {name:'project_pk',index:'project_pk', width:25, hidden:true, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
  9. {name:'weekday',index:'weekday', width:40, editable:false, sortable:false},
  10. {name:'date_str',index:'date_str', width:90, editable:true, sortable:false, editoptions:{readonly:true}},
  11. {name:'sum',index:'sum', width:45, editable:true, sortable:false, editrules:{number:true, minValue:0, maxValue:24, required:true}},
  12. //{name:'sum',index:'sum', width:90, editable: true, sortable:false, edittype:'select', editoptions:{required:true,value:'0:0;0.5:0.5;1:1;1.5:1.5;2:2;2.5:2.5;3:3;3.5:3.5;4:4;4.5:4.5;5:5;5.5:5.5;6:6;6.5:6.5;7:7;7.5:7.5;8:8;8.5:8.5;9:9;9.5:9.5;10:10;10.5:10.5;11:11;11.5:11.5;12:12;12.5:12.5;13:13;13.5:13.5;14:14;14.5:14.5;15:15;15.5:15.5;16:16'}},
  13. {name:'description',index:'description', width:990, editable:true, sortable:false, editoptions:{required:true, maxlength:200}},
  14. {name:'work_place',index:'work_place', width:50, editable:true, sortable:false, edittype:'select', editoptions:{required:true,value:'{{ work_place_dropdown }}'}},
  15. jsonReader :{
  16. },
  17. rowNum:{{ row_num }},
  18. sortname:'id',
  19. cellsubmit:'remote',//this is new. check if it works!!!
  20. checkInput:true,//this is new. check if it works!!!
  21. width:975,
  22. height:{{ height }},
  23. caption:'Hour Record Overview for {{ project.projectclassification.is_internal yesno:'internal,external' }} project: {{ project }} - in Month: {{ get_param_month }} - in Year: {{ get_param_year }} ',
  24. reloadAfterSave:true,//seems to have no effect
  25. {% ifequal is_active_param 1%}
  26. onSelectRow:function(row_id){//if hour records already part of an invoice hide this lines
  27. var date_str = jQuery('#grid').getCell(row_id,'date_str');
  28. //var sum = jQuery('#grid').getCell(row_id, 'sum');
  29. var description = jQuery('#grid').getCell(row_id,'description');
  30. if(row_id ! last_selected_row){
  31. //thats the first click of the user after initial load of the grid
  32. .editRow(row_id,true,true,reload);
  33. }
  34. //after user jumps from one cell to another using the mouse
  35. jQuery('#grid').jqGrid('saveRow',last_selected_row,reload);
  36. jQuery('#grid').jqGrid('restoreRow',last_selected_row);
  37. }else{
  38. //if the user clicks in another cell save the last edited cell - does not work yet
  39. //jQuery('#grid').jqGrid('saveRow',last_selected_row,reload);
  40. //jQuery('#grid').jqGrid('editRow',row_id, true,false,reload);
  41. .editRow(row_id,true,true,reload);
  42. }
  43. }
  44. alert('row id null');
  45. },
  46. {% endifequal %}
  47. var currentTime =newDate();
  48. if(month <10){
  49. }
  50. if(day <10){
  51. }
  52. var actual_date_str = year +'-'+ month +'-'+ day;
  53. var cont = jQuery('#grid').getCell(rowid,'weekday');
  54. var date_str = jQuery('#grid').getCell(rowid,'date_str');
  55. if(cont 'Sa' cont 'Su'){
  56. jQuery('#grid').setCell(rowid,'description',',{background:'#DCDCDC','border-color':'#808080'})
  57. jQuery('#grid').setCell(rowid,'date_str',',{background:'#DCDCDC','border-color':'#808080'})
  58. jQuery('#grid').setCell(rowid,'sum',',{background:'#DCDCDC','border-color':'#808080'})
  59. jQuery('#grid').setCell(rowid,'weekday',',{background:'#DCDCDC','border-color':'#808080'})
  60. jQuery('#grid').setCell(rowid,'work_place',',{background:'#DCDCDC','border-color':'#808080'})
  61. if(cont 'Fr'){
  62. jQuery('#grid').setCell(rowid,'description',',{'border-bottom-color':'#808080'})
  63. jQuery('#grid').setCell(rowid,'date_str',',{'border-bottom-color':'#808080'})
  64. jQuery('#grid').setCell(rowid,'sum',',{'border-bottom-color':'#808080'})
  65. jQuery('#grid').setCell(rowid,'weekday',',{'border-bottom-color':'#808080'})
  66. jQuery('#grid').setCell(rowid,'work_place',',{'border-bottom-color':'#808080'})
  67. if(date_str 'Total'){
  68. jQuery('#grid').setCell(rowid,'date_str',',{background:'#DCDCDC','color':'#000000','font-weight':'bold','vertical-align':'middle'})
  69. jQuery('#grid').setCell(rowid,'sum',',{background:'#DCDCDC','color':'#00BFFF','font-weight':'bold','vertical-align':'middle'})
  70. jQuery('#grid').setCell(rowid,'description',',{background:'#DCDCDC','color':'#000000','font-weight':'bold','vertical-align':'middle'})
  71. jQuery('#grid').setCell(rowid,'weekday',',{background:'#DCDCDC','color':'#000000','font-weight':'bold','vertical-align':'middle'})
  72. jQuery('#grid').setCell(rowid,'work_place',',{background:'#DCDCDC','color':'#000000','font-weight':'bold','vertical-align':'middle'})
  73. if(date_str actual_date_str){
  74. jQuery('#grid').setCell(rowid,'date_str',',{'color':'#FF3300','vertical-align':'middle'})
  75. jQuery('#grid').setCell(rowid,'sum',',{'color':'#FF3300','vertical-align':'middle'})
  76. jQuery('#grid').setCell(rowid,'description',',{'color':'#FF3300','vertical-align':'middle'})
  77. jQuery('#grid').setCell(rowid,'weekday',',{'color':'#FF3300','vertical-align':'middle'})
  78. jQuery('#grid').setCell(rowid,'work_place',',{'color':'#FF3300','vertical-align':'middle'})
  79. jQuery('#grid').setCell(rowid,'date_str',',{'text-align':'center','vertical-align':'middle'})
  80. jQuery('#grid').setCell(rowid,'sum',',{'text-align':'center','vertical-align':'middle'})
  81. jQuery('#grid').setCell(rowid,'weekday',',{'text-align':'center','vertical-align':'middle'})
  82. jQuery('#grid').setCell(rowid,'work_place',',{'text-align':'center','vertical-align':'middle'})
  83. jQuery('#grid').setCell(rowid,'description',',{'text-align':'left','vertical-align':'middle'})
  84. beforeSaveCell :function(rowid,celname,value,iRow,iCol){
  85. return'new value';
  86. },
  87. beforeSubmitCell :function(rowid,celname,value,iRow,iCol){
  88. return'new value';
  89. },
  90. beforeEditCell :function(rowid,celname,value,iRow,iCol){
  91. return'new value';
  92. },
  93. }).navGrid('#gridpager');
  94. $('#grid').trigger('reloadGrid');
  95. {% endif %}
RAW Paste Data
Jqgrid Example

Jqgrid Example Download