dynamicList.jsp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/webpage/include/taglib.jsp"%>
  3. <html>
  4. <head>
  5. <title>功能测试</title>
  6. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  7. <meta name="decorator" content="ani"/>
  8. <%@ include file="/webpage/include/bootstraptable.jsp"%>
  9. <%@include file="/webpage/include/treeview.jsp" %>
  10. </head>
  11. <body>
  12. <div class="wrapper wrapper-content">
  13. <div class="panel panel-primary">
  14. <div class="panel-heading">
  15. <h3 class="panel-title">请假表单列表</h3>
  16. </div>
  17. <div class="panel-body">
  18. <!-- 搜索 -->
  19. <div class="accordion-group">
  20. <div id="collapseTwo" class="accordion-body collapse">
  21. <div class="accordion-inner">
  22. <form id="searchForm" class="form form-horizontal well clearfix">
  23. <div class="col-xs-12 col-sm-6 col-md-4">
  24. <label class="label-item single-overflow pull-left" title="归属部门:">归属部门:</label>
  25. <sys:treeselect id="office" name="office.id" labelName="office.name"
  26. title="部门" url="/sys/office/treeData?type=2" cssClass="form-control" allowClear="true" notAllowSelectParent="true"/>
  27. </div>
  28. <div class="col-xs-12 col-sm-6 col-md-4">
  29. <label class="label-item single-overflow pull-left" title="员工:">员工:</label>
  30. <sys:userselect id="tuser" name="tuser.id" labelName="tuser.name"
  31. cssClass="form-control required"/>
  32. </div>
  33. <div class="col-xs-12 col-sm-6 col-md-4">
  34. <label class="label-item single-overflow pull-left" title="归属区域:">归属区域:</label>
  35. <div class=" input-group" style=" width: 100%;">
  36. <input name="area" htmlEscape="false" data-toggle="city-picker" style="height: 34px;font-size: 14px;"/>
  37. </div>
  38. </div>
  39. <div class="col-xs-12 col-sm-6 col-md-4">
  40. <div class="form-group">
  41. <label class="label-item single-overflow pull-left" title="请假开始日期:">&nbsp;请假开始日期:</label>
  42. <div class="col-xs-12">
  43. <div class="col-xs-12 col-sm-5">
  44. <div class='input-group date' id='beginBeginDate' style="left: -10px;" >
  45. <input type='text' name="beginBeginDate" class="form-control" />
  46. <span class="input-group-addon">
  47. <span class="glyphicon glyphicon-calendar"></span>
  48. </span>
  49. </div>
  50. </div>
  51. <div class="col-xs-12 col-sm-1">
  52. ~
  53. </div>
  54. <div class="col-xs-12 col-sm-5">
  55. <div class='input-group date' id='endBeginDate' style="left: -10px;" >
  56. <input type='text' name="endBeginDate" class="form-control" />
  57. <span class="input-group-addon">
  58. <span class="glyphicon glyphicon-calendar"></span>
  59. </span>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="col-xs-12 col-sm-6 col-md-4">
  66. <div class="form-group">
  67. <label class="label-item single-overflow pull-left" title="请假结束日期:">&nbsp;请假结束日期:</label>
  68. <div class="col-xs-12">
  69. <div class='input-group date' id='endDate' >
  70. <input type='text' name="endDate" class="form-control" />
  71. <span class="input-group-addon">
  72. <span class="glyphicon glyphicon-calendar"></span>
  73. </span>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="col-xs-12 col-sm-6 col-md-4">
  79. <label class="label-item single-overflow pull-left" title="备注信息:">备注信息:</label>
  80. <input name="remarks" htmlEscape="false" maxlength="257" class=" form-control"/>
  81. </div>
  82. <div class="col-xs-12 col-sm-6 col-md-4">
  83. <div style="margin-top:26px">
  84. <a id="search" class="btn btn-primary btn-rounded btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
  85. <a id="reset" class="btn btn-primary btn-rounded btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
  86. </div>
  87. </div>
  88. </form>
  89. </div>
  90. </div>
  91. </div>
  92. <!-- 工具栏 -->
  93. <div id="toolbar">
  94. <shiro:hasPermission name="test:one:leaveForm:add">
  95. <button id="add" class="btn btn-primary" onclick="add()" title="请假表单"><i class="glyphicon glyphicon-plus"></i> 新建</button>
  96. </shiro:hasPermission>
  97. <shiro:hasPermission name="test:one:leaveForm:edit">
  98. <button id="edit" class="btn btn-success" disabled onclick="edit()">
  99. <i class="glyphicon glyphicon-edit"></i> 修改
  100. </button>
  101. </shiro:hasPermission>
  102. <shiro:hasPermission name="test:one:leaveForm:del">
  103. <button id="remove" class="btn btn-danger" disabled onclick="deleteAll()">
  104. <i class="glyphicon glyphicon-remove"></i> 删除
  105. </button>
  106. </shiro:hasPermission>
  107. <shiro:hasPermission name="test:one:leaveForm:import">
  108. <button id="btnImport" class="btn btn-info"><i class="fa fa-folder-open-o"></i> 导入</button>
  109. <div id="importBox" class="hide">
  110. <form id="importForm" action="${ctx}/test/one/leaveForm/import" method="post" enctype="multipart/form-data"
  111. style="padding-left:20px;text-align:center;" ><br/>
  112. <input id="uploadFile" name="file" type="file" style="width:330px"/>导入文件不能超过5M,仅允许导入“xls”或“xlsx”格式文件!<br/>  
  113. </form>
  114. </div>
  115. </shiro:hasPermission>
  116. <a class="accordion-toggle btn btn-default" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
  117. <i class="fa fa-search"></i> 检索
  118. </a>
  119. </div>
  120. <!-- 表格 -->
  121. <table id="table" data-toolbar="#toolbar" ></table>
  122. </div>
  123. </div>
  124. </div>
  125. <script>
  126. function add() {
  127. jp.go("${ctx}/form/dynamic/form?form_id=${form_id}");
  128. }
  129. function getIdSelections() {
  130. return $.map($("#table").bootstrapTable('getSelections'), function (row) {
  131. return row.id
  132. });
  133. }
  134. function getIds() {
  135. return $.map($("#table").bootstrapTable('getSelections'), function (row) {
  136. return "'"+row.id+"'"
  137. });
  138. }
  139. function deleteAll(){
  140. jp.confirm('确认要删除选中记录吗?', function(){
  141. jp.loading();
  142. jp.get("${ctx}/form/dynamic/deleteAll?form_id=${form_id}&ids=" + getIds(), function(data){
  143. if(data.success){
  144. $('#table').bootstrapTable('refresh');
  145. jp.success(data.msg);
  146. }else{
  147. jp.error(data.msg);
  148. }
  149. })
  150. })
  151. }
  152. function edit(){
  153. jp.go("${ctx}/form/dynamic/form?form_id=${form_id}&id=" + getIdSelections());
  154. }
  155. $(document).ready(function() {
  156. $('#table').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
  157. 'check-all.bs.table uncheck-all.bs.table', function () {
  158. $('#remove').prop('disabled', ! $('#table').bootstrapTable('getSelections').length);
  159. $('#edit').prop('disabled', $('#table').bootstrapTable('getSelections').length!=1);
  160. });
  161. $('#table').bootstrapTable({
  162. url: '${ctx}/form/dynamic/data?form_id=${form_id}',
  163. //请求方法
  164. method: 'post',
  165. //类型json
  166. dataType: "json",
  167. contentType: "application/x-www-form-urlencoded",
  168. //显示刷新按钮
  169. showRefresh: true,
  170. //显示切换手机试图按钮
  171. showToggle: true,
  172. //显示 内容列下拉框
  173. showColumns: true,
  174. //显示到处按钮
  175. showExport: true,
  176. //显示切换分页按钮
  177. showPaginationSwitch: true,
  178. //最低显示2行
  179. minimumCountColumns: 2,
  180. //是否显示行间隔色
  181. striped: true,
  182. //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  183. cache: false,
  184. //是否显示分页(*)
  185. pagination: true,
  186. //排序方式
  187. sortOrder: "asc",
  188. //初始化加载第一页,默认第一页
  189. pageNumber:1,
  190. //每页的记录行数(*)
  191. pageSize: 10,
  192. //可供选择的每页的行数(*)
  193. pageList: [10, 25, 50, 100],
  194. sidePagination: "server",
  195. queryParams : function(params) {
  196. var searchParam = $("#searchForm").serializeJSON();
  197. searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
  198. searchParam.pageSize = params.limit === undefined? -1 : params.limit;
  199. searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+ params.order;
  200. return searchParam;
  201. },
  202. columns: ${columns}
  203. });
  204. })
  205. </script>
  206. </body>
  207. </html>