详解velocity模板使javaWeb的html+js实现模块化

详解velocity模板使javaWeb的html+js实现模块化

页面上一些基础数据或者其他页面经常用到部分，可以独立出来做成小组件，组件预留调用入口，需要的页面直接调用即可。
如图，页面中的展示分类和搜索标签在多个页面重复使用，可以将这部分内容独立出来，做成组件，供后续开发调用：

classify_search_tag.html文件如下，其中包含HTML节点和jQuery代码；

<!--
展示分类与搜索标签组件使用说明：
  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>

调用页面的HTML文件中该模块的位置用velocity引用该组件：

#parse("/classify_search_tag.html")

调用页面的js文件中，调用入口方法即可：

新增调用

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

编辑调用：

$(function () {
  goodsClassifyAndSearchTag.getClassifyAndSearchTag("需要的参数");/** 回显展示类目以及搜索标签 **/
});

获取选中的返回值：

goodsClassifyAndSearchTag.returnSelectedClassifyAndTag()

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！