ZZDianXin_UI - 郑州电信 演示

addCheck.html 8.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  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 rel="stylesheet" href="bootstrap-editable.css" />
  9. <link href="../css/init.css" rel="stylesheet" />
  10. <link rel="stylesheet" href="../css/Quality/bootstrap-editable.css" />
  11. <script src="bootstrap-editable.js"></script>
  12. <title></title>
  13. <style>
  14. .Content {
  15. padding: 10px;
  16. }
  17. .Btn_box {
  18. margin-top: 20px;
  19. color: #fff;
  20. }
  21. .inpBox select {
  22. width: 150px;
  23. padding: 3px 6px;
  24. }
  25. .F_Remark {
  26. width: 100%;
  27. }
  28. .tab {
  29. border-bottom: 1px solid #ccc;
  30. }
  31. .rightAdd {
  32. margin-bottom: 20px;
  33. background: #1ab394;
  34. color: #fff;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div>
  40. <div class="Content">
  41. <div class="Check_box">
  42. <button class="rightAdd btn size-14"><i class="fa fa-plus size-14"></i>增加</button>
  43. <table id="tbr" style="width: 100%;">
  44. <thead>
  45. <tr>
  46. <th data-align="center" data-field="id" data-formatter="setCode">序号</th>
  47. <th data-align="center" data-field="F_ItemName" data-formatter="Check">选项</th>
  48. <th data-align="center" data-field="F_ItemId" data-formatter="Removes">操作</th>
  49. </tr>
  50. </thead>
  51. <tbody>
  52. </tbody>
  53. </table>
  54. </div>
  55. </div>
  56. </div>
  57. <script>
  58. var wid = helper.request.queryString("Str");
  59. console.log(wid);
  60. $(document).ready(function() {
  61. if(wid) {
  62. var $tableLeft = $('#tbr');
  63. //销毁表格
  64. $tableLeft.bootstrapTable('destroy');
  65. // 初始化表格,动态从服务器加载数据
  66. $tableLeft.bootstrapTable({
  67. method: "get", //使用get请求到服务器获取数据
  68. url: huayi.config.callcenter_url + "Questionnaire/GetQuestionItemList",
  69. // url: "//117.158.196.116:8878/IndexBase/GetList",
  70. striped: true, //表格显示条纹
  71. pagination: true, //启动分页
  72. pageSize: 5, //每页显示的记录数
  73. pageNumber: 1, //当前第几页
  74. pageList: [5, 10, 50, 100], //记录数可选列表
  75. contentType: 'application/x-www-form-urlencoded',
  76. search: false, //是否启用查询
  77. showColumns: false, //显示下拉框勾选要显示的列
  78. showRefresh: false, //显示刷新按钮
  79. sidePagination: "server", //表示服务端请求
  80. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  81. //设置为limit可以获取limit, offset, search, sort, order
  82. queryParamsType: "undefined",
  83. queryParams: function queryParams(params) { //设置查询参数
  84. var param = {
  85. pageindex: params.pageNumber,
  86. pagesize: params.pageSize,
  87. id: wid,
  88. token: $.cookie("token"),
  89. };
  90. return param;
  91. },
  92. onLoadSuccess: function() { //加载成功时执行
  93. // layer.msg("加载成功");
  94. $("#tbr a.username").editable({
  95. url: function(params) {
  96. var id = $(this).attr("id");
  97. var QuestionId = $(this).attr("index");
  98. console.log(params.value);
  99. $.ajax({
  100. type: 'POST',
  101. url: huayi.config.callcenter_url + "Questionnaire/CreateOrUpdateQuestionItem",
  102. data: {
  103. Id: id,
  104. name: params.value,
  105. QuestionId: QuestionId,
  106. token: $.cookie("token")
  107. },
  108. dataType: 'JSON',
  109. success: function(data) {
  110. if(data.state.toLowerCase() == 'success') {
  111. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  112. // parent.layer.close(index); //再执行关闭
  113. parent.Finish();
  114. parent.layer.msg("保存成功");
  115. }
  116. },
  117. error: function() {
  118. alert("error");
  119. }
  120. });
  121. },
  122. type: 'text'
  123. });
  124. },
  125. onLoadError: function() { //加载失败时执行
  126. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  127. }
  128. });
  129. //添加行
  130. $(".rightAdd ").click(function() {
  131. var index = $tableLeft.bootstrapTable('getData').length;
  132. $.ajax({
  133. type: 'POST',
  134. url: huayi.config.callcenter_url + "Questionnaire/CreateOrUpdateQuestionItem",
  135. data: {
  136. QuestionId: wid,
  137. token: $.cookie("token")
  138. },
  139. dataType: 'JSON',
  140. success: function(data) {
  141. if(data.state.toLowerCase() == 'success') {
  142. console.log(data.data);
  143. $tableLeft.bootstrapTable('insertRow', {
  144. index: -1,
  145. row: {
  146. }
  147. });
  148. $tableLeft.bootstrapTable('refresh');
  149. }
  150. },
  151. error: function() {
  152. alert("error");
  153. }
  154. });
  155. });
  156. }
  157. //列表
  158. });
  159. //序号
  160. function setCode(value, row, index) {
  161. return index + 1;
  162. }
  163. //修改
  164. function Check(value, row, index) {
  165. return '<a title="点击移入" class="username" id="' + row.F_ItemId + '" index="' + row.F_QuestionId + '">' + value + '</a>'
  166. }
  167. //操作
  168. function Removes(value, row, index) {
  169. return '<div><a onclick="Remove(' + value + ')" ><i class="fa fa-remove size-14"></i></a></div>'
  170. }
  171. ;
  172. //删除
  173. function Remove(val) {
  174. layer.confirm('确定删除当前选项?', {
  175. btn: ['是', '否'] //按钮
  176. }, function(index) {
  177. $.ajax({
  178. type: 'POST',
  179. url: huayi.config.callcenter_url + "Questionnaire/DeleteQuestionItme",
  180. data: {
  181. id: val,
  182. token: $.cookie("token")
  183. },
  184. dataType: 'JSON',
  185. success: function(data) {
  186. if(data.state.toLowerCase() == 'success') {
  187. // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  188. // layer.close(index); //再执行关闭
  189. parent.Finish();
  190. parent.layer.msg("删除成功");
  191. initTable();
  192. layer.close(index);
  193. }
  194. },
  195. error: function() {
  196. alert("error");
  197. }
  198. });
  199. });
  200. }
  201. function initTable() {
  202. var $tableLeft = $('#tbr');
  203. //销毁表格
  204. $tableLeft.bootstrapTable('destroy');
  205. // 初始化表格,动态从服务器加载数据
  206. $tableLeft.bootstrapTable({
  207. method: "get", //使用get请求到服务器获取数据
  208. url: huayi.config.callcenter_url + "Questionnaire/GetQuestionItemList",
  209. // url: "//117.158.196.116:8878/IndexBase/GetList",
  210. striped: true, //表格显示条纹
  211. pagination: true, //启动分页
  212. pageSize: 5, //每页显示的记录数
  213. pageNumber: 1, //当前第几页
  214. pageList: [5, 10, 50, 100], //记录数可选列表
  215. contentType: 'application/x-www-form-urlencoded',
  216. search: false, //是否启用查询
  217. showColumns: false, //显示下拉框勾选要显示的列
  218. showRefresh: false, //显示刷新按钮
  219. sidePagination: "server", //表示服务端请求
  220. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  221. //设置为limit可以获取limit, offset, search, sort, order
  222. queryParamsType: "undefined",
  223. queryParams: function queryParams(params) { //设置查询参数
  224. var param = {
  225. pageindex: params.pageNumber,
  226. pagesize: params.pageSize,
  227. id: wid,
  228. token: $.cookie("token"),
  229. };
  230. return param;
  231. },
  232. onLoadSuccess: function() { //加载成功时执行
  233. // layer.msg("加载成功");
  234. $("#tbr a.username").editable({
  235. url: function(params) {
  236. var id = $(this).attr("id");
  237. var QuestionId = $(this).attr("index");
  238. console.log(params.value);
  239. $.ajax({
  240. type: 'POST',
  241. url: huayi.config.callcenter_url + "Questionnaire/CreateOrUpdateQuestionItem",
  242. data: {
  243. Id: id,
  244. name: params.value,
  245. QuestionId: QuestionId,
  246. token: $.cookie("token")
  247. },
  248. dataType: 'JSON',
  249. success: function(data) {
  250. if(data.state.toLowerCase() == 'success') {
  251. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  252. // parent.layer.close(index); //再执行关闭
  253. parent.Finish();
  254. parent.layer.msg("保存成功");
  255. }
  256. },
  257. error: function() {
  258. alert("error");
  259. }
  260. });
  261. },
  262. type: 'text'
  263. });
  264. },
  265. onLoadError: function() { //加载失败时执行
  266. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  267. }
  268. });
  269. }
  270. </script>
  271. </body>
  272. </html>