Posted By

martinwitts on 03/12/18


Tagged


Versions (?)

jqGrid Example


 / Published in: JavaScript
 

JQgrid

  1. <table id='grid'></table>
  2. <div id='pgrid'></div>
  3.  
  4.  
  5. <script type='text/javascript'>
  6. jQuery('#grid').jqGrid({
  7. "hoverrows":false,
  8. "viewrecords":true,
  9. "jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
  10. "gridview":true,
  11. "loadonce":true,
  12. "url":"/customer",
  13. "scrollPaging":true,
  14. "autowidth":true,
  15. "rowNum":20,
  16. "rowList" : [20,40,60],
  17. "sortname":"OrderID",
  18. "height":200,
  19. "datatype":"json",
  20. colNames:['Id', 'name', 'email', 'phone', 'Mobile', 'Company','Address','Postcode'],
  21. colModel :[
  22. {name:'id', index:'id', width:25, align:'center', editable:false, key:true},
  23.  
  24. {name:'name', index:'firstname', width:80, align:'center', editable:true, editoptions:{size:10}},
  25.  
  26. {name:'email_address', index:'email_address', width:120, align:'center', editable:true, editoptions:{size:10}},
  27. {name:'phone_number', index:'phone_number', width:100, align:'center', editable:true, editoptions:{size:10}},
  28. {name:'mobile', index:'mobile', width:100, align:'center', sortable:false, editable: true, editoptions:{size:10}},
  29. {name:'company', index:'company', width:100, align:'center', editable:true, editoptions:{size:10}},
  30. {name:'address', index:'address', width:120, align:'center', editable:true, editoptions:{size:10}},
  31. {name:'postcode', index:'postcode', width:60, align:'center', editable:true, editoptions:{size:10}},
  32.  
  33.  
  34. ],
  35. "loadError":function(xhr,status, err){
  36. try {
  37. jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'<div class="ui-state-error">'+ xhr.responseText +'</div>', jQuery.jgrid.edit.bClose,
  38. {buttonalign:'right'});
  39. } catch(e) {
  40. alert(xhr.responseText);}
  41. },
  42. "pager":"#grid",
  43. "editurl":"/customer"
  44. });
  45. jQuery('#grid').jqGrid('navGrid','#pgrid',{add:true, edit:true, del:true},{reloadAfterSubmit:false},{reloadAfterSubmit:false, closeAfterAdd:true},{reloadAfterSubmit:false},{multipleSearch:true});
  46.  
  47. $("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){
  48. document.getElementById("id").innerHTML = rowid;
  49. //alert('row clicked ' +rowid );
  50. }});
  51. function selectRow(id) {
  52. jQuery('#grid').jqGrid('setSelection',id);
  53. }
  54.  
  55.  
  56. </script>

Report this snippet  

You need to login to post a comment.