51b5da9c2b3b53698929fca8166171890a0ed406.svn-base 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>基本表格模板</title>
  6. <!--框架必需start-->
  7. <script type="text/javascript" src="../../libs/js/jquery.js"></script>
  8. <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
  9. <script type="text/javascript" src="../../libs/js/framework.js"></script>
  10. <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
  11. <link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY="false"/>
  12. <link rel="stylesheet" type="text/css" id="customSkin"/>
  13. <!--框架必需end-->
  14. <!--数据表格start-->
  15. <script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
  16. <!--数据表格end-->
  17. <!--分页start-->
  18. <script type="text/javascript" src="../../libs/js/nav/pageNumber.js"></script>
  19. <!--分页end-->
  20. </head>
  21. <body>
  22. <div class="red">此示例由后台支持</div>
  23. <div class="padding_right5">
  24. <div id="maingrid"></div>
  25. </div>
  26. <div id="pageContent" style="height:35px;"></div>
  27. <script type="text/javascript">
  28. var g_pageNo = 1;
  29. var g_pageSize = 10;
  30. //数据表格使用
  31. var g;
  32. var gridData;
  33. /*
  34. function initComplete(){
  35. g = $("#maingrid").quiGrid({
  36. columns: [
  37. { display: '姓名', name: 'userName', align: 'left', width: "20%"},
  38. { display: '所属部门', name: 'orgName', align: 'left', width: "20%"},
  39. { display: '性别', name: 'userSex', align: 'left', width: "20%"},
  40. { display: '入职时间', name: 'userEmployTime', align: 'left', width:"20%"} ,
  41. { display: '学历', name: 'userEducation', align: 'left', width:"20%"}
  42. ],
  43. data:[], sortName: 'userId',rownumbers:true,dataAction:'local',checkbox:true,usePager: false,
  44. height: '100%', width:"100%",heightDiff:-40,percentWidthMode:true,
  45. onChangeSort : function(){
  46. getData(g.options.sortName,g.options.sortOrder,g_pageNo,g_pageSize);
  47. return false;
  48. }
  49. });
  50. }
  51. */
  52. $(function(){
  53. /*
  54. g.options.sortName = "userId";
  55. g.options.sortOrder = "desc";
  56. getData(g.options.sortName,g.options.sortOrder,g_pageNo,g_pageSize);
  57. */
  58. })
  59. function getData(sort,direction,pageNo,pageSize){
  60. $.post("../../userAction.do?method=getUsers",
  61. {"sort":sort,
  62. "direction":direction,
  63. "pager.pageNo":pageNo,
  64. "pager.pageSize":pageSize
  65. },
  66. function(result){
  67. gridData = result;
  68. //刷新表格
  69. g.loadData(gridData);
  70. var $pager=$('<div class="pageNumber" showSelect="true"></div>');
  71. $pager.attr("total",gridData["pager.totalRows"]);
  72. var $pagerCon = $('<div class="float_left padding5">' + "共有" + gridData["pager.totalRows"] + "条记录" + '</div><div class="float_right padding5"></div><div class="clear"></div>');
  73. $pagerCon.eq(1).append($pager);
  74. $("#pageContent").append($pagerCon);
  75. $pager.render();
  76. $pager.bind("pageChange",function(e,index){
  77. g_pageNo = index + 1;
  78. getData2(g.options.sortName,g.options.direction,g_pageNo,g_pageSize);
  79. })
  80. $pager.bind("sizeChange",function(e,num){
  81. g_pageSize = num;
  82. getData2(g.options.sortName,g.options.sortOrder,g_pageNo,g_pageSize);
  83. })
  84. },"json");
  85. }
  86. function getData2(sort,direction,pageNo,pageSize){
  87. $.post("../../userAction.do?method=getUsers",
  88. {"sort":sort,
  89. "direction":direction,
  90. "pager.pageNo":pageNo,
  91. "pager.pageSize":pageSize
  92. },
  93. function(result){
  94. gridData = result;
  95. //刷新表格
  96. g.loadData(gridData);
  97. },"json");
  98. }
  99. </script>
  100. </body>
  101. </html>