add_style.jsp 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <link rel="stylesheet" href="../demo/jquery-labelauty.css"><!-- 漂亮多选框 -->
  7. <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  8. <script src="js/jquery.filterizr.js"></script>
  9. <script src="../demo/jquery-labelauty.js"></script><!-- 漂亮多选框 -->
  10. <style>
  11. * { margin: 0; padding: 0;}
  12. .keyword { display: block; width: 250px; margin: 10px auto; padding: 5px; border: 1px solid #ccc;}
  13. .jq22 { width: 100%; margin: 0 auto; font-size: 0;}
  14. .jq2 { width: 100%; border:0px solid red; margin-bottom:30px;font-size: 0;}
  15. .filtr-item { display: inline-block; padding: 5px;}
  16. input.labelauty + label { font: 12px "Microsoft Yahei";}
  17. a{ color:red;}
  18. #ttt{
  19. display: none;
  20. visibility: hidden;
  21. }
  22. </style>
  23. <input type="hidden" id="uuid" name="id">
  24. <table class="editTable">
  25. <tr>
  26. <td class="label">款式名称:</td>
  27. <!--<td> <input type="text" name="style_name" data-toggle="topjui-textbox" data-options="validType:['checkMaterialP','length[0,20]'],required:true">-->
  28. <td> <input type="text" name="style_name" data-toggle="topjui-textbox" data-options="validType:['length[0,20]'],required:true">
  29. </td>
  30. </tr>
  31. <tr>
  32. <td class="label"></td>
  33. <td>
  34. <div id="ttt">
  35. <input type="text" id ="tid" name="style_t_id" data-toggle="topjui-textbox" data-options="onChange:function(newv,oldv){
  36. //alert(oldv+'--'+newv);
  37. nsss(newv);
  38. }"></div>
  39. </td>
  40. </tr>
  41. </table>
  42. <div id="jq22" class="jq22">
  43. </div>
  44. <div><a href="#" onclick="sou(1)">A</a>
  45. <div id="jq1" class="jq2">
  46. </div>
  47. </div>
  48. <div><a href="#" onclick="sou(2)">B</a>
  49. <div id="jq2" class="jq2">
  50. </div>
  51. </div>
  52. <div><a href="#" onclick="sou(3)">C</a>
  53. <div id="jq3" class="jq2">
  54. </div>
  55. </div>
  56. <div><a href="#" onclick="sou(4)">D</a>
  57. <div id="jq4" class="jq2">
  58. </div>
  59. </div>
  60. <div><a href="#" onclick="sou(5)">E</a>
  61. <div id="jq5" class="jq2">
  62. </div>
  63. </div>
  64. <script>
  65. function sou(a){
  66. if(a=='1'){
  67. if($("#jq1").css("display")=="block"){
  68. $("#jq1").slideUp();//隐藏
  69. }else{
  70. $("#jq1").slideDown();//显示
  71. }
  72. }
  73. if(a=='2'){
  74. if($("#jq2").css("display")=="block"){
  75. $("#jq2").slideUp();
  76. }else{
  77. $("#jq2").slideDown();
  78. }
  79. }
  80. if(a=='3'){
  81. if($("#jq3").css("display")=="block"){
  82. $("#jq3").slideUp();
  83. }else{
  84. $("#jq3").slideDown();
  85. }
  86. }
  87. if(a=='4'){
  88. if($("#jq4").css("display")=="block"){
  89. $("#jq4").slideUp();
  90. }else{
  91. $("#jq4").slideDown();
  92. }
  93. }
  94. if(a=='5'){
  95. if($("#jq5").css("display")=="block"){
  96. $("#jq5").slideUp();
  97. }else{
  98. $("#jq5").slideDown();
  99. }
  100. }
  101. }
  102. $(function(){
  103. $.ajax({
  104. url:"teList.action",
  105. type:"GET",
  106. data:{biao:1},
  107. success:function(data){
  108. var daima1="";
  109. var daima2="";
  110. var daima3="";
  111. var daima4="";
  112. var daima5="";
  113. for(var i=0;i<data.length;i++){
  114. var techmology = data[i];
  115. if(techmology.group_id=='1'){
  116. daima1+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"techmology_name\" type=\"checkbox\" name=\"t_id\" value=\""+techmology.id+"\" data-labelauty=\""+techmology.name+"\"></div>";
  117. }
  118. if(techmology.group_id=='2'){
  119. daima2+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"techmology_name\" type=\"checkbox\" name=\"t_id\" value=\""+techmology.id+"\" data-labelauty=\""+techmology.name+"\"></div>";
  120. }
  121. if(techmology.group_id=='3'){
  122. daima3+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"techmology_name\" type=\"checkbox\" name=\"t_id\" value=\""+techmology.id+"\" data-labelauty=\""+techmology.name+"\"></div>";
  123. }
  124. if(techmology.group_id=='4'){
  125. daima4+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"techmology_name\" type=\"checkbox\" name=\"t_id\" value=\""+techmology.id+"\" data-labelauty=\""+techmology.name+"\"></div>";
  126. }
  127. if(techmology.group_id=='5'){
  128. daima5+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"techmology_name\" type=\"checkbox\" name=\"t_id\" value=\""+techmology.id+"\" data-labelauty=\""+techmology.name+"\"></div>";
  129. }
  130. document.getElementById("jq1").innerHTML=daima1;
  131. document.getElementById("jq2").innerHTML=daima2;
  132. document.getElementById("jq3").innerHTML=daima3;
  133. document.getElementById("jq4").innerHTML=daima4;
  134. document.getElementById("jq5").innerHTML=daima5;
  135. }
  136. //document.getElementById("jq22").innerHTML=daima;
  137. $('.techmology_name').labelauty();
  138. $('.jq22').filterizr();
  139. $('.jq2').filterizr();
  140. }
  141. });
  142. });
  143. function nsss(newv){
  144. str = newv.replace(/\s*/g,"");
  145. var b = str.split(",");
  146. //console.info(b);
  147. var i = 0;
  148. if(b.length>0){
  149. $("input[name='t_id']").each(function(index) {
  150. //console.info("竟来了"+i);
  151. if($("input[name='t_id']").get(index).value==b[i]){
  152. $("input[name='t_id']").get(index).checked = true;
  153. i++;
  154. }
  155. if(i==b.length-1){
  156. return;
  157. }
  158. });
  159. }
  160. }
  161. </script>