jqgrid快速入门之一：配置及第一个demo

来源：互联网发布：window10下安装ubuntu 编辑：程序博客网时间：2024/05/02 02:56

首先是要引入这些库，注意引入的顺序：

    <span style="white-space:pre"></span><!--jqueryui--><link href="//cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.min.css" rel="stylesheet"><!--jqgrid的css-->    <span style="white-space:pre"></span><link href="//cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet">    <span style="white-space:pre"></span><!--jquery--><script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script><!--locale-->    <span style="white-space:pre"></span><script src="//cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script><!--jqgrid的js-->    <span style="white-space:pre"></span><script src="//cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>

demo全文如下：

<!DOCTYPE html><html><head><title></title>    <!--jqueryui--><link href="//cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.min.css" rel="stylesheet"><!--jqgrid的css-->    <link href="//cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet">    <!--jquery--><script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script><!--locale-->    <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script><!--jqgrid的js-->    <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script><meta charset="utf-8" />    <title>jqGrid Loading Data - Million Rows from a REST service</title></head><body> <table id="jqGrid"></table>    <div id="jqGridPager"></div>    <script type="text/javascript">         $(document).ready(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></body></html>

本文参考了官方的demo：http://www.guriddo.net/demo/guriddojs/

0 0