欢乐颂,将夜猫腻小说,雪鹰领主

主頁(yè) > 知識(shí)庫(kù) > 詳解velocity模板使javaWeb的html+js實(shí)現(xiàn)模塊化

詳解velocity模板使javaWeb的html+js實(shí)現(xiàn)模塊化

頁(yè)面上一些基礎(chǔ)數(shù)據(jù)或者其他頁(yè)面經(jīng)常用到部分，可以獨(dú)立出來(lái)做成小組件，組件預(yù)留調(diào)用入口，需要的頁(yè)面直接調(diào)用即可。
如圖，頁(yè)面中的展示分類和搜索標(biāo)簽在多個(gè)頁(yè)面重復(fù)使用，可以將這部分內(nèi)容獨(dú)立出來(lái)，做成組件，供后續(xù)開(kāi)發(fā)調(diào)用：

classify_search_tag.html文件如下，其中包含HTML節(jié)點(diǎn)和jQuery代碼；

!-- 
展示分類與搜索標(biāo)簽組件使用說(shuō)明： 
  1.新增時(shí)父頁(yè)面調(diào)用方法：頁(yè)面加載時(shí)調(diào)用 goodsClassifyAndSearchTag.getFirstLevelClassify();/** 初始化一級(jí)展示分類 **/ 
  2.編輯時(shí)父頁(yè)面調(diào)用方法：頁(yè)面加載時(shí)調(diào)用 goodsClassifyAndSearchTag.getClassifyAndSearchTag(String classifys); 
    ShowClassifyList類型json串，可參考 \js\standard_v2\group\group_edit.js 該方法 groupGoodsObj.getEditClassify(); 
  3.返回頁(yè)面選中的展示分類和搜索標(biāo)簽，調(diào)用 goodsClassifyAndSearchTag.returnSelectedClassifyAndTag(); 
  注意事項(xiàng)：可能會(huì)出現(xiàn)js沖突問(wèn)題，父頁(yè)面的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">請(qǐng)選擇/option> 
        /select> 
      /div> 
      div class="col-md-1"> 
        select class="form-control" id="second_classify" onchange="goodsClassifyAndSearchTag.getThirdClassify(this)"> 
          option value="0">請(qǐng)選擇/option> 
        /select> 
      /div> 
      div class="col-md-1"> 
        select class="form-control" id="third_classify" onchange="goodsClassifyAndSearchTag.getSearchTag(this)"> 
          option value="0">請(qǐng)選擇/option> 
        /select> 
      /div> 
    /div> 
  /div> 
/div> 
!--搜索標(biāo)簽--> 
div class="row mb15"> 
  div class="col-md-12"> 
    h2>small>搜索標(biāo)簽：/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> 
!-- 普通標(biāo)簽?zāi)０?--> 
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> 
!-- 級(jí)聯(lián)標(biāo)簽?zāi)０?--> 
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> 
!-- 級(jí)聯(lián)子標(biāo)簽?zāi)０?--> 
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> 
!--展示分類和搜索標(biāo)簽相關(guān)處理js代碼開(kāi)始--> 
script> 
 
  /** 
   * 展示分類和搜索標(biāo)簽對(duì)象 
   * @type {{index: {index: number}, getEditClassify: goodsClassifyAndSearchTag."getEditClassify"}} 
   */ 
  var goodsClassifyAndSearchTag = { 
    "index": 1, 
    "getFirstLevelClassify": function () { /** 獲取一級(jí)展示類目,新增時(shí)父頁(yè)面調(diào)用入口 **/ 
    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) { /** 獲取二級(jí)展示類型 **/ 
    $("#second_classify").html("option value='0'>請(qǐng)選擇/option>"); 
      $("#third_classify").html("option value='0'>請(qǐng)選擇/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'>請(qǐng)選擇/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) { /** 查詢當(dāng)前分類的所有普通標(biāo)簽 **/ 
    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) { /** 查詢當(dāng)前分類的所有一級(jí)級(jí)聯(lián)搜索標(biāo)簽 **/ 
    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) { /** 根據(jù)標(biāo)簽值id獲取下級(jí)標(biāo)簽 **/ 
    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{ 
          // 先刪除所有后面的兄弟節(jié)點(diǎn) 
          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) {//編輯時(shí)回寫(xiě)搜索標(biāo)簽，父頁(yè)面調(diào)用入口 
      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); 
 
          // 加載普通標(biāo)簽 
          $("div[name='commonTagDom']").html($("#commonTagTemplate").render(obj.commonTagOptionJsons)); 
          // 加載級(jí)聯(lián)標(biāo)簽 
          $("div[name='selectTagDom']").html($("#selectTagTemplate").render(obj.selectTagOptionJsons)); 
        }); 
      }); 
      commonJS.loading("close"); 
    }, 
    "returnSelectedClassifyAndTag":function () { 
      // 獲取展示分類ID和搜索標(biāo)簽 
      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>

調(diào)用頁(yè)面的HTML文件中該模塊的位置用velocity引用該組件：

#parse("/classify_search_tag.html")

調(diào)用頁(yè)面的js文件中，調(diào)用入口方法即可：

新增調(diào)用

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

編輯調(diào)用：

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

獲取選中的返回值：

goodsClassifyAndSearchTag.returnSelectedClassifyAndTag()

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

詳解使用Mybatis-plus + velocity模板生成自定義的代碼
c#基于NVelocity實(shí)現(xiàn)代碼生成
SiteMesh如何結(jié)合Freemarker及velocity使用
Vue中JS動(dòng)畫(huà)與Velocity.js的結(jié)合使用
如何解決SpringBoot2.x版本對(duì)Velocity模板不支持的方案
SpringBoot與velocity的結(jié)合的示例代碼
聊聊JS動(dòng)畫(huà)庫(kù) Velocity.js的使用
springMVC+velocity實(shí)現(xiàn)仿Datatables局部刷新分頁(yè)方法
Mybatis velocity腳本的使用教程詳解(推薦)
JAVA velocity模板引擎使用實(shí)例
html文件中jquery與velocity變量中的$沖突的解決方法
Java 如何使用Velocity引擎生成代碼

標(biāo)簽：白銀烏蘭察布臨汾銅川吉林自貢山南開(kāi)封

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《詳解velocity模板使javaWeb的html+js實(shí)現(xiàn)模塊化》，本文關(guān)鍵詞詳解,velocity,模板,使,javaWeb,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。