userSelect.jsp 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/webpage/include/taglib.jsp"%>
  3. <html>
  4. <head>
  5. <title>用户选择</title>
  6. <meta name="decorator" content="ani"/>
  7. <%@ include file="/webpage/include/bootstraptable.jsp"%>
  8. <%@include file="/webpage/include/treeview.jsp" %>
  9. <script type="text/javascript">
  10. $(document).ready(function() {
  11. //bootstrap treeview初始化
  12. $('#jstree').jstree({
  13. 'core' : {
  14. "multiple" : false,
  15. "animation" : 0,
  16. "themes" : { "variant" : "large", "icons":true , "stripes":true},
  17. 'data' : {
  18. "url" : "${ctx}/sys/office/treeData",
  19. "dataType" : "json" // needed only if you do not supply JSON headers
  20. }
  21. },
  22. "conditionalselect" : function (node, event) {
  23. return false;
  24. },
  25. 'plugins' : ['types', 'wholerow'],
  26. "types":{
  27. 'default' : { 'icon' : 'fa fa-folder' },
  28. '1' : {'icon' : 'fa fa-home'},
  29. '2' : {'icon' : 'fa fa-umbrella' },
  30. '3' : { 'icon' : 'fa fa-group'},
  31. '4' : { 'icon' : 'fa fa-file-text-o' }
  32. }
  33. }).bind("activate_node.jstree", function (obj, e) {
  34. // 处理代码
  35. // 获取当前节点
  36. var treeNode = e.node;
  37. var id = treeNode.id == '0' ? '' :treeNode.id;
  38. if(treeNode.level == 0){//level=0 代表公司
  39. $("#companyId").val(id);
  40. $("#officeId").val("");
  41. }else{
  42. $("#companyId").val("");
  43. $("#officeId").val(id);
  44. }
  45. $('#table').bootstrapTable('refresh');
  46. }).on('loaded.jstree', function() {
  47. $("#jstree").jstree('open_all');
  48. });
  49. //初始化表格
  50. $('#table').bootstrapTable({
  51. //请求方法
  52. method: 'post',
  53. //类型json
  54. dataType: "json",
  55. contentType: "application/x-www-form-urlencoded",
  56. //是否显示行间隔色
  57. striped: true,
  58. //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  59. cache: false,
  60. //是否显示分页(*)
  61. pagination: true,
  62. //排序方式
  63. sortOrder: "asc",
  64. //初始化加载第一页,默认第一页
  65. pageNumber:1,
  66. //每页的记录行数(*)
  67. pageSize: 5,
  68. //可供选择的每页的行数(*)
  69. pageList: [5, 10, 'ALL'],
  70. //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
  71. url: "${ctx}/sys/user/list",
  72. //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
  73. //queryParamsType:'',
  74. ////查询参数,每次调用是会带上这个参数,可自定义
  75. queryParams : function(params) {
  76. var searchParam = $("#searchForm").serializeJSON();
  77. searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
  78. searchParam.pageSize = params.limit === undefined? -1 : params.limit;
  79. searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+ params.order;
  80. return searchParam;
  81. },
  82. //分页方式:client客户端分页,server服务端分页(*)
  83. sidePagination: "server",
  84. onClickRow: function(row, $el){
  85. },
  86. columns: [{
  87. <c:if test="${isMultiSelect}">
  88. checkbox: true
  89. </c:if>
  90. <c:if test="${!isMultiSelect}">
  91. radio: true
  92. </c:if>
  93. }, {
  94. field: 'loginName',
  95. title: '登录名',
  96. sortable: true
  97. }, {
  98. field: 'name',
  99. title: '姓名',
  100. sortable: true,
  101. }, {
  102. field: 'phone',
  103. title: '电话',
  104. sortable: true
  105. }, {
  106. field: 'mobile',
  107. title: '手机',
  108. sortable: true
  109. }, {
  110. field: 'company.name',
  111. title: '归属市'
  112. }, {
  113. field: 'office.name',
  114. title: '归属区市县'
  115. }]
  116. });
  117. if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端,默认关闭tab
  118. $('#table').bootstrapTable("toggleView");
  119. }
  120. $('#table').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
  121. 'check-all.bs.table uncheck-all.bs.table', function () {
  122. $('#remove').prop('disabled', ! $('#table').bootstrapTable('getSelections').length);
  123. $('#edit').prop('disabled', $('#table').bootstrapTable('getSelections').length!=1);
  124. });
  125. $("#search").click("click", function() {// 绑定查询按扭
  126. $('#table').bootstrapTable('refresh');
  127. });
  128. $("#reset").click("click", function() {// 绑定查询按扭
  129. $("#searchForm input").val("");
  130. $("#searchForm select").val("");
  131. zTreeObj.cancelSelectedNode();
  132. $('#table').bootstrapTable('refresh');
  133. });
  134. });
  135. function getIdSelections() {
  136. return $.map($("#table").bootstrapTable('getSelections'), function (row) {
  137. return row.id
  138. });
  139. }
  140. function getNameSelections() {
  141. return $.map($("#table").bootstrapTable('getSelections'), function (row) {
  142. return row.name
  143. });
  144. }
  145. function getLoginNameSelections() {
  146. return $.map($("#table").bootstrapTable('getSelections'), function (row) {
  147. return row.loginName
  148. });
  149. }
  150. function getSelections() {
  151. return $.map($("#table").bootstrapTable('getSelections'), function (row) {
  152. return row
  153. });
  154. }
  155. </script>
  156. </head>
  157. <body class="bg-white">
  158. <div class="wrapper wrapper-content">
  159. <div class="row">
  160. <div class="col-sm-3 col-md-2" >
  161. <div id="jstree"></div>
  162. </div>
  163. <div class="col-sm-9 col-md-10 animated fadeInRight">
  164. <!-- 搜索框-->
  165. <div class="accordion-group">
  166. <div id="collapseTwo" class="accordion-body">
  167. <div class="accordion-inner">
  168. <form id="searchForm" class="form form-horizontal well clearfix" >
  169. <input type="hidden" id="companyId" name="company.id"/>
  170. <input type="hidden" id="officeId" name="office.id"/>
  171. <div class="col-sm-4">
  172. <label class="label-item single-overflow pull-left" title="登录名:">登录名:</label>
  173. <input type="text" name="loginName" maxlength="100" class=" form-control"/>
  174. </div>
  175. <div class="col-sm-4">
  176. <label class="label-item single-overflow pull-left" title="姓名:">姓名:</label>
  177. <input type="text" name="name" maxlength="100" class=" form-control"/>
  178. </div>
  179. <div class="col-sm-4">
  180. <div style="margin-top:26px">
  181. <a id="search" class="btn btn-primary btn-rounded btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
  182. <a id="reset" class="btn btn-primary btn-rounded btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
  183. </div>
  184. </div>
  185. </form>
  186. </div>
  187. </div>
  188. </div><!-- 搜索框结束 -->
  189. <!-- 表格 -->
  190. <table id="table"
  191. data-toolbar="#toolbar"
  192. data-minimum-count-columns="2"
  193. data-id-field="id">
  194. </table>
  195. </div>
  196. </div>
  197. </div>
  198. </body>
  199. </html>