页面上一些基础数据或者其他页面经常用到部分,可以独立出来做成小组件,组件预留调用入口,需要的页面直接调用即可。
如图,页面中的展示分类和搜索标签在多个页面重复使用,可以将这部分内容独立出来,做成组件,供后续开发调用:
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" οnchange="goodsClassifyAndSearchTag.getSecondClassify(this)">
<option value="0">请选择</option>
</select>
</div>
<div class="col-md-1">
<select class="form-control" id="second_classify" οnchange="goodsClassifyAndSearchTag.getThirdClassify(this)">
<option value="0">请选择</option>
</select>
</div>
<div class="col-md-1">
<select class="form-control" id="third_classify" οnchange="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_{
{:optionI