|
|
<style>
|
|
|
|
|
|
.brand-list {
|
|
|
max-height: 400px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
.brand-list a{
|
|
|
display:inline-block;
|
|
|
color: #000;
|
|
|
padding: 5px 10px;
|
|
|
margin: 3px 0;
|
|
|
}
|
|
|
.brand-list a.active{
|
|
|
color: #fff;
|
|
|
background: #428bca;
|
|
|
padding: 5px 10px;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<div class="pageheader">
|
...
|
...
|
@@ -23,68 +37,56 @@ |
|
|
<div class="contentpanel seo-root-page" style="padding-bottom:0;">
|
|
|
<div class="panel panel-default">
|
|
|
<div class="panel-body">
|
|
|
<form action="/seo/rootwords/doadd" type="post">
|
|
|
<div class="form-group">
|
|
|
<label for="exampleInputEmail1">词根</label>
|
|
|
<input type="text" class="form-control" >
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="exampleInputEmail1">品牌</label>
|
|
|
<ul id="brandTab" class="nav nav-tabs">
|
|
|
<li class="active"><a href="#home" data-toggle="tab">0~9</a></li>
|
|
|
<li><a href="#a" data-toggle="tab">a</a></li>
|
|
|
<li><a href="#b" data-toggle="tab">b</a></li>
|
|
|
</ul>
|
|
|
<div id="brandTabContent" class="tab-content">
|
|
|
<div class="tab-pane fade in active" id="home">
|
|
|
<a>0addidas</a>
|
|
|
<a>1addidas</a>
|
|
|
<a>2addidas</a>
|
|
|
</div>
|
|
|
<div class="tab-pane fade" id="a">
|
|
|
<a>addidas</a>
|
|
|
<a>ALTAMONT</a>
|
|
|
<a>Anthony</a>
|
|
|
</div>
|
|
|
<div class="tab-pane fade" id="b">
|
|
|
<a>baddidas</a>
|
|
|
<a>baddidas</a>
|
|
|
<a>baddidas</a>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="exampleInputEmail1">词根</label>
|
|
|
<input type="text" name="rootWord" class="form-control" >
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label >品牌</label>
|
|
|
<ul id="brandTab" class="nav nav-tabs brand-category">
|
|
|
{{#each brand}}
|
|
|
<li {{#if @first}}class="active"{{/if}}><a href="#{{@key}}" data-toggle="tab">{{@key}}</a></li>
|
|
|
{{/each}}
|
|
|
</ul>
|
|
|
<div id="brandTabContent" class="tab-content brand-list">
|
|
|
{{#each brand}}
|
|
|
<div class="tab-pane fade {{#if @first}}in active{{/if}}" id="{{@key}}">
|
|
|
{{# .}}<a data-id="{{id}}"> {{brandName}} </a>{{/ .}}
|
|
|
</div>
|
|
|
{{/each}}
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="exampleInputEmail1">品类</label>
|
|
|
<div class="row">
|
|
|
<div class="col-md-3">
|
|
|
<select id="msort" class="form-control">
|
|
|
<option value="1" class="form-control">上衣</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
<select id="msort" class="form-control">
|
|
|
<option value="1">T恤</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
<select class="form-control">
|
|
|
<option>1</option>
|
|
|
<option>2</option>
|
|
|
<option>3</option>
|
|
|
<option>4</option>
|
|
|
<option>5</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="exampleInputEmail1">品类</label>
|
|
|
<div class="row">
|
|
|
<div class="col-md-3">
|
|
|
<select id="msort" class="form-control">
|
|
|
<option class="form-control">请选择</option>
|
|
|
{{#each sort}}
|
|
|
<option data="{{id}}" value="{{id}}" class="form-control">{{sortName}}</option>
|
|
|
{{/each}}
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
<select id="misort" class="form-control">
|
|
|
<option class="form-control">请选择</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
<select id="sort" class="form-control">
|
|
|
<option class="form-control">请选择</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="exampleInputEmail1">过滤词</label>
|
|
|
<input type="text" class="form-control" >
|
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="btn btn-default">提交</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="exampleInputEmail1">过滤词</label>
|
|
|
<input type="text" name="filter" class="form-control" >
|
|
|
</div>
|
|
|
|
|
|
<button type="submit" id="submit" class="btn btn-default">提交</button>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
...
|
...
|
@@ -92,3 +94,62 @@ |
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
$(function(){
|
|
|
var brand = $('.brand-list a'), selectBrand = 0;
|
|
|
var msort = $('#msort'), misort = $('#misort'), sort = $('#sort');
|
|
|
|
|
|
// 选择品牌
|
|
|
brand.on('click', function(){
|
|
|
brand.removeClass('active');
|
|
|
$(this).toggleClass('active');
|
|
|
selectBrand = $(this).data('id');
|
|
|
})
|
|
|
|
|
|
// 切换大分类
|
|
|
msort.on('change',function() {
|
|
|
selectInit('misort');
|
|
|
selectInit('sort');
|
|
|
getSubSorts($(this).val(), 'misort');
|
|
|
})
|
|
|
|
|
|
// 切换中分类
|
|
|
misort.on('change',function() {
|
|
|
selectInit('sort');
|
|
|
getSubSorts($(this).val(), 'sort');
|
|
|
})
|
|
|
|
|
|
// 提交TODO: 前端校验,数据提交,后端数据保存;删除功能;
|
|
|
|
|
|
|
|
|
// 获取子分类数据
|
|
|
function getSubSorts(sortId, id) {
|
|
|
$.ajax({
|
|
|
url: '/seo/rootwords/getsubsorts',
|
|
|
dataType: 'json',
|
|
|
type: 'POST',
|
|
|
data: {
|
|
|
sortId: sortId
|
|
|
},
|
|
|
success: function(data) {
|
|
|
var option = '';
|
|
|
$.each(data, function(key, val) {
|
|
|
option +='<option value="' + val.sort_id + '">' + val.sort_name + '</option>';
|
|
|
console.log(val);
|
|
|
});
|
|
|
$('#'+id).append(option);
|
|
|
},
|
|
|
error: function(err) {
|
|
|
console.log(err);
|
|
|
}
|
|
|
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 清空子分类
|
|
|
function selectInit(id) {
|
|
|
$('#'+id).html('<option class="form-control">请选择</option>');
|
|
|
}
|
|
|
|
|
|
})
|
|
|
</script> |
|
|
\ No newline at end of file |
...
|
...
|
|