详解velocity模板使javaweb的html+js实现模块化
页面上一些基础数据或者其他页面经常用到部分，可以独立出来做成小组件，组件预留调用入口，需要的页面直接调用即可。
如图，页面中的展示分类和搜索标签在多个页面重复使用，可以将这部分内容独立出来，做成组件，供后续开发调用：
classify_search_tag.html文件如下，其中包含html节点和jquery代码；
<!--
展示分类与搜索标签组件使用说明：
1.新增时父页面调用方法：页面加载时调用 goodsclassifyandsearchtag.getfirstlevelclassify();/** 初始化一级展示分类 **/
2.编辑时父页面调用方法：页面加载时调用 goodsclassifyandsearchtag.getclassifyandsearchtag(string classifys);
showclassifylist类型json串，可参考 jsstandard_v2groupgroup_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()
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！