详解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()

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