0
0

table_jqgrid.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>H+ 后台主题UI框架 - jqGird</title>
  7. <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  8. <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">
  9. <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
  10. <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
  11. <!-- jqgrid-->
  12. <link href="css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
  13. <link href="css/animate.css" rel="stylesheet">
  14. <link href="css/style.css?v=4.1.0" rel="stylesheet">
  15. <style>
  16. /* Additional style to fix warning dialog position */
  17. #alertmod_table_list_2 {
  18. top: 900px !important;
  19. }
  20. </style>
  21. </head>
  22. <body class="gray-bg">
  23. <div class="wrapper wrapper-content animated fadeInRight">
  24. <div class="row">
  25. <div class="col-sm-12">
  26. <div class="ibox ">
  27. <div class="ibox-title">
  28. <h5>jQuery Grid Plugin – jqGrid</h5>
  29. </div>
  30. <div class="ibox-content">
  31. <p>
  32. <strong>jqGrid</strong> 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。访问<a target="_blank" href="http://www.trirand.com/blog/"> 官网</a>
  33. </p>
  34. <p>jqGrid的主要特点为:</p>
  35. <ol>
  36. <li>基于jquery UI主题,开发者可以根据客户要求更换不同的主题</li>
  37. <li>兼容目前所有流行的web浏览器</li>
  38. <li>Ajax分页,可以控制每页显示的记录数</li>
  39. <li>支持XML,JSON,数组形式的数据源</li>
  40. <li>提供丰富的选项配置及方法事件接口</li>
  41. <li>支持表格排序,支持拖动列、隐藏列</li>
  42. <li>支持滚动加载数据</li>
  43. <li>支持实时编辑保存数据内容</li>
  44. <li>支持子表格及树形表格</li>
  45. <li>支持多语言</li>
  46. <li>免费</li>
  47. </ol>
  48. <hr>
  49. <h4>基本示例</h4>
  50. <div class="jqGrid_wrapper">
  51. <table id="table_list_1"></table>
  52. <div id="pager_list_1"></div>
  53. </div>
  54. <p>&nbsp;</p>
  55. <h4 class="m-t">高级用法</h4>
  56. <div class="jqGrid_wrapper">
  57. <table id="table_list_2"></table>
  58. <div id="pager_list_2"></div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <!-- 全局js -->
  66. <script src="js/jquery.min.js?v=2.1.4"></script>
  67. <script src="js/bootstrap.min.js?v=3.3.7"></script>
  68. <!-- Peity -->
  69. <script src="js/plugins/peity/jquery.peity.min.js"></script>
  70. <!-- jqGrid -->
  71. <script src="js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
  72. <script src="js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
  73. <!-- 自定义js -->
  74. <script src="js/content.js?v=1.0.0"></script>
  75. <!-- Page-Level Scripts -->
  76. <script>
  77. $(document).ready(function () {
  78. $.jgrid.defaults.styleUI = 'Bootstrap';
  79. // Examle data for jqGrid
  80. var mydata = [
  81. {
  82. id: "1",
  83. invdate: "2010-05-24",
  84. name: "test",
  85. note: "note",
  86. tax: "10.00",
  87. total: "2111.00"
  88. },
  89. {
  90. id: "2",
  91. invdate: "2010-05-25",
  92. name: "test2",
  93. note: "note2",
  94. tax: "20.00",
  95. total: "320.00"
  96. },
  97. {
  98. id: "3",
  99. invdate: "2007-09-01",
  100. name: "test3",
  101. note: "note3",
  102. tax: "30.00",
  103. total: "430.00"
  104. },
  105. {
  106. id: "4",
  107. invdate: "2007-10-04",
  108. name: "test",
  109. note: "note",
  110. tax: "10.00",
  111. total: "210.00"
  112. },
  113. {
  114. id: "5",
  115. invdate: "2007-10-05",
  116. name: "test2",
  117. note: "note2",
  118. tax: "20.00",
  119. total: "320.00"
  120. },
  121. {
  122. id: "6",
  123. invdate: "2007-09-06",
  124. name: "test3",
  125. note: "note3",
  126. tax: "30.00",
  127. total: "430.00"
  128. },
  129. {
  130. id: "7",
  131. invdate: "2007-10-04",
  132. name: "test",
  133. note: "note",
  134. tax: "10.00",
  135. total: "210.00"
  136. },
  137. {
  138. id: "8",
  139. invdate: "2007-10-03",
  140. name: "test2",
  141. note: "note2",
  142. amount: "300.00",
  143. tax: "21.00",
  144. total: "320.00"
  145. },
  146. {
  147. id: "9",
  148. invdate: "2007-09-01",
  149. name: "test3",
  150. note: "note3",
  151. amount: "400.00",
  152. tax: "30.00",
  153. total: "430.00"
  154. },
  155. {
  156. id: "11",
  157. invdate: "2007-10-01",
  158. name: "test",
  159. note: "note",
  160. amount: "200.00",
  161. tax: "10.00",
  162. total: "210.00"
  163. },
  164. {
  165. id: "12",
  166. invdate: "2007-10-02",
  167. name: "test2",
  168. note: "note2",
  169. amount: "300.00",
  170. tax: "20.00",
  171. total: "320.00"
  172. },
  173. {
  174. id: "13",
  175. invdate: "2007-09-01",
  176. name: "test3",
  177. note: "note3",
  178. amount: "400.00",
  179. tax: "30.00",
  180. total: "430.00"
  181. },
  182. {
  183. id: "14",
  184. invdate: "2007-10-04",
  185. name: "test",
  186. note: "note",
  187. amount: "200.00",
  188. tax: "10.00",
  189. total: "210.00"
  190. },
  191. {
  192. id: "15",
  193. invdate: "2007-10-05",
  194. name: "test2",
  195. note: "note2",
  196. amount: "300.00",
  197. tax: "20.00",
  198. total: "320.00"
  199. },
  200. {
  201. id: "16",
  202. invdate: "2007-09-06",
  203. name: "test3",
  204. note: "note3",
  205. amount: "400.00",
  206. tax: "30.00",
  207. total: "430.00"
  208. },
  209. {
  210. id: "17",
  211. invdate: "2007-10-04",
  212. name: "test",
  213. note: "note",
  214. amount: "200.00",
  215. tax: "10.00",
  216. total: "210.00"
  217. },
  218. {
  219. id: "18",
  220. invdate: "2007-10-03",
  221. name: "test2",
  222. note: "note2",
  223. amount: "300.00",
  224. tax: "20.00",
  225. total: "320.00"
  226. },
  227. {
  228. id: "19",
  229. invdate: "2007-09-01",
  230. name: "test3",
  231. note: "note3",
  232. amount: "400.00",
  233. tax: "30.00",
  234. total: "430.00"
  235. },
  236. {
  237. id: "21",
  238. invdate: "2007-10-01",
  239. name: "test",
  240. note: "note",
  241. amount: "200.00",
  242. tax: "10.00",
  243. total: "210.00"
  244. },
  245. {
  246. id: "22",
  247. invdate: "2007-10-02",
  248. name: "test2",
  249. note: "note2",
  250. amount: "300.00",
  251. tax: "20.00",
  252. total: "320.00"
  253. },
  254. {
  255. id: "23",
  256. invdate: "2007-09-01",
  257. name: "test3",
  258. note: "note3",
  259. amount: "400.00",
  260. tax: "30.00",
  261. total: "430.00"
  262. },
  263. {
  264. id: "24",
  265. invdate: "2007-10-04",
  266. name: "test",
  267. note: "note",
  268. amount: "200.00",
  269. tax: "10.00",
  270. total: "210.00"
  271. },
  272. {
  273. id: "25",
  274. invdate: "2007-10-05",
  275. name: "test2",
  276. note: "note2",
  277. amount: "300.00",
  278. tax: "20.00",
  279. total: "320.00"
  280. },
  281. {
  282. id: "26",
  283. invdate: "2007-09-06",
  284. name: "test3",
  285. note: "note3",
  286. amount: "400.00",
  287. tax: "30.00",
  288. total: "430.00"
  289. },
  290. {
  291. id: "27",
  292. invdate: "2007-10-04",
  293. name: "test",
  294. note: "note",
  295. amount: "200.00",
  296. tax: "10.00",
  297. total: "210.00"
  298. },
  299. {
  300. id: "28",
  301. invdate: "2007-10-03",
  302. name: "test2",
  303. note: "note2",
  304. amount: "300.00",
  305. tax: "20.00",
  306. total: "320.00"
  307. },
  308. {
  309. id: "29",
  310. invdate: "2007-09-01",
  311. name: "test3",
  312. note: "note3",
  313. amount: "400.00",
  314. tax: "30.00",
  315. total: "430.00"
  316. }
  317. ];
  318. // Configuration for jqGrid Example 1
  319. $("#table_list_1").jqGrid({
  320. data: mydata,
  321. datatype: "local",
  322. height: 250,
  323. autowidth: true,
  324. shrinkToFit: true,
  325. rowNum: 14,
  326. rowList: [10, 20, 30],
  327. colNames: ['序号', '日期', '客户', '金额', '运费', '总额', '备注'],
  328. colModel: [
  329. {
  330. name: 'id',
  331. index: 'id',
  332. width: 60,
  333. sorttype: "int"
  334. },
  335. {
  336. name: 'invdate',
  337. index: 'invdate',
  338. width: 90,
  339. sorttype: "date",
  340. formatter: "date"
  341. },
  342. {
  343. name: 'name',
  344. index: 'name',
  345. width: 100
  346. },
  347. {
  348. name: 'amount',
  349. index: 'amount',
  350. width: 80,
  351. align: "right",
  352. sorttype: "float",
  353. formatter: "number"
  354. },
  355. {
  356. name: 'tax',
  357. index: 'tax',
  358. width: 80,
  359. align: "right",
  360. sorttype: "float"
  361. },
  362. {
  363. name: 'total',
  364. index: 'total',
  365. width: 80,
  366. align: "right",
  367. sorttype: "float"
  368. },
  369. {
  370. name: 'note',
  371. index: 'note',
  372. width: 150,
  373. sortable: false
  374. }
  375. ],
  376. pager: "#pager_list_1",
  377. viewrecords: true,
  378. caption: "jqGrid 示例1",
  379. hidegrid: false
  380. });
  381. // Configuration for jqGrid Example 2
  382. $("#table_list_2").jqGrid({
  383. data: mydata,
  384. datatype: "local",
  385. height: 450,
  386. autowidth: true,
  387. shrinkToFit: true,
  388. rowNum: 20,
  389. rowList: [10, 20, 30],
  390. colNames: ['序号', '日期', '客户', '金额', '运费', '总额', '备注'],
  391. colModel: [
  392. {
  393. name: 'id',
  394. index: 'id',
  395. editable: true,
  396. width: 60,
  397. sorttype: "int",
  398. search: true
  399. },
  400. {
  401. name: 'invdate',
  402. index: 'invdate',
  403. editable: true,
  404. width: 90,
  405. sorttype: "date",
  406. formatter: "date"
  407. },
  408. {
  409. name: 'name',
  410. index: 'name',
  411. editable: true,
  412. width: 100
  413. },
  414. {
  415. name: 'amount',
  416. index: 'amount',
  417. editable: true,
  418. width: 80,
  419. align: "right",
  420. sorttype: "float",
  421. formatter: "number"
  422. },
  423. {
  424. name: 'tax',
  425. index: 'tax',
  426. editable: true,
  427. width: 80,
  428. align: "right",
  429. sorttype: "float"
  430. },
  431. {
  432. name: 'total',
  433. index: 'total',
  434. editable: true,
  435. width: 80,
  436. align: "right",
  437. sorttype: "float"
  438. },
  439. {
  440. name: 'note',
  441. index: 'note',
  442. editable: true,
  443. width: 100,
  444. sortable: false
  445. }
  446. ],
  447. pager: "#pager_list_2",
  448. viewrecords: true,
  449. caption: "jqGrid 示例2",
  450. add: true,
  451. edit: true,
  452. addtext: 'Add',
  453. edittext: 'Edit',
  454. hidegrid: false
  455. });
  456. // Add selection
  457. $("#table_list_2").setSelection(4, true);
  458. // Setup buttons
  459. $("#table_list_2").jqGrid('navGrid', '#pager_list_2', {
  460. edit: true,
  461. add: true,
  462. del: true,
  463. search: true
  464. }, {
  465. height: 200,
  466. reloadAfterSubmit: true
  467. });
  468. // Add responsive to jqGrid
  469. $(window).bind('resize', function () {
  470. var width = $('.jqGrid_wrapper').width();
  471. $('#table_list_1').setGridWidth(width);
  472. $('#table_list_2').setGridWidth(width);
  473. });
  474. });
  475. </script>
  476. <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
  477. <!--统计代码,可删除-->
  478. </body>
  479. </html>