詳解velocity模板使javaWeb的html+js實(shí)現(xiàn)模塊化
更新時(shí)間：2017年05月12日 09:00:05 投稿：lqh
這篇文章主要介紹了詳解velocity模板使javaWeb的html+js實(shí)現(xiàn)模塊化的相關(guā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è)面中的展示分類(lèi)和搜索標(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代碼；
<!--
展示分類(lèi)與搜索標(biāo)簽組件使用說(shuō)明：
1.新增時(shí)父頁(yè)面調(diào)用方法：頁(yè)面加載時(shí)調(diào)用 goodsClassifyAndSearchTag.getFirstLevelClassify();/** 初始化一級(jí)展示分類(lèi) **/
2.編輯時(shí)父頁(yè)面調(diào)用方法：頁(yè)面加載時(shí)調(diào)用 goodsClassifyAndSearchTag.getClassifyAndSearchTag(String classifys);
ShowClassifyList類(lèi)型json串，可參考 \js\standard_v2\group\group_edit.js 該方法 groupGoodsObj.getEditClassify();
3.返回頁(yè)面選中的展示分類(lèi)和搜索標(biāo)簽，調(diào)用 goodsClassifyAndSearchTag.returnSelectedClassifyAndTag();
注意事項(xiàng)：可能會(huì)出現(xiàn)js沖突問(wèn)題，父頁(yè)面的js最好在文件頂部加載
-->
<!--展示分類(lèi)-->
<div class="row form-horizontal">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-1 control-label pr0">展示分類(lèi)</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>
<!-- 展示分類(lèi)模板 -->
<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>
<!--展示分類(lèi)和搜索標(biāo)簽相關(guān)處理js代碼開(kāi)始-->
<script>
/**
* 展示分類(lèi)和搜索標(biāo)簽對(duì)象
* @type {{index: {index: number}, getEditClassify: goodsClassifyAndSearchTag."getEditClassify"}}
*/
var goodsClassifyAndSearchTag = {
"index": 1,
"getFirstLevelClassify": function () { /** 獲取一級(jí)展示類(lèi)目,新增時(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í)展示類(lèi)型 **/
$("#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) { /** 查詢(xún)當(dāng)前分類(lèi)的所有普通標(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) { /** 查詢(xún)當(dāng)前分類(lèi)的所有一級(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 () {
// 獲取展示分類(lèi)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í)展示分類(lèi) **/
});
編輯調(diào)用：
$(function () {
goodsClassifyAndSearchTag.getClassifyAndSearchTag("需要的參數(shù)");/** 回顯展示類(lèi)目以及搜索標(biāo)簽 **/
});
獲取選中的返回值：
goodsClassifyAndSearchTag.returnSelectedClassifyAndTag()
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
幾則JSP入門(mén)知識(shí)總結(jié)...2006-10-10
Jsp如何實(shí)現(xiàn)網(wǎng)頁(yè)的重定向
Jsp如何實(shí)現(xiàn)網(wǎng)頁(yè)的重定向...2006-10-10
JSP實(shí)現(xiàn)簡(jiǎn)單的登錄和注冊(cè)界面詳細(xì)全過(guò)程
用戶(hù)注冊(cè)是指用戶(hù)在網(wǎng)站上創(chuàng)建新的賬號(hào),而用戶(hù)登錄是指已注冊(cè)的用戶(hù)通過(guò)輸入正確的賬號(hào)和密碼進(jìn)入自己的賬號(hào),下面這篇文章主要給大家介紹了關(guān)于JSP實(shí)現(xiàn)簡(jiǎn)單的登錄和注冊(cè)界面的相關(guān)資料,需要的朋友可以參考下2024-04-04
response.getWriter().write()向前臺(tái)打印信息亂碼問(wèn)題解決
本節(jié)主要介紹了response.getWriter().write()向前臺(tái)打印信息亂碼問(wèn)題解決方法，需要的朋友可以參考下2014-08-08
實(shí)例講解JSP獲取ResultSet結(jié)果集中的數(shù)據(jù)的方法
這篇文章主要介紹了JSP獲取ResultSet結(jié)果集中數(shù)據(jù)的方法,文后還介紹一種遍歷ResultSet中的數(shù)據(jù)并轉(zhuǎn)化為表格的方法,需要的朋友可以參考下2016-04-04
Java之JSP教程九大內(nèi)置對(duì)象詳解(中篇)
這篇文章主要介紹了Java之JSP教程九大內(nèi)置對(duì)象詳解(中篇)，本文章內(nèi)容詳細(xì)，通過(guò)案例可以更好的理解JSP內(nèi)置對(duì)象的相關(guān)知識(shí)，本模塊分為了三部分，本次為中篇，講解了三個(gè)內(nèi)容，需要的朋友可以參考下2023-01-01
jsp+mysql數(shù)據(jù)庫(kù)操作常用方法實(shí)例總結(jié)
這篇文章主要介紹了jsp+mysql數(shù)據(jù)庫(kù)操作常用方法,以實(shí)例形式較為詳細(xì)的總結(jié)了JSP操作mysql數(shù)據(jù)庫(kù)實(shí)現(xiàn)基本的增、刪、改、查相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
java 易懂易用的MD5加密(可直接運(yùn)行)(2)
java MD5加密完全代碼2008-11-11
一個(gè)開(kāi)發(fā)人員眼中的JSP技術(shù)(下)
一個(gè)開(kāi)發(fā)人員眼中的JSP技術(shù)(下)...2006-10-10
JSP中的字符替換函數(shù) str_replace() 實(shí)現(xiàn)！
JSP中的字符替換函數(shù) str_replace() 實(shí)現(xiàn)！...2006-10-10