JQ實現 選擇標籤後 新增節點,刪除節點 和 拼接post請求的data
阿新 • • 發佈:2018-12-29
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> overlay .page { -webkit-border-radius: 3px; -webkit-box-orient: vertical; -webkit-transition: 200ms -webkit-transform; background: black; box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); color: #333; display: -webkit-box; min-width: 400px; min-height: 100px; padding: 0 10px 5px 10px; position: relative; z-index: 0; } .tanchu_title { margin-top: 5px; height: 30px; line-height: 25px; font-size: 14px; font-weight: bold; } .overlay .page > .close-button { background-image: url(images/IDR_CLOSE_DIALOG); background-position: center; background-repeat: no-repeat; height: 14px; position: absolute; right: 7px; top: 7px; width: 14px; z-index: 1; } .order { width: 645px; border: 1px solid #cecece; border-radius: 5px; } .textacss { width: 200px; height: 70px; border: 1px solid red; vertical-align: middle; border-radius: 5px; } .orderfoot { margin-top: 15px; margin-bottom: 5px; text-align: center; } .login_username { font-size: 14px; width: 180px; height: 20px; line-height: 20px; color: #333; padding: 5px 6px; vertical-align: middle; outline: none; resize: none; } span { display: inline-block; } .lBtn { height: 30px; min-width: 80px; text-align: center; color: #a33300; font: 13px/40px "微軟雅黑E\8F6F\96C5\9ED1"; /*background: url(images/yellowBtn.png) no-repeat left top;*/ background-color: #FFC815; text-decoration: none; border: 0; cursor: pointer; background-size: 100% 300%; line-height: 30px; } .btn { background-image: -webkit-linear-gradient(#F0F0F0, #F0F0F0 38%, #E0E0E0); border-color: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95); color: #000; border: 1px solid #CCC; border-radius: 5px; padding: 6px; /* width: 80px; */ text-align: center; } .itemxuanzhong { background-image: none; background-color: #B6F0CF !important; } </style> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <div class="page" style="width:600px;height:470px;border:1px solid black;margin:0px auto;"> <h3 class="tanchu_title">新增標籤</h3> <div class="close-button" id="indent_zan_cun_guanbi1"></div> <div class="dialog_content" style="height:365px;padding:10px;"> <span>標籤名稱: <input id="label_name" class="login_username" style="background: right no-repeat; width:150px;"><br> <span style="margin-top:20px;"> <span style="margin-top: 7px;">參與工序:</span> <div id="participation_process" style="overflow-y:auto;width:450px;max-height:67px;float:right;"> </div> </span><br><br> <fieldset class="order" style="width: 430px;height:100px;margin-top:5px;margin-left:70px;overflow-y:auto;"> <input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="底漆" style="width:50px;margin-left:10px;margin-top:3px;"> <input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="雕刻" style="width:50px;margin-left:10px;margin-top:3px;"> <input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="批灰" style="width:50px;margin-left:10px;margin-top:3px;"> <input type="button" onclick="just_select(this);participation_process(this)" class="btn itemxuanzhong" value="貼紙" style="width:50px;margin-left:10px;margin-top:3px;"> <input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="面漆" style="width:50px;margin-left:10px;margin-top:3px;"> <input type="button" onclick="just_select(this);participation_process(this)" class="btn" value="包裝" style="width:50px;margin-left:10px;margin-top:3px;"> </fieldset> <span style="margin-left:28px;margin-top:20px;">備註: <textarea id="label_beizhu" name="" cols="" rows="" style="width:445px;border:1px solid #ccc;border-radius: 5px;" class="textacss"></textarea><br> </span></span></div> <div class="orderfoot" style=" margin-top:0px"> <input type="button" value="確 定" class="lBtn" style="margin-right:20px;" onclick="Validation_lable(this,'add')"> <input type="button" value="取 消" class="lBtn" style="margin-right:20px;" onclick="close_xianshi(this)"> </div> </div> </body> <script type="text/javascript"> //設定選中 function just_select(obj){ $(obj).addClass("itemxuanzhong").siblings().removeClass("itemxuanzhong"); } //選擇新增工序 function participation_process(obj){ var obj1=$(obj).clone(); $(obj1).addClass("itemxuanzhong"); $(obj1).removeAttr("onclick"); $("#participation_process").append("<div class='select_lable' style='width:60px;height:40px;vertical-align: top;position: relative;display:inline-block;'></div>"); $("#participation_process").children("div:last").append($(obj1)); $("#participation_process").children("div:last").append("<span style='color:red;cursor: pointer;position: absolute;top:-2px;right:0px;' onclick='del_owner_jiedian(this)'>x</span>"); } //刪除節點 function del_owner_jiedian(obj){ $(obj).parent().remove(); } //新增和修改效驗 function Validation_lable(tthis,flag){ var obj={}; var label_name=$("#label_name").val(); var label_beizhu=$("#label_beizhu").val(); if($.trim(label_name)!=0){ obj.label_name=label_name; } var str=[]; var select_label=$('#participation_process').find(".select_lable"); select_label.each(function(){ str.push($(this).find(".itemxuanzhong").val()); }) if(str.length!=0){ str=str.join(",") obj.select_label=str; } if($.trim(label_beizhu)!=0){ obj.label_beizhu=label_beizhu; } if(JSON.stringify(obj)=="{}"||$.trim(label_name)==0){ alert("請填寫標籤名稱"); return false; } if(flag=="add"){ confirm_new_add_lable(tthis,obj); }else{ confirm_edit_lable(tthis,obj); } } //確認新增標籤 function confirm_new_add_lable(tthis,obj){ $.ajax({url:'API', dataType:'json', type:'post', data:obj, success:function(data){ close_xianshi(tthis); } }) } //確認修改標籤 function confirm_edit_lable(tthis,obj){ $.ajax({url:'API', dataType:'json', type:'post', data:obj, success:function(data){ close_xianshi(tthis); } }) } </script> </html>