jqgrid下载，引入
生活随笔
收集整理的這篇文章主要介紹了
jqgrid下载，引入
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
官網
最新版本5.2 收費
JQGrid是一個在jquery基礎上做的一個表格控件，以ajax的方式和服務器端通信。
文件解壓結構
我們需要的使用的是css目錄和js 目錄 src目錄是源碼目錄 plugins是額外插件目錄
引入文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css"> </head> <body><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> </body> </html>注意js引入順序。
第一個demo 加載本地數據
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css"> </head> <body><style>html,body {margin: 0;padding: 0;font-size: 75%;}</style><table id="list4"></table> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> <script type="text/javascript">$(document).ready(function() {$("#list4").jqGrid({datatype: "local",height: 250,colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],colModel: [{name: 'id',index: 'id',width: 60,sorttype: "int"}, {name: 'invdate',index: 'invdate',width: 90,sorttype: "date"}, {name: 'name',index: 'name',width: 100}, {name: 'amount',index: 'amount',width: 80,align: "right",sorttype: "float"}, {name: 'tax',index: 'tax',width: 80,align: "right",sorttype: "float"},{name: 'total',index: 'total',width: 80,align: "right",sorttype: "float"}, {name: 'note',index: 'note',width: 150,sortable: false}],multiselect: true,caption: "Manipulating Array Data"});var mydata = [{id: "1",invdate: "2007-10-01",name: "test",note: "note",amount: "200.00",tax: "10.00",total: "210.00"}, {id: "2",invdate: "2007-10-02",name: "test2",note: "note2",amount: "300.00",tax: "20.00",total: "320.00"}, {id: "3",invdate: "2007-09-01",name: "test3",note: "note3",amount: "400.00",tax: "30.00",total: "430.00"}, {id: "4",invdate: "2007-10-04",name: "test",note: "note",amount: "200.00",tax: "10.00",total: "210.00"}, {id: "5",invdate: "2007-10-05",name: "test2",note: "note2",amount: "300.00",tax: "20.00",total: "320.00"}, {id: "6",invdate: "2007-09-06",name: "test3",note: "note3",amount: "400.00",tax: "30.00",total: "430.00"}, {id: "7",invdate: "2007-10-04",name: "test",note: "note",amount: "200.00",tax: "10.00",total: "210.00"}, {id: "8",invdate: "2007-10-03",name: "test2",note: "note2",amount: "300.00",tax: "20.00",total: "320.00"}, {id: "9",invdate: "2007-09-01",name: "test3",note: "note3",amount: "400.00",tax: "30.00",total: "430.00"}];for (var i = 0; i <= mydata.length; i++) jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);});</script></body> </html>轉載于:https://my.oschina.net/2016jyh/blog/835613
總結
以上是生活随笔為你收集整理的jqgrid下载，引入的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows7+tomcat7+ngi
- 下一篇： MyEclipse的Debug模式启动缓