PingAnYeXianSZCG_Web 前端代码

Table.html 7.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>语音留言</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link href="../css/init.css" rel="stylesheet" />
  8. <script src="../Script/Common/huayi.load.js"></script>
  9. <script src="../Script/Common/huayi.config.js"></script>
  10. <link href="../css/Table/table1.css" rel="stylesheet" />
  11. <script src="../css/laydate/laydate.js"></script>
  12. <style>
  13. .LY:hover {
  14. color: #fff;
  15. }
  16. .LY:active {
  17. color: #fff!important;
  18. }
  19. #Task thead td {
  20. color: #fff;
  21. background-color: #1ab394;
  22. text-align: center;
  23. }
  24. .table-head table thead {
  25. width: calc( 100% - 5px);
  26. }
  27. /*table thead,
  28. tbody tr {
  29. display: table;
  30. width: 100%;
  31. table-layout: fixed;
  32. text-align: center;
  33. }*/
  34. .table {
  35. margin-bottom: 0;
  36. }
  37. .table-body {
  38. width: 100%;
  39. height: 515px;
  40. overflow-y: scroll;
  41. overflow-x: scroll;
  42. }
  43. </style>
  44. </head>
  45. <body class="gray-bg">
  46. <div class="wrapper wrapper-content animated fadeInRight">
  47. <div class="daoHang clearfix">
  48. <div class="dhLeft">
  49. <sapn><i class="syIcon"></i>位置:
  50. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  51. <a href="javaScript:;">调查问卷</a>&gt;
  52. <a href="" style="color: #000;">调查问卷统计</a>
  53. </sapn>
  54. </div>
  55. </div>
  56. <div class="th-box">
  57. <div class="th-bar">
  58. <div class="seach-box fr">
  59. <ul>
  60. <li>任务列表:
  61. <select name="" id="cljg" class="x-color select">
  62. </select>
  63. </li>
  64. <li>问题列表:
  65. <select name="" id="Wt" class="x-color select">
  66. </select>
  67. </li>
  68. <li>留言时间:<input class="photo x-color laydate-icon" type="text" id="lysj" /></li>
  69. <li>处理时间:<input class="laydate-icon photo x-color " type="text" id="clsj" /></li>
  70. <li>
  71. <a class="sc_btn seach">搜索</a>
  72. </li>
  73. </ul>
  74. </div>
  75. </div>
  76. </div>
  77. <div style="width: 100%;padding: 10px;">
  78. <div class="table-head">
  79. <table id="Task" class="table table-hover table-striped table-bordered table-condensed">
  80. <colgroup>
  81. <col style="width: 80px;" />
  82. <col/>
  83. </colgroup>
  84. <thead>
  85. <tr>
  86. <td>测试测试</td>
  87. <td colspan="4">测试测试</td>
  88. <td>测试测试</td>
  89. <td>测试测试</td>
  90. <td>测试测试</td>
  91. <td>测试测试</td>
  92. <td>测试测试</td>
  93. <td>测试测试</td>
  94. <td>测试测试</td>
  95. </tr>
  96. </thead>
  97. </table>
  98. </div>
  99. <div class="table-body">
  100. <table class="thTable hwbb table table-hover table-striped table-bordered table-condensed">
  101. <colgroup>
  102. <col style="width: 80px;" />
  103. <col/>
  104. </colgroup>
  105. <tbody>
  106. <tr>
  107. <td>测试测试</td>
  108. <td colspan="4" style="text-align: center;">测试测试</td>
  109. <td colspan="4" style="text-align: center;">测试测试</td>
  110. <td colspan="4" style="text-align: center;">测试测试</td>
  111. <td colspan="2" style="text-align: center;">测试测试</td>
  112. <td colspan="3" style="text-align: center;">测试测试</td>
  113. </tr>
  114. <tr style="border:1px solid #E0EEFE" align="center">
  115. <td ></td>
  116. <td>A</td>
  117. <td>B</td>
  118. <td>B</td>
  119. <td>D</td>
  120. <td>A</td>
  121. <td>B</td>
  122. <td>B</td>
  123. <td>D</td>
  124. <td>测试测试</td>
  125. <td>测试测试</td>
  126. <td>测试测试</td>
  127. </tr>
  128. <tr style="border:1px solid #E0EEFE" align="center">
  129. <td>测试测试</td>
  130. <td>测试测试</td>
  131. <td>测试测试</td>
  132. <td>测试测试</td>
  133. <td>测试测试</td>
  134. <td>测试测试</td>
  135. <td>测试测试</td>
  136. <td>测试测试</td>
  137. <td>测试测试</td>
  138. <td>测试测试</td>
  139. <td>测试测试</td>
  140. </tr>
  141. <tr style="border:1px solid #E0EEFE" align="center">
  142. <td>测试测试</td>
  143. <td>测试测试</td>
  144. <td>测试测试</td>
  145. <td>测试测试</td>
  146. <td>测试测试</td>
  147. <td>测试测试</td>
  148. <td>测试测试</td>
  149. <td>测试测试</td>
  150. <td>测试测试</td>
  151. <td>测试测试</td>
  152. <td>测试测试</td>
  153. </tr>
  154. <tr style="border:1px solid #E0EEFE" align="center">
  155. <td>测试测试</td>
  156. <td>测试测试</td>
  157. <td>测试测试</td>
  158. <td>测试测试</td>
  159. <td>测试测试</td>
  160. <td>测试测试</td>
  161. <td>测试测试</td>
  162. <td>测试测试</td>
  163. <td>测试测试</td>
  164. <td>测试测试</td>
  165. <td>测试测试</td>
  166. </tr>
  167. </tbody>
  168. </table>
  169. </div>
  170. </div>
  171. </div>
  172. >
  173. <script>
  174. $(document).ready(function() {
  175. Task();
  176. Questionnaire();
  177. $(".sc_btn").click(function() {
  178. GetColumnList();
  179. Number()
  180. })
  181. ///查询条件中获取任务列表
  182. function Task() {
  183. $.ajax({
  184. type: "get",
  185. url: huayi.config.callcenter_url + "Questionnaire/GetTaskList",
  186. dataType: 'json',
  187. data: {
  188. token: $.cookie("token")
  189. },
  190. async: true,
  191. success: function(data) {
  192. var Count = data.data;
  193. $("<option value=''>--全部--</option>").appendTo($("#cljg"));
  194. for(var i = 0; i < Count.length; i++) {
  195. console.log(Count[i].F_UserName);
  196. $("<option value='" + Count[i].F_TaskName + "'>" + Count[i].F_TaskName + "</option>").appendTo($("#cljg"));
  197. }
  198. console.log(Count)
  199. }
  200. });
  201. }
  202. ///查询条件问题任务列表
  203. function Questionnaire() {
  204. $.ajax({
  205. type: "get",
  206. url: huayi.config.callcenter_url + "Questionnaire/GetQList",
  207. dataType: 'json',
  208. data: {
  209. token: $.cookie("token")
  210. },
  211. async: true,
  212. success: function(data) {
  213. var Count = data.data;
  214. $("<option value=''>--全部--</option>").appendTo($("#Wt"));
  215. for(var i = 0; i < Count.length; i++) {
  216. console.log(Count[i].F_UserName);
  217. $("<option value='" + Count[i].F_Title + "'>" + Count[i].F_Title + "</option>").appendTo($("#Wt"));
  218. }
  219. console.log(Count)
  220. }
  221. });
  222. }
  223. //任务查询获取表头
  224. function GetColumnList() {
  225. $("#Task thead tr").empty();
  226. $.ajax({
  227. type: "get",
  228. url: huayi.config.callcenter_url + "Questionnaire/GetColumnList",
  229. dataType: 'json',
  230. data: {
  231. taskname: $("#cljg").val(),
  232. question: $("#Wt").val(),
  233. token: $.cookie("token")
  234. },
  235. async: true,
  236. success: function(data) {
  237. var Count = data.data;
  238. for(var i = 0; i < Count.length; i++) {
  239. $('<td>' + Count[i].wenti + ' </td>').appendTo("#Task thead tr");
  240. }
  241. console.log(Count)
  242. }
  243. });
  244. }
  245. function Number() {
  246. $.ajax({
  247. type: "get",
  248. url: huayi.config.callcenter_url + "Questionnaire/GetDataList",
  249. dataType: 'json',
  250. data: {
  251. taskname: $("#cljg").val(),
  252. question: $("#Wt").val(),
  253. token: $.cookie("token")
  254. },
  255. async: true,
  256. success: function(data) {
  257. var Count = data.data;
  258. console.log(Count)
  259. }
  260. });
  261. }
  262. })
  263. //音频
  264. </script>
  265. </body>
  266. </html>