user-selectList.jsp 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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: 'fullName', align: 'center', width: "15%"},
  32. { display: '登陆名', name: 'userName', align: 'center', width: "15%"},
  33. { display: '联系电话', name: 'phone', align: 'center', width: "15%"},
  34. { display: '所属部门', name: 'orgNames', align: 'center', width: "20%"},
  35. { display: '所属角色', name: 'roleNames', align: 'center', width: "25%"}
  36. ],
  37. data:[], sortName: 'userId',rownumbers:true,dataAction:'local',checkbox:true,usePager: false,
  38. height: '100%', width:"100%",heightDiff:-40
  39. });
  40. //点击分页触发
  41. }
  42. $(function(){
  43. getData(g_pageNo,g_pageSize);
  44. })
  45. /**初始时通过向后台传递排序id、排序顺序、初始页码、每页条数**/
  46. function getData(pageNo,pageSize){
  47. jQuery.post("${ctx}/user/listPage.do",
  48. getFormParams(pageNo,pageSize),
  49. function(result){
  50. gridData = result;
  51. //刷新表格
  52. g.loadData(gridData);
  53. //设置左边内容页
  54. var content ="共有" + gridData["pager.totalRows"] + "条记录";
  55. $("#letfContent").html("");
  56. $("#letfContent").html(content);
  57. //取得分页组件
  58. var pager=$("#pager");
  59. //设置总页页数
  60. pager.attr("total",gridData["pager.totalRows"]);
  61. pager.render();
  62. //绑定翻页事件
  63. pager.bind("pageChange",function(e,index){
  64. g_pageNo = index + 1;
  65. getData(g_pageNo,g_pageSize);
  66. });
  67. //绑定选择每页显示记录数事件
  68. pager.bind("sizeChange",function(e,num){
  69. g_pageSize = num;
  70. getData(g_pageNo,g_pageSize);
  71. });
  72. },"json");
  73. }
  74. //查询
  75. function searchHandler(){
  76. //重新加载数据,设置当前页面为1
  77. getData(1,g_pageSize);
  78. }
  79. /**获得查询表单的提交查询的值**/
  80. function getFormParams(pageNo,pageSize){
  81. $("#pageNo").val(pageNo);
  82. $("#pageSize").val(pageSize);
  83. return $("#searchForm").formToArray();
  84. }
  85. /**重置于查询表单,然后重新加载表格数据**/
  86. function resetSearch(){
  87. $("#searchForm")[0].reset();
  88. //重新加载数据,设置当前页面为1
  89. getData(1,g_pageSize);
  90. }
  91. function selectUser(){
  92. var selectedRows = g.getSelectedRows();
  93. var selectedRowsLength = selectedRows.length;
  94. //用户ID
  95. var ids = "";
  96. //用户名称
  97. var names="";
  98. for(var i = 0;i<selectedRowsLength;i++) {
  99. if(ids.length<1){
  100. ids=selectedRows[i].userId;
  101. names=selectedRows[i].fullName;
  102. }else{
  103. ids +=","+ selectedRows[i].userId;
  104. names +=","+selectedRows[i].fullName;
  105. }
  106. }
  107. return [ids,names];
  108. }
  109. </script>
  110. </head>
  111. <body>
  112. <div class="box2" panelTitle="查询用户">
  113. <form action="" id="searchForm" method="post">
  114. <input type="hidden" id="pageNo" name="pageNo" value="1"/>
  115. <input type="hidden" id="pageSize" name="pageSize" value="10"/>
  116. <input type="hidden" id="state" name="Q_state_N_EQ" value="1"/>
  117. <table>
  118. <tr>
  119. <td>姓名:</td>
  120. <td>
  121. <input type="text" id="Q_fullName_S_LK" name="Q_fullName_S_LK" />
  122. </td>
  123. <td>登陆名:</td>
  124. <td>
  125. <input type="text" id="Q_userName_S_LK" name="Q_userName_S_LK" />
  126. </td>
  127. <td><button type="button" onclick="searchHandler()"><span class="icon_find">查询</span></button></td>
  128. <td><button type="button" onclick="resetSearch()"><span class="icon_reload">重置</span></button></td>
  129. </tr>
  130. </table>
  131. </form>
  132. </div>
  133. <div class="padding_right5">
  134. <div id="maingrid"></div>
  135. </div>
  136. <!-- 分页组件 -->
  137. <div style="height:35px;">
  138. <div id="letfContent" class="float_left padding5"></div>
  139. <div class="float_right padding5">
  140. <div id="pager" total="0" class="pageArrow" showSelect="true" inputPosition="right"></div>
  141. </div>
  142. <div class="clear"></div>
  143. </div>
  144. </body>
  145. </html>