Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
luofaqiang
/
app-big-data
forked from EHR/app-big-data
Xem 1
Star 0
Fork 0
Các tập tin
Tree: 2ba4d651a1
Branches Tags
app-big-data
/
demo
/
table_jqgrid.html

table_jqgrid.html 8.2 KB
Lịch sử Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 

  4. <head>
    5. 

  5. 

  6.     <meta charset="utf-8">
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 

  8. 

  9. 

  10.     <title>H+ 后台主题UI框架 - jqGird</title>
    11. 

  11.     <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    12. 

  12.     <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    13. 

  13. 

  14.     <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    15. 

  15.     <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    16. 

  16. 

  17.     <!-- jqgrid-->
    18. 

  18.     <link href="../css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    19. 

  19. 

  20.     <link href="../css/animate.min.css" rel="stylesheet">
    21. 

  21.     <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
    22. 

  22. 

  23.     <style>
    24. 

  24.         /* Additional style to fix warning dialog position */
    25. 

  25. 

  26.         #alertmod_table_list_2 {
    27. 

  27.             top: 900px !important;
    28. 

  28.         }
    29. 

  29.     </style>
    30. 

  30. 

  31. </head>
    32. 

  32. 

  33. <body class="gray-bg">
    34. 

  34.     <div class="wrapper wrapper-content  animated fadeInRight">
    35. 

  35.         <div class="row">
    36. 

  36.             <div class="col-sm-12">
    37. 

  37.                 <div class="ibox ">
    38. 

  38.                     <div class="ibox-title">
    39. 

  39.                         <h5>jQuery Grid Plugin – jqGrid</h5>
    40. 

  40.                     </div>
    41. 

  41.                     <div class="ibox-content">
    42. 

  42.                         <p>
    43. 

  43.                             <strong>jqGrid</strong> 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。访问<a target="_blank" href="http://www.trirand.com/blog/"> 官网</a>
    44. 

  44.                         </p>
    45. 

  45.                         <p>jqGrid的主要特点为：</p>
    46. 

  46.                         <ol>
    47. 

  47.                             <li>基于jquery UI主题，开发者可以根据客户要求更换不同的主题</li>
    48. 

  48.                             <li>兼容目前所有流行的web浏览器</li>
    49. 

  49.                             <li>Ajax分页，可以控制每页显示的记录数</li>
    50. 

  50.                             <li>支持XML，JSON，数组形式的数据源</li>
    51. 

  51.                             <li>提供丰富的选项配置及方法事件接口</li>
    52. 

  52.                             <li>支持表格排序，支持拖动列、隐藏列</li>
    53. 

  53.                             <li>支持滚动加载数据</li>
    54. 

  54.                             <li>支持实时编辑保存数据内容</li>
    55. 

  55.                             <li>支持子表格及树形表格</li>
    56. 

  56.                             <li>支持多语言</li>
    57. 

  57.                             <li>免费</li>
    58. 

  58.                         </ol>
    59. 

  59.                         <hr>
    60. 

  60.                         <h4>基本示例</h4>
    61. 

  61. 

  62.                         <div class="jqGrid_wrapper">
    63. 

  63.                             <table id="table_list_1"></table>
    64. 

  64.                             <div id="pager_list_1"></div>
    65. 

  65.                         </div>
    66. 

  66.                         <p>&nbsp;</p>
    67. 

  67.                         <h4 class="m-t">高级用法</h4>
    68. 

  68. 

  69. 

  70.                         <div class="jqGrid_wrapper">
    71. 

  71.                             <table id="table_list_2"></table>
    72. 

  72.                             <div id="pager_list_2"></div>
    73. 

  73.                         </div>
    74. 

  74.                     </div>
    75. 

  75.                 </div>
    76. 

  76.             </div>
    77. 

  77.         </div>
    78. 

  78.     </div>
    79. 

  79. 

  80.     <script src="../js/jquery.min.js?v=2.1.4"></script>
    81. 

  81.     <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    82. 

  82.     <script src="../js/plugins/peity/jquery.peity.min.js"></script>
    83. 

  83.     <script src="../js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    84. 

  84.     <script src="../js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    85. 

  85.     <script src="../js/content.min.js?v=1.0.0"></script>
    86. 

  86.     <script>
    87. 

  87.         $(document).ready(function(){$.jgrid.defaults.styleUI="Bootstrap";var mydata=[{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"},{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}];$("#table_list_1").jqGrid({data:mydata,datatype:"local",height:250,autowidth:true,shrinkToFit:true,rowNum:14,rowList:[10,20,30],colNames:["序号","日期","客户","金额","运费","总额","备注"],colModel:[{name:"id",index:"id",width:60,sorttype:"int"},{name:"invdate",index:"invdate",width:90,sorttype:"date",formatter:"date"},{name:"name",index:"name",width:100},{name:"amount",index:"amount",width:80,align:"right",sorttype:"float",formatter:"number"},{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}],pager:"#pager_list_1",viewrecords:true,caption:"jqGrid 示例1",hidegrid:false});$("#table_list_2").jqGrid({data:mydata,datatype:"local",height:450,autowidth:true,shrinkToFit:true,rowNum:20,rowList:[10,20,30],colNames:["序号","日期","客户","金额","运费","总额","备注"],colModel:[{name:"id",index:"id",editable:true,width:60,sorttype:"int",search:true},{name:"invdate",index:"invdate",editable:true,width:90,sorttype:"date",formatter:"date"},{name:"name",index:"name",editable:true,width:100},{name:"amount",index:"amount",editable:true,width:80,align:"right",sorttype:"float",formatter:"number"},{name:"tax",index:"tax",editable:true,width:80,align:"right",sorttype:"float"},{name:"total",index:"total",editable:true,width:80,align:"right",sorttype:"float"},{name:"note",index:"note",editable:true,width:100,sortable:false}],pager:"#pager_list_2",viewrecords:true,caption:"jqGrid 示例2",add:true,edit:true,addtext:"Add",edittext:"Edit",hidegrid:false});$("#table_list_2").setSelection(4,true);$("#table_list_2").jqGrid("navGrid","#pager_list_2",{edit:true,add:true,del:true,search:true},{height:200,reloadAfterSubmit:true});$(window).bind("resize",function(){var width=$(".jqGrid_wrapper").width();$("#table_list_1").setGridWidth(width);$("#table_list_2").setGridWidth(width)})});
    88. 

  88.     </script>
    89. 

  89. </body>
    90. 

  90. 

  91. </html>
    92.