详解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()
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
