Keine Beschreibung

list.html 6.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>工单查询</title>
  6. <script src="./Script/Common/huayi.load.js"></script>
  7. <link rel="stylesheet" href="./css/WorkOrder/listInit.css">
  8. </head>
  9. <body class="gray-bg">
  10. <div class="wrapper wrapper-content animated fadeInRight">
  11. <div class="daoHang clearfix">
  12. <div class="dhLeft">
  13. <sapn>
  14. <i class="syIcon"></i>位置:
  15. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  16. <a href="" class="nowPosition">数据共享</a>
  17. </sapn>
  18. </div>
  19. <div class="dhRight">
  20. <a href="" title="刷新"><i class="fa fa-refresh"></i></a>
  21. </div>
  22. </div>
  23. <div style="padding: 10px" class="tj_content clearFix">
  24. <div style="padding: 10px" class="tj_content clearFix">
  25. <div>
  26. <span>【搜索信息】</span>
  27. <div class="box_content">
  28. <table id="sqzx" style="width: 100%" border="0" cellspacing="0" cellpadding="0">
  29. <tr>
  30. <th>关键词:</th>
  31. <td>
  32. <input type="text" id="tel" class="form-control " placeholder="请输入关键词" />
  33. </td>
  34. <th>共享渠道:</th>
  35. <td>
  36. <select class="form-control select_" id="source"></select>
  37. </td>
  38. <th>共享时间:</th>
  39. <td colspan="2">
  40. <input id="starttime" class="date_input laydate-icon" type="text" autocomplete="off" />
  41. -<input id="endtime" class="date_input laydate-icon" type="text" autocomplete="off" />
  42. </td>
  43. <td>
  44. <botton class="btns Seach">搜索</botton>
  45. <botton class="btns exportFile">导出</botton>
  46. </td>
  47. </tr>
  48. </table>
  49. </div>
  50. </div>
  51. <div>
  52. <div style="width: 100%; padding: 10px">
  53. <table id="orderlist" data-row-style="rowStyle" data-query-params="queryParams"
  54. data-pagination="true">
  55. <thead>
  56. <tr>
  57. <th data-formatter="serialNumber" data-align="center">序号</th>
  58. <th data-field="resourceName" data-formatter="GetTit" data-align="center">资源名称</th>
  59. <th data-field="resourceContent" data-formatter="GetCont" data-align="center">资源内容</th>
  60. <th data-field="sharedChannel" data-align="center">共享渠道</th>
  61. <th data-field="panelname" data-align="center">所属板块</th>
  62. <th data-field="sharingTime" data-align="center">共享时间</th>
  63. <th data-field="resourceState" data-align="center">资源状态</th>
  64. <th data-field="resourceProvider" data-align="center">资源提供方</th>
  65. </tr>
  66. </thead>
  67. <tbody class="list"></tbody>
  68. </table>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <script>
  75. var exportParams; // 导出参数
  76. $(document).ready(function () {
  77. laydate.skin('blue');
  78. laydate({
  79. elem: '#starttime',
  80. event: 'focus',
  81. istime: true,
  82. format: 'YYYY-MM-DD hh:mm:ss'
  83. });
  84. laydate({
  85. elem: '#endtime',
  86. event: 'focus',
  87. istime: true,
  88. format: 'YYYY-MM-DD hh:mm:ss'
  89. });
  90. load();
  91. });
  92. $("#orderlist").on("click-row.bs.table", function (e, row, ele) {
  93. $(".success").removeClass("success"); //去除之前选中的行的,选中样式
  94. $(ele).addClass("success"); //添加当前选中的 success样式用于区别
  95. });
  96. //获取查询信息
  97. function load() {
  98. //先销毁表格
  99. $("#orderlist").bootstrapTable("destroy");
  100. //初始化表格,动态从服务器加载数据
  101. $("#orderlist").bootstrapTable({
  102. method: "get", //使用get请求到服务器获取数据
  103. url: "./json/jsonData.js", //获取数据的Servlet地址
  104. contentType: "application/x-www-form-urlencoded",
  105. striped: true, //表格显示条纹
  106. pagination: true, //启动分页
  107. pageSize: 10, //每页显示的记录数
  108. pageNumber: 1, //当前第几页
  109. pageList: [10, 20, 50, 100], //记录数可选列表
  110. search: false, //是否启用查询
  111. showColumns: false, //显示下拉框勾选要显示的列
  112. showRefresh: false, //显示刷新按钮
  113. sidePagination: "server", //表示服务端请求
  114. queryParamsType: "undefined",
  115. queryParams: function queryParams(params) {
  116. //设置查询参数
  117. var param = {
  118. page: params.pageNumber,
  119. pagesize: params.pageSize,
  120. };
  121. // 导出参数
  122. exportParams = param;
  123. return param;
  124. },
  125. onLoadSuccess: function (data) {
  126. //加载成功时执行
  127. //layer.msg("加载成功");
  128. //console.log(data);
  129. },
  130. onLoadError: function () {
  131. //加载失败时执行
  132. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  133. },
  134. });
  135. }
  136. //编号
  137. function serialNumber(val, row, index) {
  138. return index + 1;
  139. }
  140. function GetCont(val) {
  141. return stringDot(val,50)
  142. }
  143. function GetTit(val){
  144. return stringDot(val,15)
  145. }
  146. // 超出字符串用...
  147. function stringDot(val,num){
  148. if (val) {
  149. var str = "<div ";
  150. if (val.length >num) {
  151. str = str + ' title="' + val + '" ';
  152. val = val.substr(0,num) + "..."
  153. }
  154. return str + ">" + val + "</div>";
  155. } else {
  156. return "";
  157. }
  158. }
  159. // 导出文件
  160. $(".exportFile").click(function() {
  161. //详情见笔记----E:\desktopFile\dailyNotes\knowledgePoint\js
  162. //exportFileFun("WorkOrder/GetList", exportParams)
  163. // download(url)
  164. })
  165. </script>
  166. </body>
  167. </html>