classid.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. {Template header}
  2. <style type="text/css">
  3. .tjtop {width:100%;line-height:50px;text-align: center;}.tjtop font {width:200px;line-height:50px;text-align: center;color:#2084db;border: 2px solid #2084db;margin-top:10px;border-radius:10px;font-size: 16px;cursor: pointer;display: inline-block;}
  4. .coursedata{min-width: 900px;width: 94%;max-width: 1024px;font-size: 14px;margin: 0px auto;padding-top:50px} .coursedata ul {width:100%;}.coursedata li{line-height:40px;padding-top:0px;padding-bottom:3px;position: relative;float:none;width:100%;}.coursedata .flg{padding-left:30px;}.coursedata .edit {width:100%;line-height:40px;border-left: 1px dashed #ccc;border-bottom: 1px dashed #ccc;padding-left:20px;cursor: pointer;display: inline-block;}.coursedata .edit:hover{background-color: #ECECEC;}.coursedata .edit i {padding-right:8px;}.coursedata .del{margin-top:6px;display: inline-block;width:70px;line-height:26px;text-align: center;border: 1px solid #ccc;border-radius: 5px;font-size: 12px;color:#555;margin-right:2px;position: absolute;top:0px;right:1%;cursor: pointer;}.coursedata .del:hover{border: 1px solid #000;color:#000}.coursedata .span {padding-right:5px;position: relative;left: 0;top: 2px;}.coursedata .generatetree {padding-left: 25px;background-image: url(../img/line.gif);background-repeat: no-repeat;background-position: 0px 0px;}.coursedata ul li {width:calc(100% - 28px);margin-left:28px;}.coursedata label{width: auto;line-height:40px;padding-left: 30px;margin-left: 10px;}.coursedata li ul label{background-image: url(../img/line.gif);background-repeat: no-repeat;background-position: 10px 0px;}.coursesee{min-width: 900px;width: 94%;max-width: 1024px;font-size: 14px;margin: 0px auto;padding: 50px 0px 10px;}.coursesee li{padding-left: 28px;line-height:40px;padding-top:0px;padding-bottom:3px;position: relative;float:none;width:98%;}.coursesee li ul{display: none;}.coursesee li strong{font-size: 20px;font-weight: bold;padding-right:8px;color:#333}.coursesee li div {cursor: pointer;}.coursesee li ul div {padding-left:25px;background-image: url(../img/line.gif);background-repeat: no-repeat;background-position: 0px 12px;}.coursesee li i{padding-right:10px;}.fds {position: absolute;left: -110px;top: 15px;}.fdx {position: absolute;left: -30px;top: 15px;}.fdgd {position: absolute;left: -30px;top: 15px;}
  5. </style>
  6. <body>
  7. <div class="warp">
  8. <div class="tjtop" style="height:80px;">
  9. <div style="width:100%;height:80px;background-color: #f5f5f5;position: fixed;z-index: 1;">
  10. <font class="courseadd window" data-h="/classid/add/" data-t="添 加">添 加</font>
  11. </div></div>
  12. <div class="coursedata" style="padding-top:0px;"></div>
  13. <div style="clear:both;"></div>
  14. </div>
  15. <script>var dataurl = "/classid";
  16. $(document).ready(function () {
  17. loadidcourse();
  18. });
  19. $(".coursedata").on('click',".del",function() {
  20. $(".express p:eq(0)").html("是否删除 "+$(this).data("t")+" ?");
  21. $(".express p:eq(1)").html("<font class='coursedel' data-d='"+$(this).data("d")+"'>确 定</font><font class='esc'>取 消</font>");
  22. $(".express").show();
  23. });
  24. function loadidcourse() {
  25. $(".coursedata").html("");
  26. layx.load('loadId','数据加载中');
  27. $.ajax({
  28. url: "/classid/rows",
  29. data: "rows=1",
  30. type: "POST",
  31. dataType: "json",
  32. success: function(c)
  33. {
  34. layx.destroy('loadId');
  35. if(c.data.length > 0)
  36. {
  37. var showlist = $("<ul class='td'></ul>");
  38. showall(c.data, showlist);
  39. $(".coursedata").append(showlist);
  40. /** 拖动开始 **/
  41. $( ".coursedata .td" ).sortable({
  42. update: function (event, ui) {
  43. px();
  44. }
  45. })
  46. /** 拖动结束 **/
  47. }
  48. else
  49. {
  50. $(".coursedata").html("<div style='font-size: 22px;text-align: center;color:#555;padding-top:10%;'>没有内容,请先添加</div>");
  51. }
  52. }
  53. });
  54. }
  55. function showall(menu_list, parent) {
  56. for (var menu in menu_list) {
  57. var t = '';var c = '';var kc = '';
  58. if(menu_list[menu].pp == 1)
  59. {
  60. var kc = '(SKU匹配 ID:'+menu_list[menu].id+') - ';
  61. }
  62. var data = '<div class="edit window" data-h="/classid/edit/'+menu_list[menu].id+'" data-t="修改" id="'+menu_list[menu].id+'"><font>'+kc+' '+menu_list[menu].title+'</font></div><font class="del" data-t="'+menu_list[menu].title+'" data-d="'+menu_list[menu].id+'">删除</font>';
  63. //如果有子节点,则遍历该子节点
  64. t = "<i class='fa fa-chevron-up fds'></i><i class='fa fa-chevron-down fdx'></i>";
  65. c = "class='sx'";
  66. //创建一个子节点li
  67. var li = $("<li id='"+menu_list[menu].id+"' "+c+" data-id='"+menu_list[menu].id+"'></li>");
  68. //将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
  69. $(li).append(data).append("<ul></ul>").appendTo(parent);
  70. //将空白的ul作为下一个递归遍历的父亲节点传入
  71. showall(menu_list[menu].children, $(li).children("ul").eq(0));
  72. //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
  73. }
  74. }
  75. $(".coursedata").on('click',"li .fa-chevron-up",function() {
  76. var parentsDiv = $(this).parents(".coursedata ul li");
  77. var prev = parentsDiv.prev();
  78. if(prev.html()!=undefined){
  79. prev.before(parentsDiv);
  80. }
  81. px();
  82. });
  83. $(".coursedata").on('click',"li .fa-chevron-down",function() {
  84. var parentsDiv = $(this).parents(".coursedata ul li");
  85. var prev = parentsDiv.next();
  86. if(prev.html()!=undefined){
  87. prev.after(parentsDiv);
  88. }
  89. px();
  90. });
  91. function px()
  92. {
  93. var f = '';
  94. $(".sx").each(function() {
  95. f = f + $(this).data("id") + "|";
  96. });
  97. $.ajax({
  98. url: "/classid/px",
  99. data: "data="+f,
  100. type: "POST",
  101. dataType: "json",
  102. success: function(c)
  103. {
  104. if (c && c.success) {
  105. } else {
  106. $(".ts p").html(c.msg);
  107. $(".ts").show();
  108. setTimeout('$(".ts").fadeOut()', 1000);
  109. }
  110. }
  111. });
  112. }
  113. </script>
  114. {Template footer}