ZZDianXin_UI - 郑州电信 演示

addSetting.html 9.9KB

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