体育赛事修改表.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>参赛队成绩表格</title>
  6. <link rel="stylesheet" href="static/css/index.css">
  7. <link rel="stylesheet" href="static/eui/element-ui.css">
  8. <script src="static/vue/vue.min.js"></script>
  9. <script src="static/vue/vue-resource.js"></script>
  10. <script src="static/eui/index.js"></script>
  11. <script src="static/comm/Ajax.js"></script>
  12. <script src="js/jquery-3.4.1.min.js"></script>
  13. <link rel="stylesheet" href="css/demo.css">
  14. <script src="js/other.js"></script>
  15. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  16. <style type="text/css">
  17. .match-achievement{
  18. margin: 50px 50px;
  19. width:1000px;
  20. }
  21. .match-achievement table{
  22. background:#E0ECFF;
  23. width:100%;
  24. }
  25. .match-achievement td{
  26. background:#fafafa;
  27. text-align:center;
  28. padding:2px;
  29. }
  30. .match-achievement td{
  31. background:#E0ECFF;
  32. }
  33. .match-achievement td.drop{
  34. background:#fafafa;
  35. width:100px;
  36. }
  37. .match-achievement td.over{
  38. background:#FBEC88;
  39. }
  40. .item{
  41. text-align:center;
  42. border:1px solid #499B33;
  43. background:#fafafa;
  44. width:100px;
  45. }
  46. .assigned{
  47. border:1px solid #BC2A4D;
  48. }
  49. .add{
  50. width: 100px;
  51. height: 30px;
  52. }
  53. a{
  54. text-decoration: none;
  55. color: #000000;
  56. }
  57. a:hover{
  58. color: #CC2222;
  59. }
  60. </style>
  61. </head>
  62. <body style="width: 70%;">
  63. <div id="app">
  64. <div class="match-achievement" >
  65. <h1>参赛队成绩表</h1>
  66. <table class="tab" >
  67. <tr>
  68. <td>
  69. <a href="#" class="easyui-linkbutton"
  70. data-options="iconCls:'icon-add'" id="add">新增
  71. </a>
  72. <a href="#" class="easyui-linkbutton"
  73. data-options="iconCls:'icon-edit'" id="edit">编辑
  74. </a>
  75. <a href="#" class="easyui-linkbutton"
  76. data-options="iconCls:'icon-cancel'" id="del">删除
  77. </a>
  78. </td>
  79. <td>id</td>
  80. <td>项目名</td>
  81. <td>性别</td>
  82. <td>所属部门</td>
  83. <td>排序</td>
  84. <td>取前几名</td>
  85. <td>前几名的分值</td>
  86. </tr>
  87. <tr tr v-for="c1 in c1s">
  88. <td class="drop"><input type="checkbox"></td>
  89. <td class="drop">{{c1.id}}</td>
  90. <td class="drop">{{c1.name}}</td>
  91. <td class="drop">{{c1.gender}}</td>
  92. <td class="drop">{{c1.department}}</td>
  93. <td class="drop">{{c1.sequenue}}</td>
  94. <td class="drop">{{c1.tops}}</td>
  95. <td class="drop">{{c1.scours}}</td>
  96. </tr>
  97. </table>
  98. </div>
  99. <!--输入框-->
  100. <div class="inp">
  101. <h3>新增</h3>
  102. <form method="post">
  103. 项目名:<input id="addname" type="text" name="title"><br>
  104. 性别:<input id="addgender" type="text" name="sotr"><br>
  105. 所属部门:<input id="adddepartment" type="text" name="sotr"><br>
  106. </form>
  107. <button value="按钮" id="findAll" @click="onSubmit1">添加</button>
  108. </div>
  109. <div class="editinp">
  110. <h3>编辑 </h3>
  111. <form method="post">
  112. id:<input id="gaiid" type="text" name="id"><br>
  113. 项目名:<input id="gainame" type="text" name="title"><br>
  114. 性别:<input id="gaigender" type="text" name="sotr">a:综合 m男 f女<br>
  115. 所属部门:<input id="gaidepartment" type="text" name="id"><br>
  116. 排序:<input id="gaisequenue" type="text" name="title"><br>
  117. 取前几名:<input id="gaitops" type="text" name="sotr"><br>
  118. 前几名的分值:<input id="gaiscours" type="text" name="id"><br>
  119. </form>
  120. <button value="按钮" id="findAll2" @click="onSubmit2">修改</button>
  121. </div>
  122. <div class="delinp">
  123. <h3>删除 </h3>
  124. <form method="post">
  125. id: <input type="text" id="shanid" name="id"><br>
  126. </form>
  127. <button value="按钮" id="findAll3" @click="onSubmit3">删除</button>
  128. </div>
  129. </div>
  130. </body>
  131. <script>
  132. new Vue({
  133. el: '#app',
  134. data() {
  135. return {
  136. c1s: [],
  137. listLoading:false,
  138. }
  139. },
  140. created() {
  141. this.ajax = new Ajax(this);
  142. this.getSportsitems_peopleController()
  143. },
  144. methods: {
  145. //通过ajax去请求服务端,获取数据
  146. getSportsitems_peopleController() {
  147. let that = this;
  148. let url = "SportsitemsController/findAll";
  149. //调用Ajax的get方法
  150. that.ajax.get(url, function (rs) {
  151. that.c1s = rs;
  152. console.log(that.c1s)
  153. });
  154. },
  155. //通过ajax去请求服务端,获取数据
  156. getSportsitems_peopleController1() {
  157. var name2 = $("#addname").val();
  158. var gender2 =$("#addgender").val();
  159. var department2 = $("#adddepartment").val();
  160. axios.post('http://localhost:8199/SportsitemsController/save', {
  161. gender: gender2,
  162. name: name2,
  163. department : department2
  164. }).then(function (response) {
  165. location.reload();
  166. console.log(response);
  167. }).catch(function (error) {
  168. console.log(error);
  169. });
  170. },
  171. getSportsitems_peopleController2() {
  172. var id2 =$("#gaiid").val();
  173. var name2 = $("#gainame").val();
  174. var gender2 =$("#gaigender").val();
  175. var department2 = $("#gaidepartment").val();
  176. var sequenue2 = $("#gaisequenue").val();
  177. var tops2 = $("#gaitops").val();
  178. var scours2 = $("#gaiscours").val();
  179. axios.post('http://localhost:8199/SportsitemsController/update', {
  180. id : id2,
  181. name : name2,
  182. gender : gender2,
  183. department : department2,
  184. sequenue : sequenue2,
  185. tops : tops2,
  186. scours : scours2
  187. }).then(function (response) {
  188. location.reload();
  189. console.log(response);
  190. }).catch(function (error) {
  191. console.log(error);
  192. });
  193. },
  194. getSportsitems_peopleController3() {
  195. var id2 =$("#shanid").val();
  196. axios.post('http://localhost:8199/SportsitemsController/delete', {
  197. id: id2
  198. }).then(function (response) {
  199. location.reload();
  200. console.log(response);
  201. }).catch(function (error) {
  202. console.log(error);
  203. });
  204. },
  205. onSubmit1() {
  206. let that = this;
  207. that.getSportsitems_peopleController1()
  208. },
  209. onSubmit2() {
  210. let that = this;
  211. that.getSportsitems_peopleController2()
  212. },
  213. onSubmit3() {
  214. let that = this;
  215. that.getSportsitems_peopleController3()
  216. },
  217. }
  218. })
  219. </script>
  220. </html>