gridselect.jsp 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/webpage/include/taglib.jsp"%>
  3. <html>
  4. <head>
  5. <meta name="decorator" content="ani"/>
  6. <%@ include file="/webpage/include/bootstraptable.jsp"%>
  7. <script>
  8. $(document).ready(function() {
  9. $('#table').bootstrapTable({
  10. //请求方法
  11. method: 'post',
  12. //类型json
  13. dataType: "json",
  14. contentType: "application/x-www-form-urlencoded",
  15. //是否显示行间隔色
  16. striped: true,
  17. //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  18. cache: false,
  19. //是否显示分页(*)
  20. pagination: true,
  21. //排序方式
  22. sortOrder: "asc",
  23. //初始化加载第一页,默认第一页
  24. pageNumber:1,
  25. //每页的记录行数(*)
  26. pageSize: 10,
  27. //可供选择的每页的行数(*)
  28. pageList: [10, 25, 50, 'ALL'],
  29. //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
  30. url: "${url}",
  31. //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
  32. //queryParamsType:'',
  33. ////查询参数,每次调用是会带上这个参数,可自定义
  34. queryParams : function(params) {
  35. var searchParam = $("#searchForm").serializeJSON();
  36. searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
  37. searchParam.pageSize = params.limit === undefined? -1 : params.limit;
  38. searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+ params.order;
  39. return searchParam;
  40. },
  41. //分页方式:client客户端分页,server服务端分页(*)
  42. sidePagination: "server",
  43. columns: [{
  44. <c:if test="${isMultiSelected}">
  45. checkbox: true
  46. </c:if>
  47. <c:if test="${!isMultiSelected}">
  48. radio: true
  49. </c:if>
  50. }
  51. <c:forEach items="${fieldLabels}" var="name" varStatus="status">
  52. ,{
  53. field: '${fieldKeys[status.index]}',
  54. title: '${fieldLabels[status.index]}',
  55. sortable: true
  56. }
  57. </c:forEach>
  58. ]
  59. });
  60. if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端,默认关闭tab
  61. $('#table').bootstrapTable("toggleView");
  62. }
  63. $("#search").click("click", function() {// 绑定查询按扭
  64. $('#table').bootstrapTable('refresh');
  65. });
  66. $("#reset").click("click", function() {// 绑定查询按扭
  67. $("#searchForm input").val("");
  68. $("#searchForm select").val("");
  69. $('#table').bootstrapTable('refresh');
  70. });
  71. });
  72. function getSelections() {
  73. return $.map($("#table").bootstrapTable('getSelections'), function (row) {
  74. return row
  75. });
  76. }
  77. </script>
  78. </head>
  79. <body class="bg-white">
  80. <div class="wrapper wrapper-content">
  81. <!-- 搜索 -->
  82. <div class="accordion-group">
  83. <div class="accordion-inner">
  84. <form id="searchForm" class="form form-horizontal well clearfix">
  85. <c:forEach items="${searchLabels}" var="name" varStatus="status">
  86. <div class="col-xs-12 col-sm-6 col-md-4">
  87. <label class="label-item single-overflow pull-left" title="类型名:">${searchLabels[status.index]}</label>
  88. <input name="${searchKeys[status.index]}" maxlength="64" class=" form-control"/>
  89. </div>
  90. </c:forEach>
  91. <div class="col-xs-12 col-sm-6 col-md-4">
  92. <div style="margin-top:26px">
  93. <a id="search" class="btn btn-primary btn-rounded btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
  94. <a id="reset" class="btn btn-primary btn-rounded btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
  95. </div>
  96. </div>
  97. </form>
  98. </div>
  99. </div>
  100. <!-- 表格 -->
  101. <table id="table"></table>
  102. </div>
  103. </body>
  104. </html>