<!-- 展示分類與搜索標簽組件使用說明：   1.新增時父頁面調用方法：頁面加載時調用 goodsClassifyAndSearchTag.getFirstLevelClassify();/** 初始化一級展示分類 **/   2.編輯時父頁面調用方法：頁面加載時調用 goodsClassifyAndSearchTag.getClassifyAndSearchTag(String classifys);     ShowClassifyList類型json串，可參考 /js/standard_v2/group/group_edit.js 該方法 groupGoodsObj.getEditClassify();   3.返回頁面選中的展示分類和搜索標簽，調用 goodsClassifyAndSearchTag.returnSelectedClassifyAndTag();   注意事項：可能會出現js沖突問題，父頁面的js最好在文件頂部加載 --> <!--展示分類--> <div class="row form-horizontal">   <div class="col-md-12">     <div class="form-group">       <label class="col-md-1 control-label pr0">展示分類</label>       <div class="col-md-1">         <select class="form-control" id="first_classify" onchange="goodsClassifyAndSearchTag.getSecondClassify(this)">           <option value="0">請選擇</option>         </select>       </div>       <div class="col-md-1">         <select class="form-control" id="second_classify" onchange="goodsClassifyAndSearchTag.getThirdClassify(this)">           <option value="0">請選擇</option>         </select>       </div>       <div class="col-md-1">         <select class="form-control" id="third_classify" onchange="goodsClassifyAndSearchTag.getSearchTag(this)">           <option value="0">請選擇</option>         </select>       </div>     </div>   </div> </div> <!--搜索標簽--> <div class="row mb15">   <div class="col-md-12">     <h2><small>搜索標簽：</small></h2>   </div> </div> <div class="row form-horizontal" id="classify_template">   <div class="col-md-12" name="tag_original">     <div name="selectTagDom" id="selectTagDom"></div>     <div name="commonTagDom" id="commonTagDom"></div>   </div> </div> <!-- 展示分類模板 --> <script id="classifyTemplate" type="text/x-jsrender">   <option value="{{:id}}">{{:classilyName}}</option> </script> <!-- 普通標簽模板 --> <script id="commonTagTemplate" type="text/x-jsrender">   <div class="form-group">     <label class="col-md-1 control-label pr0">{{:optionName}}</label>     <div class="col-md-9">       {{for optionValues}}         <label class="checkbox-inline">           {{if checked==true}}             <input type="checkbox" checked name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}'>           {{else}}             <input type="checkbox" name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}'/>           {{/if}}           <span>{{: #data.value}}</span>         </label>       {{/for}}     </div>   </div> </script> <!-- 級聯標簽模板 --> <script id="selectTagTemplate" type="text/x-jsrender">   <div class="form-group" id='label_{{:optionId}}' valueid='{{:valueId}}'>     <label class="col-md-1 control-label pr0">{{:optionName}}</label>     <div class="col-md-9">       {{for optionValues}}         <label class="checkbox-inline">           {{if checked==true}}             <input type="checkbox" checked name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}' onclick='goodsClassifyAndSearchTag.getChildSelectOption({{: #data.optionId}}, {{: #data.id}}, this)'>           {{else}}             <input type="checkbox" name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}' onclick='goodsClassifyAndSearchTag.getChildSelectOption({{: #data.optionId}}, {{: #data.id}}, this)'/>           {{/if}}           <span>{{: #data.value}}</span>         </label>       {{/for}}     </div>   </div> </script> <!-- 級聯子標簽模板 --> <script id="childOptionTemplate" type="text/x-jsrender">   <div class="form-group" name='label_{{:optionId}}' valueId='{{:valueId}}'>     <lable class="col-md-1 control-label pr0">{{:optionName}}</lable>     <div class="col-md-9">       {{for optionValues}}         <label class="checkbox-inline">           <input type="checkbox" name='{{:#parent.parent.data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}' onclick='goodsClassifyAndSearchTag.getChildSelectOption({{: #data.optionId}}, {{: #data.id}}, this)'/>           <span>{{: #data.value}}</span>         </label>       {{/for}}     </div>   </div> </script> <!--展示分類和搜索標簽相關處理js代碼開始--> <script>    /**    * 展示分類和搜索標簽對象    * @type {{index: {index: number}, getEditClassify: goodsClassifyAndSearchTag."getEditClassify"}}    */   var goodsClassifyAndSearchTag = {     "index": 1,     "getFirstLevelClassify": function () { /** 獲取一級展示類目,新增時父頁面調用入口 **/     var url = '/showClassify/getClassifyByPid?pid=' + 0;       var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};       commonJS.loading("open");       commonJS.sendAjaxRequest(ajaxObj, function (value) {         $("#first_classify").append($("#classifyTemplate").render(value));       });       commonJS.loading("close");     },     "getSecondClassify": function (e) { /** 獲取二級展示類型 **/     $("#second_classify").html("<option value='0'>請選擇</option>");       $("#third_classify").html("<option value='0'>請選擇</option>");       $("#commonTagDom").html("");       $("#selectTagDom").html("");       if($(e).val() == 0){         return;       }       var url = '/showClassify/getClassifyByPid?pid=' + $(e).val();       var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};       commonJS.loading("open");       commonJS.sendAjaxRequest(ajaxObj, function (value) {         $("#second_classify").append($("#classifyTemplate").render(value));       });       commonJS.loading("close");       goodsClassifyAndSearchTag.getSearchTag(e);     },     "getThirdClassify": function (e) {       $("#third_classify").html("<option value='0'>請選擇</option>");       $("#commonTagDom").html("");       $("#selectTagDom").html("");       if($(e).val() == 0){         return;       }       var url = '/showClassify/getClassifyByPid?pid=' + $(e).val();       var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};       commonJS.loading("open");       commonJS.sendAjaxRequest(ajaxObj, function (value) {         $("#third_classify").append($("#classifyTemplate").render(value));       });       commonJS.loading("close");       goodsClassifyAndSearchTag.getSearchTag(e);     },     "getSearchTag": function (e) {       $("#commonTagDom").html("");       $("#selectTagDom").html("");       var classifyId = $(e).val();       if(0 == classifyId){         return;       }       goodsClassifyAndSearchTag.getClassifyCommonSearchOption(e);       goodsClassifyAndSearchTag.getClassifySelectedSearchOption(e);     },     "getClassifyCommonSearchOption": function (e) { /** 查詢當前分類的所有普通標簽 **/     var classifyId = $(e).val();       var url = '/searchTag/getCommonOptionByClassifyId?classifyId=' + classifyId;       var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};       commonJS.loading("open");       commonJS.sendAjaxRequest(ajaxObj, function (value) {          $("div[name='commonTagDom']").html($("#commonTagTemplate").render(value));         var commonRadios = $("div[name='commonTagDom']").find("input[type='checkbox']");         $.each(commonRadios, function (n, commonRadio) {           var newName = goodsClassifyAndSearchTag.index + "_" + $(commonRadio).attr("name");           $(commonRadio).attr("name", newName);         });       });       commonJS.loading("close");     },     "getClassifySelectedSearchOption": function (e) { /** 查詢當前分類的所有一級級聯搜索標簽 **/     var classifyId = $(e).val();       var url = '/searchTag/getSelectedOptionByClassifyId?classifyId=' + classifyId + "&pid=0";       var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};       commonJS.loading("open");       commonJS.sendAjaxRequest(ajaxObj, function (value) {         $("div[name='selectTagDom']").html($("#childOptionTemplate").render(value));         var selectRadios = $("div[name='selectTagDom']").find("input[type='checkbox']");         $.each(selectRadios, function (n, selectRadio) {           var newName = goodsClassifyAndSearchTag.index + "_" + $(selectRadio).attr("name");           $(selectRadio).attr("name", newName);         });        });       commonJS.loading("close");     },     "getChildSelectOption": function (parentOptionId, valueId, e) { /** 根據標簽值id獲取下級標簽 **/     var url = '/searchTag/getChildSelectedOptionByValueId?valueId=' + valueId;       var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};       commonJS.loading("open");       commonJS.sendAjaxRequest(ajaxObj, function (value) {         if(value==null||value.length==0){           return;         }         var parent = $($(e).parents().parents()[1]);         if(e.checked){           value[0]['valueId']=valueId;           var childHtml = $("#childOptionTemplate").render(value);           parent.after(childHtml);         }else{           // 先刪除所有后面的兄弟節點           var divs=parent.nextAll('div');           goodsClassifyAndSearchTag.deleteOptionDiv(divs,valueId);         }       });       commonJS.loading("close");     },     "deleteOptionDiv":function(divs,valueId){       $.each(divs,function(key,obj){         if($(obj).attr("valueid")==valueId){           var inputs=$(obj).find('input');           $.each(inputs,function(key1,obj1){             if(obj1.checked){               goodsClassifyAndSearchTag.deleteOptionDiv(divs,$(obj1).attr('valueid'));             }           });           $(obj).remove();         }       });     },     "getClassifyAndSearchTag": function (showClassifys) {//編輯時回寫搜索標簽，父頁面調用入口       var url = "/standardGroupV2/getClassifyAndSearchTag";       var param = {};       param["showClassifyList"] = showClassifys.showClassifyList;       var ajaxObj = {url: configJS.hostUrl() + url, async: true, param: {"showClassifys": JSON.stringify(param)}, method: "POST"};       commonJS.loading("open");       commonJS.sendAjaxRequest(ajaxObj, function (value) {         $.each(value, function (n, obj) {           var html = $($("#classify_template").html());            var firstLevelHtml = '';           var secondLevelHtml = '';           var thirdLevelHtml = '';            $.each(obj.showClassifyJsons, function (n, val) {             if(val.level == 1){               if(val.checked == true){                 firstLevelHtml += "<option selected value='"+val.id+"'>"+val.classilyName+"</option>";               }else{                 firstLevelHtml += "<option value='"+val.id+"'>"+val.classilyName+"</option>";               }              }else if(val.level == 2){               if(val.checked == true){                 secondLevelHtml += "<option selected value='"+val.id+"'>"+val.classilyName+"</option>";               }else{                 secondLevelHtml += "<option value='"+val.id+"'>"+val.classilyName+"</option>";               }             }else if(val.level == 3){               if(val.checked == true){                 thirdLevelHtml += "<option selected value='"+val.id+"'>"+val.classilyName+"</option>";               }else{                 thirdLevelHtml += "<option value='"+val.id+"'>"+val.classilyName+"</option>";               }             }           });           $("#first_classify").append(firstLevelHtml);           $("#second_classify").append(secondLevelHtml);           $("#third_classify").append(thirdLevelHtml);            // 加載普通標簽           $("div[name='commonTagDom']").html($("#commonTagTemplate").render(obj.commonTagOptionJsons));           // 加載級聯標簽           $("div[name='selectTagDom']").html($("#selectTagTemplate").render(obj.selectTagOptionJsons));         });       });       commonJS.loading("close");     },     "returnSelectedClassifyAndTag":function () {       // 獲取展示分類ID和搜索標簽       var classifyName = '';       var classifyId = $("#third_classify").val();       $.each($("#third_classify").find("option"), function (n, val) {         if (val.selected) {           classifyName = $(val).html();         }       });       if (0 == classifyId) {         classifyId = $("#second_classify").val();         $.each($("#second_classify").find("option"), function (n, val) {           if (val.selected) {             classifyName = $(val).html();           }         });       }       if (0 == classifyId) {         classifyId = $("#first_classify").val();         $.each($("#first_classify").find("option"), function (n, val) {           if (val.selected) {             classifyName = $(val).html();           }         });       }        if (0 != classifyId) {         var classify = {           "classifyId": 0,           'classifyName': '',           "searchTags": []         }         classify.classifyId = classifyId;         classify.classifyName = classifyName;         var selectTagDom = $("#selectTagDom");         var commonTagDom = $("#commonTagDom");         var selectTagsEle = selectTagDom.find("input[type='checkbox']");         var commonTagsEle = commonTagDom.find("input[type='checkbox']");         for (var i = 0; i < selectTagsEle.length; i++) {           if (selectTagsEle[i].checked) {             var searchTag = {};             var optionId = $(selectTagsEle[i]).attr("optionid");             var optionValueId = $(selectTagsEle[i]).attr("valueid");             searchTag.optionId = optionId;             searchTag.optionValueId = optionValueId;             classify.searchTags.push(searchTag);           }         }         for (var i = 0; i < commonTagsEle.length; i++) {           if (commonTagsEle[i].checked) {             var searchTag = {};             var optionId = $(commonTagsEle[i]).attr("optionid");             var optionValueId = $(commonTagsEle[i]).attr("valueid");             searchTag.optionId = optionId;             searchTag.optionValueId = optionValueId;             classify.searchTags.push(searchTag);           }         }         return classify;       }     }   } </script> 

#parse("/classify_search_tag.html")

$(function () {  goodsClassifyAndSearchTag.getFirstLevelClassify();/** 初始化一級展示分類 **/});

$(function () {  goodsClassifyAndSearchTag.getClassifyAndSearchTag("需要的參數");/** 回顯展示類目以及搜索標簽 **/});

goodsClassifyAndSearchTag.returnSelectedClassifyAndTag()