role-selectList.jsp 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  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="${ctx}/qui/libs/js/jquery.js"></script>
  8. <script type="text/javascript" src="${ctx}/qui/libs/js/framework.js"></script>
  9. <link href="${ctx}/qui/libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
  10. <link rel="stylesheet" type="text/css" id="skin" prePath="${ctx}/qui/"/>
  11. <link rel="stylesheet" type="text/css" id="customSkin"/>
  12. <!--框架必需end-->
  13. <!--数据表格start-->
  14. <script src="${ctx}/qui/libs/js/table/quiGrid.js" type="text/javascript"></script>
  15. <!--数据表格end-->
  16. <!--箭头分页start-->
  17. <script type="text/javascript" src="${ctx}/qui/libs/js/nav/pageArrow.js"></script>
  18. <!--箭头分页end-->
  19. <!--表单异步提交start-->
  20. <script src="${ctx}/qui/libs/js/form/form.js" type="text/javascript"></script>
  21. <!--表单异步提交end-->
  22. <script type="text/javascript">
  23. var g_pageNo = 1;
  24. var g_pageSize = 10;
  25. //数据表格使用
  26. var g;
  27. var gridData;
  28. function initComplete(){
  29. g = $("#maingrid").quiGrid({
  30. columns: [
  31. { display: '角色名称', name: 'roleName', align: 'center', width: "20%"},
  32. { display: '描述', name: 'roleDesc', align: 'center', width: "30%"}
  33. ],
  34. data:[], sortName: 'roleId',rownumbers:true,dataAction:'local',checkbox:true,usePager: false,
  35. height: '100%', width:"100%",heightDiff:-40
  36. });
  37. }
  38. $(function(){
  39. getData(g_pageNo,g_pageSize);
  40. });
  41. /**初始时通过向后台传递排序id、排序顺序、初始页码、每页条数**/
  42. function getData(pageNo,pageSize){
  43. jQuery.post("${ctx}/role/listPage.do",
  44. getFormParams(pageNo,pageSize),
  45. function(result){
  46. gridData = result;
  47. //刷新表格
  48. g.loadData(gridData);
  49. //设置左边内容页
  50. var content ="共有" + gridData["pager.totalRows"] + "条记录";
  51. $("#letfContent").html("");
  52. $("#letfContent").html(content);
  53. //取得分页组件
  54. var pager=$("#pager");
  55. //设置总页页数
  56. pager.attr("total",gridData["pager.totalRows"]);
  57. pager.render();
  58. //绑定翻页事件
  59. pager.bind("pageChange",function(e,index){
  60. g_pageNo = index + 1;
  61. getData(g_pageNo,g_pageSize);
  62. });
  63. //绑定选择每页显示记录数事件
  64. pager.bind("sizeChange",function(e,num){
  65. g_pageSize = num;
  66. getData(g_pageNo,g_pageSize);
  67. });
  68. },"json");
  69. }
  70. //查询
  71. function searchHandler(){
  72. //重新加载数据,设置当前页面为1
  73. getData(1,g_pageSize);
  74. }
  75. /**获得查询表单的提交查询的值**/
  76. function getFormParams(pageNo,pageSize){
  77. $("#pageNo").val(pageNo);
  78. $("#pageSize").val(pageSize);
  79. return $("#searchForm").formToArray();
  80. }
  81. /**重置于查询表单,然后重新加载表格数据**/
  82. function resetSearch(){
  83. $("#searchForm")[0].reset();
  84. //重新加载数据,设置当前页面为1
  85. getData(1,g_pageSize);
  86. }
  87. function selectRole(){
  88. var selectedRows = g.getSelectedRows();
  89. var selectedRowsLength = selectedRows.length;
  90. //用户ID
  91. var ids = "";
  92. //用户名称
  93. var names="";
  94. for(var i = 0;i<selectedRowsLength;i++) {
  95. if(ids.length<1){
  96. ids=selectedRows[i].roleId;
  97. names=selectedRows[i].roleName;
  98. }else{
  99. ids +=","+ selectedRows[i].roleId;
  100. names +=","+selectedRows[i].roleName;
  101. }
  102. }
  103. return [ids,names];
  104. }
  105. </script>
  106. </head>
  107. <body>
  108. <div class="box2" panelTitle="查询角色">
  109. <form action="" id="searchForm" method="post">
  110. <input type="hidden" id="pageNo" name="pageNo" value="1"/>
  111. <input type="hidden" id="pageSize" name="pageSize" value="10"/>
  112. <input type="hidden" id="state" name="Q_state_N_EQ" value="1"/>
  113. <table>
  114. <tr>
  115. <td>角色名称:</td>
  116. <td>
  117. <input type="text" id="Q_roleName_S_LK" name="Q_roleName_S_LK" />
  118. </td>
  119. <td><button type="button" onclick="searchHandler()"><span class="icon_find">查询</span></button></td>
  120. <td><button type="button" onclick="resetSearch()"><span class="icon_reload">重置</span></button></td>
  121. </tr>
  122. </table>
  123. </form>
  124. </div>
  125. <div class="padding_right5">
  126. <div id="maingrid"></div>
  127. </div>
  128. <!-- 分页组件 -->
  129. <div style="height:35px;">
  130. <div id="letfContent" class="float_left padding5"></div>
  131. <div class="float_right padding5">
  132. <div id="pager" total="0" class="pageArrow" showSelect="true" inputPosition="right"></div>
  133. </div>
  134. <div class="clear"></div>
  135. </div>
  136. </body>
  137. </html>