// jqGrid demo usage // ----------------------------------- (function(window, document, $, undefined){ $(function(){ if ( ! $.fn.jqGrid ) return; // JSON EXAMPLE // --------------------- var gridJSON = $("#jqGridJSON"); gridJSON.jqGrid({ url: '/api/jqgrid', datatype: "json", colModel: [ { label: 'Category Name', name: 'CategoryName', width: 75 }, { label: 'Product Name', name: 'ProductName', width: 90 }, { label: 'Country', name: 'Country', width: 100 }, { label: 'Price', name: 'Price', width: 80, sorttype: 'integer' }, // sorttype is used only if the data is loaded locally or loadonce is set to true { label: 'Quantity', name: 'Quantity', width: 80, sorttype: 'number' } ], viewrecords: true, // show the current page, data rang and total records on the toolbar autowidth: true, shrinkToFit: true, height: 240, rowNum: 20, rowList: [10, 20, 30], loadonce: true, // this is just for the demo caption: "Basic JSON Example", hidegrid: false, pager: "#jqGridJSONPager" }); // NESTED EXAMPLE // --------------------- var gridTree = $('#jqGridTree'); gridTree.jqGrid({ url: "/api/jqgridtree", colModel: [ { name: "category_id", index: "accounts.account_id", sorttype: "int", key: true, hidden: true, width: 60 },{ name: "name", index: "name", sorttype: "string", label: "Name", width: 160 },{ name: "price", index: "price", sorttype: "numeric", label: "Price", width: 90, align: "right" },{ name: "qty_onhand", index: "qty_onhand", sorttype: "int", label: "Qty", width: 90, align: "right" },{ name: "color", index: "color", sorttype: "string", label: "Color", width: 70 },{ name: "lft", hidden: true },{ name: "rgt", hidden: true },{ name: "level", hidden: true },{ name: "uiicon", hidden: true } ], // width: "780", hoverrows: false, // viewrecords: false, // gridview: true, height: "auto", sortname: "lft", loadonce: true, rowNum: 30, // scrollrows: true, // enable tree grid treeGrid: true, // which column is expandable ExpandColumn: "name", // datatype treedatatype: "json", // the model used treeGridModel: "nested", // configuration of the data comming from server treeReader: { left_field: "lft", right_field: "rgt", level_field: "level", leaf_field: "isLeaf", expanded_field: "expanded", loaded: "loaded", icon_field: "icon" }, sortorder: "asc", datatype: "json", pager: "#jqGridTreePager", viewrecords: true, // show the current page, data rang and total records on the toolbar autowidth: true, shrinkToFit: true, caption: "Nested Example" }); $(window).on('resize', function() { var width = $('.jqgrid-responsive').width(); gridJSON.setGridWidth( width ); gridTree.setGridWidth( width ); }).resize(); }); })(window, document, window.jQuery);