jqgrid快速入门之一:配置及第一个demo
2016-05-12 14:33
537 查看
首先是要引入这些库,注意引入的顺序:
demo全文如下:
本文参考了官方的demo:http://www.guriddo.net/demo/guriddojs/
<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/
相关文章推荐
- ARP地址解析过程(同一子网和不同子网)
- 【UNIX网络编程】TCP客户/服务器程序示例
- 深入分析redis cluster 集群
- C语言 二级指针内存模型③
- 常用的CDN 链接 http://cdn.code.baidu.com/ http://www.bootcdn.cn/
- RPi 2B Android telnet ssh
- 剑指offer之面试题36数组中的逆序对
- MySQL架构设计——MyISAM存储引擎与InnoDB存储引擎
- JavaScript进阶篇_window对象
- pcap文件格式
- TS流解析
- Android Hierarchy View在工作的使用
- html5在网页中调用百度地图
- java 工程师 基础知识总结
- Matrix4x4矩阵变换、欧拉角转四元数、角度转弧度
- 所谓情商高,就是要有分寸感
- Codeforces Round #352 (Div. 2) C. Recycling Bottles 贪心
- 【算法题】Leedcode 335. Self Crossing 自交问题
- 趣学 C 语言(七)—— 文件读写操作
- JS中数组去重及求量数组中的相同字符个数