PingAnYeXianSZCG_Web 前端代码

addSetting.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  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;margin-top: 28px;">
  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 style="text-align: center; margin-top: 50px;">
  105. <button class="btns add size-14">保存</button>
  106. </div>
  107. </div>
  108. </div>
  109. <script>
  110. var wid = helper.request.queryString("Str");
  111. console.log(wid);
  112. var $tableLeft = $('#list');
  113. var $tableLeft1 = $('#lists');
  114. $(document).ready(function() {
  115. List();
  116. Right();
  117. //搜索
  118. $(".searchGo").click(function() {
  119. List();
  120. })
  121. Select();
  122. //列表
  123. function Select() {
  124. $.ajax({
  125. type: "get",
  126. url: huayi.config.callcenter_url + "Questionnaire/GetQCategoryAlllist",
  127. dataType: 'json',
  128. async: true,
  129. data: {
  130. token: $.cookie("token")
  131. },
  132. success: function(data) {
  133. /*验证请求*/
  134. if(data.state == "success") {
  135. var html = ''
  136. for(var i = 0; i < data.data.length; i++) {
  137. html += '<option value="' + data.data[i].F_CategoryId + '">' + data.data[i].F_CategoryName + '</option>'
  138. }
  139. $(html).appendTo("#Select");
  140. }
  141. }
  142. });
  143. }
  144. });
  145. function List() {
  146. //销毁表格
  147. $tableLeft.bootstrapTable('destroy');
  148. // 初始化表格,动态从服务器加载数据
  149. $tableLeft.bootstrapTable({
  150. method: "get", //使用get请求到服务器获取数据
  151. url: huayi.config.callcenter_url + "Questionnaire/GetQuestionNotItemsList",
  152. striped: true, //表格显示条纹
  153. pagination: true, //启动分页
  154. pageSize: 5, //每页显示的记录数
  155. pageNumber: 1, //当前第几页
  156. pageList: [5, 20, 50, 100], //记录数可选列表
  157. search: false, //是否启用查询
  158. showColumns: false, //显示下拉框勾选要显示的列
  159. showRefresh: false, //显示刷新按钮
  160. sidePagination: "server", //表示服务端请求
  161. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  162. //设置为limit可以获取limit, offset, search, sort, order
  163. queryParamsType: "undefined",
  164. queryParams: function queryParams(params) { //设置查询参数
  165. var param = {
  166. PagerId:wid,
  167. PageIndex: params.pageNumber,
  168. PageSize: params.pageSize,
  169. token: $.cookie("token"),
  170. Key: $("#KeyWords").val()
  171. };
  172. return param;
  173. },
  174. onLoadSuccess: function() { //加载成功时执行
  175. // layer.msg("加载成功");
  176. },
  177. onLoadError: function() { //加载失败时执行
  178. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  179. }
  180. });
  181. }
  182. function Right(){
  183. $tableLeft1.bootstrapTable('destroy');
  184. // 初始化表格,动态从服务器加载数据
  185. $tableLeft1.bootstrapTable({
  186. method: "get", //使用get请求到服务器获取数据
  187. url: huayi.config.callcenter_url + "Questionnaire/GetQuestionPageList",
  188. striped: true, //表格显示条纹
  189. pagination: true, //启动分页
  190. pageSize: 5, //每页显示的记录数
  191. pageNumber: 1, //当前第几页
  192. pageList: [5, 20, 50, 100], //记录数可选列表
  193. search: false, //是否启用查询
  194. showColumns: false, //显示下拉框勾选要显示的列
  195. showRefresh: false, //显示刷新按钮
  196. sidePagination: "server", //表示服务端请求
  197. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  198. //设置为limit可以获取limit, offset, search, sort, order
  199. queryParamsType: "undefined",
  200. queryParams: function queryParams(params) { //设置查询参数
  201. var param = {
  202. PagerId:wid,
  203. PageIndex: params.pageNumber,
  204. PageSize: params.pageSize,
  205. token: $.cookie("token"),
  206. };
  207. return param;
  208. },
  209. onLoadSuccess: function() { //加载成功时执行
  210. // layer.msg("加载成功");
  211. },
  212. onLoadError: function() { //加载失败时执行
  213. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  214. }
  215. });
  216. }
  217. //序号
  218. function setCode(value, row, index) {
  219. return index + 1;
  220. }
  221. //修改
  222. function Check(value, row, index) {
  223. return '<a title="点击移入" class="username">' + value + '</a>'
  224. }
  225. function Content(val) {
  226. if(val) {
  227. var str = '<div '
  228. if(val.length > 10) {
  229. str = str + ' title="' + val + '" ';
  230. val = val.substr(0, 10) + "...";
  231. }
  232. return str + '>' + val + '</div>';
  233. } else {
  234. return '';
  235. }
  236. }
  237. //分类
  238. function Type(val) {
  239. var cs = '';
  240. var vals = '';
  241. if(val == 1) {
  242. cs = 'w';
  243. vals = "问答题"
  244. } else if(val == 2) {
  245. cs = 'd';
  246. vals = "单选题"
  247. } else {
  248. cs = 'du'
  249. vals = "多选题"
  250. }
  251. return '<a class="' + cs + '">' + vals + '</a>'
  252. console.log(val);
  253. }
  254. //左边移动
  255. $("#leftMove").click(function(){
  256. var ids = $.map($('#list').bootstrapTable('getSelections'),
  257. function (row) {
  258. return row.F_QuestionId;
  259. });
  260. console.log(ids);
  261. if ( ids.length <= 0) {
  262. layer.confirm('请选择一项移入!', {
  263. btn: ['确定']
  264. });
  265. return;
  266. }
  267. goRight();
  268. })
  269. //
  270. function goRight() {
  271. /*执行删除*/
  272. var ids = $.map($('#list').bootstrapTable('getSelections'),
  273. function(row) {
  274. return row.F_QuestionId;
  275. });
  276. $.ajax({
  277. type: 'POST',
  278. url: huayi.config.callcenter_url + "Questionnaire/AddPagerItems",
  279. data: {
  280. ids:ids,
  281. pid:wid,
  282. token: $.cookie("token")
  283. },
  284. dataType: 'JSON',
  285. success: function (data, textStatus, jqXHR) {
  286. $('#list').bootstrapTable('refresh');
  287. $('#lists').bootstrapTable('refresh');
  288. },
  289. error: function () {
  290. alert("error");
  291. }
  292. });
  293. }
  294. //右边移动
  295. function rightMove(){
  296. var changes = $.map($('#lists').bootstrapTable('getSelections'), function (row) {
  297. return row.F_ItemId;
  298. });
  299. if (changes.length <= 0) {
  300. layer.confirm('请选择一项移出!', {
  301. btn: ['确定']
  302. });
  303. return;
  304. } else {
  305. goLeft(changes)
  306. }
  307. }
  308. function goLeft(ids) {
  309. $.ajax({
  310. type: 'POST',
  311. url: huayi.config.callcenter_url + "Questionnaire/DelPagerItems",
  312. data: {
  313. ids: ids,
  314. token: $.cookie("token")
  315. },
  316. dataType: 'JSON',
  317. success: function (data, textStatus, jqXHR) {
  318. $('#list').bootstrapTable('refresh');
  319. $('#lists').bootstrapTable('refresh');
  320. },
  321. error: function () {
  322. alert("error");
  323. }
  324. });
  325. }
  326. </script>
  327. </body>
  328. </html>