PingAnYeXianSZCG_Web 前端代码

addSetting.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  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. .Content {
  14. padding: 10px;
  15. }
  16. .btn {
  17. background: #1ab394;
  18. }
  19. .Btn_box {
  20. margin-top: 20px;
  21. color: #fff;
  22. }
  23. .inpBox select {
  24. width: 150px;
  25. padding: 3px 6px;
  26. }
  27. .F_Remark {
  28. width: 100%;
  29. }
  30. .tab {
  31. border-bottom: 1px solid #ccc;
  32. }
  33. .Check_box {
  34. display: none;
  35. }
  36. .Show {
  37. display: block;
  38. }
  39. #sqzx th {
  40. width: 100px;
  41. }
  42. .d {
  43. color: forestgreen;
  44. }
  45. .du {
  46. color: #0064B6;
  47. }
  48. .w {
  49. color: #e43926;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div>
  55. <div class="Content">
  56. <div style="width: 50%;padding: 10px; float: left;">
  57. <div class="fr">
  58. <select name="" id="Select" style="width: 120px;">
  59. </select>
  60. <span>&nbsp;题型:
  61. <select name="" id="Quetions" class="x-color">
  62. <option value="">所有试题</option>
  63. <option value="1">问答题</option>
  64. <option value="2">单选题</option>
  65. <option value="3">多选题</option>
  66. </select>
  67. </span>
  68. <span>&nbsp;关键字:<input class=" inputs" type="text" id="KeyWords" style="width: 100px;"/></span>
  69. <button class="btns searchGo size-14"> <i class="fa fa-search size-14"></i>&nbsp;搜索</button>
  70. </div>
  71. <div>
  72. <p><button class="btns" id="leftMove">移入<i class="fa fa-angle-double-right" style="margin-left: 5px;"></i></button></p>
  73. </div>
  74. <table id="list" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  75. <thead>
  76. <tr>
  77. <th data-field="state" data-align="center" data-checkbox="true"></th>
  78. <th data-align="center" data-field="F_CategoryName">试题分类</th>
  79. <th data-align="center" data-field="F_Type" data-formatter="Type">试题类型</th>
  80. <th data-align="center" data-field="F_Title">试题标题</th>
  81. <th data-align="center" data-field="F_Content" data-formatter="Content">试题内容</th>
  82. </tr>
  83. </thead>
  84. <tbody id="tbody"></tbody>
  85. </table>
  86. </div>
  87. <div style="width: 50%;padding: 10px;float: right;">
  88. <p>
  89. <button class="btns" onclick="rightMove()"><i class="fa fa-angle-double-left" style="margin-right: 5px;"></i>移出</button>
  90. </p>
  91. <table id="lists" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  92. <thead>
  93. <tr>
  94. <th data-field="state" data-align="center" data-checkbox="true"></th>
  95. <th data-align="center" data-field="F_CategoryName">试题分类</th>
  96. <th data-align="center" data-field="F_Type" data-formatter="Type">试题类型</th>
  97. <th data-align="center" data-field="F_Title">试题标题</th>
  98. <th data-align="center" data-field="F_Content" data-formatter="Content">试题内容</th>
  99. </tr>
  100. </thead>
  101. <tbody id="tbody"></tbody>
  102. </table>
  103. </div>
  104. </div>
  105. </div>
  106. <script>
  107. var wid = helper.request.queryString("Str");
  108. console.log(wid);
  109. var $tableLeft = $('#list');
  110. var $tableLeft1 = $('#lists');
  111. $(document).ready(function() {
  112. List();
  113. Right();
  114. //搜索
  115. $(".searchGo").click(function() {
  116. List();
  117. })
  118. Select();
  119. //列表
  120. function Select() {
  121. $.ajax({
  122. type: "get",
  123. url: huayi.config.callcenter_url + "Questionnaire/GetQCategoryAlllist",
  124. dataType: 'json',
  125. async: true,
  126. data: {
  127. token: $.cookie("token")
  128. },
  129. success: function(data) {
  130. /*验证请求*/
  131. if(data.state == "success") {
  132. var html = '<option value=""></option>'
  133. for(var i = 0; i < data.data.length; i++) {
  134. html += '<option value="' + data.data[i].F_CategoryId + '">' + data.data[i].F_CategoryName + '</option>'
  135. }
  136. $(html).appendTo("#Select");
  137. }
  138. }
  139. });
  140. }
  141. });
  142. function List() {
  143. //销毁表格
  144. $tableLeft.bootstrapTable('destroy');
  145. // 初始化表格,动态从服务器加载数据
  146. $tableLeft.bootstrapTable({
  147. method: "get", //使用get请求到服务器获取数据
  148. url: huayi.config.callcenter_url + "Questionnaire/GetQuestionNotItemsList",
  149. striped: true, //表格显示条纹
  150. pagination: true, //启动分页
  151. pageSize: 5, //每页显示的记录数
  152. pageNumber: 1, //当前第几页
  153. pageList: [5, 20, 50, 100], //记录数可选列表
  154. search: false, //是否启用查询
  155. showColumns: false, //显示下拉框勾选要显示的列
  156. showRefresh: false, //显示刷新按钮
  157. sidePagination: "server", //表示服务端请求
  158. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  159. //设置为limit可以获取limit, offset, search, sort, order
  160. queryParamsType: "undefined",
  161. queryParams: function queryParams(params) { //设置查询参数
  162. var param = {
  163. PagerId:wid,
  164. PageIndex: params.pageNumber,
  165. PageSize: params.pageSize,
  166. token: $.cookie("token"),
  167. Key: $("#KeyWords").val(),
  168. CategoryId: $("#Select").val(),
  169. SelectType: $("#Quetions").val(),
  170. };
  171. return param;
  172. },
  173. onLoadSuccess: function() { //加载成功时执行
  174. // layer.msg("加载成功");
  175. },
  176. onLoadError: function() { //加载失败时执行
  177. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  178. }
  179. });
  180. }
  181. function Right(){
  182. $tableLeft1.bootstrapTable('destroy');
  183. // 初始化表格,动态从服务器加载数据
  184. $tableLeft1.bootstrapTable({
  185. method: "get", //使用get请求到服务器获取数据
  186. url: huayi.config.callcenter_url + "Questionnaire/GetQuestionPageList",
  187. striped: true, //表格显示条纹
  188. pagination: true, //启动分页
  189. pageSize: 5, //每页显示的记录数
  190. pageNumber: 1, //当前第几页
  191. pageList: [5, 20, 50, 100], //记录数可选列表
  192. search: false, //是否启用查询
  193. showColumns: false, //显示下拉框勾选要显示的列
  194. showRefresh: false, //显示刷新按钮
  195. sidePagination: "server", //表示服务端请求
  196. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  197. //设置为limit可以获取limit, offset, search, sort, order
  198. queryParamsType: "undefined",
  199. queryParams: function queryParams(params) { //设置查询参数
  200. var param = {
  201. PagerId:wid,
  202. PageIndex: params.pageNumber,
  203. PageSize: params.pageSize,
  204. token: $.cookie("token"),
  205. };
  206. return param;
  207. },
  208. onLoadSuccess: function() { //加载成功时执行
  209. // layer.msg("加载成功");
  210. },
  211. onLoadError: function() { //加载失败时执行
  212. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  213. }
  214. });
  215. }
  216. //序号
  217. function setCode(value, row, index) {
  218. return index + 1;
  219. }
  220. //修改
  221. function Check(value, row, index) {
  222. return '<a title="点击移入" class="username">' + value + '</a>'
  223. }
  224. function Content(val) {
  225. if(val) {
  226. var str = '<div '
  227. if(val.length > 10) {
  228. str = str + ' title="' + val + '" ';
  229. val = val.substr(0, 10) + "...";
  230. }
  231. return str + '>' + val + '</div>';
  232. } else {
  233. return '';
  234. }
  235. }
  236. //分类
  237. function Type(val) {
  238. var cs = '';
  239. var vals = '';
  240. if(val == 1) {
  241. cs = 'w';
  242. vals = "问答题"
  243. } else if(val == 2) {
  244. cs = 'd';
  245. vals = "单选题"
  246. } else {
  247. cs = 'du'
  248. vals = "多选题"
  249. }
  250. return '<a class="' + cs + '">' + vals + '</a>'
  251. console.log(val);
  252. }
  253. //左边移动
  254. $("#leftMove").click(function(){
  255. var ids = $.map($('#list').bootstrapTable('getSelections'),
  256. function (row) {
  257. return row.F_QuestionId;
  258. });
  259. console.log(ids);
  260. if ( ids.length <= 0) {
  261. layer.confirm('请选择一项移入!', {
  262. btn: ['确定']
  263. });
  264. return;
  265. }
  266. goRight();
  267. })
  268. //
  269. function goRight() {
  270. /*执行删除*/
  271. var ids = $.map($('#list').bootstrapTable('getSelections'),
  272. function(row) {
  273. return row.F_QuestionId;
  274. });
  275. $.ajax({
  276. type: 'POST',
  277. url: huayi.config.callcenter_url + "Questionnaire/AddPagerItems",
  278. data: {
  279. ids:ids,
  280. pid:wid,
  281. token: $.cookie("token")
  282. },
  283. dataType: 'JSON',
  284. success: function (data, textStatus, jqXHR) {
  285. $('#list').bootstrapTable('refresh');
  286. $('#lists').bootstrapTable('refresh');
  287. },
  288. error: function () {
  289. alert("error");
  290. }
  291. });
  292. }
  293. //右边移动
  294. function rightMove(){
  295. var changes = $.map($('#lists').bootstrapTable('getSelections'), function (row) {
  296. return row.F_ItemId;
  297. });
  298. if (changes.length <= 0) {
  299. layer.confirm('请选择一项移出!', {
  300. btn: ['确定']
  301. });
  302. return;
  303. } else {
  304. goLeft(changes)
  305. }
  306. }
  307. function goLeft(ids) {
  308. $.ajax({
  309. type: 'POST',
  310. url: huayi.config.callcenter_url + "Questionnaire/DelPagerItems",
  311. data: {
  312. ids: ids,
  313. token: $.cookie("token")
  314. },
  315. dataType: 'JSON',
  316. success: function (data, textStatus, jqXHR) {
  317. $('#list').bootstrapTable('refresh');
  318. $('#lists').bootstrapTable('refresh');
  319. },
  320. error: function () {
  321. alert("error");
  322. }
  323. });
  324. }
  325. </script>
  326. </body>
  327. </html>