PingAnYeXianSZCG_Web 前端代码

AddRight.html 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../Script/Common/huayi.load.js"></script>
  6. <script src="../Script/Common/huayi.config.js"></script>
  7. <link href="../css/Table/table1.css" rel="stylesheet" />
  8. <link href="../css/init.css" rel="stylesheet" />
  9. <link rel="stylesheet" href="../css/Quality/bootstrap-editable.css" />
  10. <script src="../js/Questions/bootstrap-editable.js"></script>
  11. <title></title>
  12. <style>
  13. table tr {
  14. margin-bottom: 20px;
  15. }
  16. table tr td {
  17. text-align: left;
  18. padding: 5px;
  19. }
  20. .Content {
  21. padding: 10px;
  22. }
  23. .btn {
  24. background: #1ab394;
  25. }
  26. .Btn_box {
  27. margin-top: 20px;
  28. color: #fff;
  29. }
  30. .inpBox select {
  31. width: 150px;
  32. padding: 3px 6px;
  33. }
  34. .F_Remark {
  35. width: 100%;
  36. }
  37. .tab {
  38. border-bottom: 1px solid #ccc;
  39. }
  40. .Check_box {
  41. display: none;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div>
  47. <div class="Content">
  48. <div class="tab">
  49. <table id="sqzx" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
  50. <tr>
  51. <th>指标标题:</th>
  52. <td>
  53. <div class="inpBox">
  54. <select name="">
  55. <option value="0">问答题</option>
  56. <option value="1">单选题</option>
  57. </select>
  58. </div>
  59. </td>
  60. <th>指标标题:</th>
  61. <td>
  62. <div class="inpBox">
  63. <select name="" id="CheckQuestion">
  64. <option value="0">问答题</option>
  65. <option value="1">单选题</option>
  66. </select>
  67. </div>
  68. </td>
  69. </tr>
  70. <tr>
  71. <th>指标描述:</th>
  72. <td colspan="5">
  73. <textarea name="" rows="3" cols="20" class="F_Remark"></textarea>
  74. </td>
  75. </tr>
  76. </table>
  77. </div>
  78. <div class="Check_box">
  79. <h3>试题选项</h3>
  80. <h3 style="font-size: 14px; text-align: right;"><i class="fa fa-plus size-14" id="Add"></i>添加选项</h3>
  81. <table id="tbr" style="width: 100%;">
  82. <thead>
  83. <tr>
  84. <th data-align="center" data-field="id" data-formatter="setCode">序号</th>
  85. <th data-align="center" data-field="F_CategoryName" data-formatter="Check">选项</th>
  86. <th data-align="center" data-field="F_Title" data-formatter="Remove">操作</th>
  87. </tr>
  88. </thead>
  89. <tbody>
  90. </tbody>
  91. </table>
  92. </div>
  93. <div style="text-align: center; margin-top: 50px;">
  94. <button class="btns searchGo size-14">保存</button>
  95. </div>
  96. </div>
  97. </div>
  98. <script>
  99. $(document).ready(function() {
  100. $("#CheckQuestion").change(function() {
  101. var ss = $(this).children('option:selected').val();
  102. if(ss == "1") {
  103. $(".Check_box").show();
  104. } else if(ss == "0") {
  105. $(".Check_box").hide();
  106. }
  107. });
  108. });
  109. var $tableLeft = $('#tbr');
  110. //销毁表格
  111. $tableLeft.bootstrapTable('destroy');
  112. // 初始化表格,动态从服务器加载数据
  113. $tableLeft.bootstrapTable({
  114. method: "get", //使用get请求到服务器获取数据
  115. // url: huayi.config.callcenter_url + "IndexBase/GetList",
  116. // url: "//117.158.196.116:8878/IndexBase/GetList",
  117. striped: true, //表格显示条纹
  118. pagination: true, //启动分页
  119. pageSize: 5, //每页显示的记录数
  120. pageNumber: 1, //当前第几页
  121. pageList: [5, 20, 50, 100], //记录数可选列表
  122. search: false, //是否启用查询
  123. showColumns: false, //显示下拉框勾选要显示的列
  124. showRefresh: false, //显示刷新按钮
  125. sidePagination: "server", //表示服务端请求
  126. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  127. //设置为limit可以获取limit, offset, search, sort, order
  128. queryParamsType: "undefined",
  129. queryParams: function queryParams(params) { //设置查询参数
  130. var param = {
  131. page: params.pageNumber,
  132. pagesize: params.pageSize,
  133. categoryid: Left_Cids,
  134. key: Keys
  135. };
  136. return param;
  137. },
  138. onLoadSuccess: function() { //加载成功时执行
  139. // layer.msg("加载成功");
  140. },
  141. onLoadError: function() { //加载失败时执行
  142. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  143. }
  144. });
  145. //序号
  146. function setCode(value, row, index) {
  147. return index + 1;
  148. }
  149. //修改
  150. function Check(value, row, index){
  151. return'<a title="点击移入" class="username">'+value+'</a>'
  152. }
  153. //操作
  154. function Remove(value, row, index){
  155. return '<div><a title="点击移入" ><i class="fa fa-remove size-14"></i></a></div>'
  156. }
  157. $("#Add").click(function() {
  158. var index = $tableLeft.bootstrapTable('getData').length;
  159. $tableLeft.bootstrapTable('insertRow', {
  160. index: index,
  161. row: {
  162. id: '测试',
  163. F_CategoryName: '测试测试'
  164. }
  165. });
  166. });
  167. $('.username').editable({
  168. });
  169. </script>
  170. </body>
  171. </html>