class.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. {{template "inc"}}
  2. <!-- Main Header -->
  3. {{template "header"}}
  4. <!-- Left side column. 权限菜单 -->
  5. {{template "memu"}}
  6. <head>
  7. <style>
  8. #selectclear2 select {
  9. width:190px;
  10. height:167px;
  11. padding:5px;
  12. }
  13. #selectclear2{
  14. display: flex;
  15. flex-direction: row;
  16. }
  17. #selectclear2 .move{
  18. display: flex;
  19. flex-direction: column;
  20. margin: 20px 25px
  21. }
  22. #selectclear2 .move button{
  23. margin: 1px 0px;
  24. padding: 4px 6px;
  25. }
  26. #selectclear2 .doublebox {
  27. text-align:center;
  28. }
  29. </style>
  30. </head>
  31. <!-- Content Wrapper. Contains page content -->
  32. <div class="content-wrapper">
  33. <section class="content-header">
  34. <h1>
  35. <small><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-info" onclick="formReset()">新增分类抽取</button></small>
  36. </h1>
  37. <ol class="breadcrumb">
  38. <li><a href="/admin/infotype"><i class="fa fa-dashboard"></i> 分类抽取</a></li>
  39. </ol>
  40. </section>
  41. <!-- Main content -->
  42. <section class="content">
  43. <div class="row">
  44. <div class="col-xs-12">
  45. <div class="box">
  46. <div class="box-body">
  47. <table id="dataTable" class="table table-bordered table-hover">
  48. <thead>
  49. <tr>
  50. <th>一级分类</th>
  51. <th>二级分类</th>
  52. <th>操作</th>
  53. </tr>
  54. </thead>
  55. </table>
  56. </div>
  57. <!-- /.box-body -->
  58. </div>
  59. <!-- /.box -->
  60. </div>
  61. </div>
  62. </section>
  63. </div>
  64. <div class="modal fade" id="modal-info">
  65. <div class="modal-dialog">
  66. <form id="userform" class="form-horizontal" role="form">
  67. <div class="modal-content">
  68. <div class="modal-header">
  69. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  70. <span aria-hidden="true">&times;</span></button>
  71. <h4 class="modal-title">分类信息</h4>
  72. </div>
  73. <div class="modal-body">
  74. <div class="form-group">
  75. <label for="code" class="col-sm-2 control-label" style="width:20% !important;">一级分类名称:</label>
  76. <div class="col-sm-10" style="width:80% !important;">
  77. <select id="topclass" name="topclass" class="form-control" onclick="topfunc()">
  78. </select>
  79. </div>
  80. </div>
  81. <div class="form-group">
  82. <label for="code" class="col-sm-2 control-label" style="width:20% !important;">二级分类名称:</label>
  83. <div class="col-sm-10" style="width:80% !important;">
  84. <select id="subclass" name="subclass" class="form-control" >
  85. </select>
  86. </div>
  87. </div>
  88. <div class="form-group">
  89. <label for="code" class="col-sm-2 control-label" style="width:20% !important;">属性:</label>
  90. <div class="col-sm-10" id="selectclear2" style="width:75% !important;">
  91. <div class="doublebox">
  92. <select multiple="multiple" id="select3" style="overflow-x: scroll;"></select>
  93. </div>
  94. <div class="move" style="margin: 10px;">
  95. <button type="button" id="up2" class="btn btn-primary">上移</button>
  96. <button type="button" id="right2" class="btn btn-primary">右移</button>
  97. <button type="button" id="left2" class="btn btn-primary">左移</button>
  98. <button type="button" id="down2" class="btn btn-primary">下移</button>
  99. </div>
  100. <div class="doublebox">
  101. <select multiple="multiple" id="select4" style="overflow-x: scroll;"></select>
  102. </div>
  103. </div>
  104. </div>
  105. <!--<div class="form-group">
  106. <label for="modify" class="col-sm-2 control-label">二级菜单:</label>
  107. <div id="secondmenu" class="col-sm-10">
  108. <input type="button" value="+" onclick="append()"></input>
  109. </div>
  110. </div>-->
  111. </div>
  112. <div class="modal-footer">
  113. <button type="button" class="btn btn-default" data-dismiss="modal" onclick="formReset()">取消</button>
  114. <button type="button" class="btn btn-primary" onclick="save()">保存</button>
  115. </div>
  116. </div>
  117. <!-- /.modal-content -->
  118. </form>
  119. <input type="hidden" id="_id">
  120. </div>
  121. <!-- /.modal-dialog -->
  122. </div>
  123. <!-- /.modal -->
  124. <!-- footer -->
  125. {{template "footer"}}
  126. <script>
  127. menuActive("infotype")
  128. $(function () {
  129. ttable=$('#dataTable').DataTable({
  130. "paging" : true,
  131. "lengthChange": false,
  132. "searching" : true,
  133. "ordering" : true,
  134. "info" : true,
  135. "autoWidth" : false,
  136. "ajax": {
  137. "url": "/admin/infotype/data",
  138. "type": "post",
  139. "data":{}
  140. },
  141. "language": {
  142. "url": "/res/dist/js/dataTables.chinese.lang"
  143. },
  144. "columns": [
  145. { "data": "topclass",render:function(val,a,row){
  146. return row.topclass}},
  147. { "data": "subclass",render:function(val,a,row){
  148. return row.subclass}},
  149. {"data":"_id",render:function(val,a,row){
  150. return "<a href='#' onclick='edit(\""+val+"\",\""+row.subclass+"\")'><i class='fa fa-fw fa-edit text-yellow'></i></a> &nbsp;"+
  151. "<a href='#' onclick='del(\""+val+"\",\""+row.subclass+"\")'><i class='fa fa-fw fa-trash text-red'></i></a>"
  152. }}
  153. ]
  154. });
  155. //ttable.on('init.dt', function () {});
  156. })
  157. function save(){
  158. _id=$("#_id").val()
  159. topclass=$("#topclass").val()
  160. var clearArr = [];
  161. var clearArr2 = [];
  162. $("#select4 option").each(function(i,val){
  163. clearArr[i] = this.value
  164. })
  165. $("#select3 option").each(function(i,val){
  166. clearArr2[i] = this.value
  167. })
  168. var subclass=$("#subclass").val()
  169. var fields = JSON.stringify(clearArr)
  170. var fields2 = JSON.stringify(clearArr2)
  171. if(topclass == "" || clearArr.length==0){
  172. alert("表单填写不完整!");
  173. return false;
  174. }
  175. $.ajax({
  176. url:"/admin/infotype/save",
  177. type:"post",
  178. data:{"topclass":topclass,"subclass":subclass,"fields":fields,"fields2":fields2,"_id":_id},
  179. success:function(r){
  180. if(r.rep){
  181. $("#userform")[0].reset();
  182. $("#modal-info").modal("hide");
  183. ttable.ajax.reload();
  184. }else{
  185. alert("保存失败,可能是要添加的分类已存在");
  186. }
  187. }
  188. })
  189. }
  190. function del(_id,subclass){
  191. showConfirm("确定删除?", function() {
  192. $.ajax({
  193. url:"/admin/infotype/del",
  194. type:"post",
  195. data:{"_id":_id,"subclass":subclass},
  196. success:function(r){
  197. if(r.rep){
  198. ttable.ajax.reload();
  199. }else{
  200. showTip("删除失败", 1000, function() {});
  201. }
  202. }
  203. })
  204. });
  205. }
  206. function edit(_id,subclass){
  207. $("#topclass").empty()
  208. $("#subclass").empty()
  209. $("#select3").empty();
  210. $("#select4").empty();
  211. $("#_id").val(_id)
  212. console.log(_id,subclass)
  213. $.ajax({
  214. url:"/admin/infotype/select",
  215. type:"post",
  216. data:{"_id":_id,"subclass":subclass},
  217. success:function(r){
  218. console.log(r)
  219. if(r){
  220. $("#topclass").append("<option value="+r.topclass+">"+r.topclass+"</option>")
  221. $("#topclass").attr("disabled",true);
  222. $("#subclass").append("<option value="+r.subclass+">"+r.subclass+"</option>")
  223. $("#subclass").attr("disabled",true);
  224. for(var a=0;a<r.fields.length;a++){
  225. $("#select4").append("<option value='"+r.fields[a].s_field+"'>"+r.fields[a].s_name+"</option>");
  226. }
  227. for(var a=0;a<r.fields2.length;a++){
  228. $("#select3").append("<option value='"+r.fields2[a].s_field+"'>"+r.fields2[a].s_name+"</option>");
  229. }
  230. }
  231. }
  232. })
  233. $("#modal-info").modal("show");
  234. }
  235. function topfunc() {
  236. $("#subclass").empty()
  237. var top=$("#topclass").val()
  238. var topmap={"top":top}
  239. $.post("/admin/subclass/data",topmap,function (data,status) {
  240. if(data.length!=0){
  241. for(var a=0;a<data.data.subclass.length;a++) {
  242. $("#subclass").append("<option value="+data.data.subclass[a]+">"+data.data.subclass[a]+"</option>")
  243. }
  244. }
  245. })
  246. }
  247. function formReset(){
  248. $("#_id").val("")
  249. $("#topclass").empty()
  250. $("#topclass").attr("disabled",false);
  251. $("#subclass").empty()
  252. $("#subclass").attr("disabled",false);
  253. $("#select3").empty();
  254. $("#select4").empty();
  255. $.post("/admin/topclass/data",'',function (data,status) {
  256. $("#topclass").append("<option value=''>--请选择--</option>")
  257. for(var a=0;a<data.data.length;a++) {
  258. $("#topclass").append("<option value="+data.data[a].topclass+">"+data.data[a].topclass+"</option>")
  259. }
  260. })
  261. $.post("/admin/fields/data",'',function (data,status) {
  262. for(var a=0;a<data.data.length;a++) {
  263. $("#select3").append("<option value="+data.data[a].s_field+">"+data.data[a].s_name+"</option>")
  264. }
  265. })
  266. $("#modal-info-addclear").modal("show");
  267. }
  268. $("#selectclear2 #right2").click(function(){
  269. $("#select3 option:selected").appendTo("#select4");
  270. });
  271. //左移
  272. $("#selectclear2 #left2").click(function(){
  273. $("#select4 option:selected").appendTo("#select3");
  274. });
  275. $("#selectclear2 #up2,#selectclear2 #down2").click(function() {
  276. var $opt = $("#select4 option:selected:first");
  277. if (!$opt.length){
  278. return;
  279. }
  280. if (this.id == "up2"){
  281. $opt.prev().before($opt);
  282. }else{
  283. $opt.next().after($opt);
  284. }
  285. });
  286. //双击右移
  287. $("#selectclear2 #select3").dblclick(function(){
  288. $("#selectclear2 #select3 option:selected").appendTo("#select4");
  289. });
  290. //双击左移
  291. $("#selectclear2 #select4").dblclick(function(){
  292. $("#selectclear2 #select4 option:selected").appendTo("#select3");
  293. });
  294. </script>