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

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