jqGrid 簡單demo

jqGrid   官方給的demo是http://www.guriddo.net/demo/guriddojs/

本身仿着官方寫了個，

1.引入標籤

<!--The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".-->
<script src="scripts/jquery-2.2.3.js"></script>
<script src="scripts/jqGrid-5.1.1/js/jquery.jqGrid.js"></script>
<script src="scripts/jqGrid-5.1.1/js/i18n/grid.locale-cn.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="scripts/jquery-ui-1.11.4/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="scripts/jqGrid-5.1.1/css/ui.jqgrid.css" />

2.在body中添加

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<script>
    $(function () {
        $("#jqGrid").jqGrid({
            url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
            mtype: "GET",
            datatype: "jsonp",
            colModel: [
                { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
                { label: 'Customer ID', name: 'CustomerID', width: 150 },
                { label: 'Order Date', name: 'OrderDate', width: 150 },
                { label: 'Freight', name: 'Freight', width: 150 },
                { label:'Ship Name', name: 'ShipName', width: 150 }
            ],
            viewrecords: true,
            width: 780,
            height: 250,
            rowNum: 20,
            pager: "#jqGridPager"
        });
    });
</script>

大概效果就這樣