我们只需要在界面代码的form中,做如下定义即可。
HTML代码:
<div class="form-group">
<label for="c-catid" class="control-label col-xs-12 col-sm-2">类别:</label>
<div class="col-xs-12 col-sm-8 line3">
<div id="jscategoryselect22" class="selects3" data-pid="0">
<a class="arrow"><img alt="arrowbottom" src="http://qd.andiff.net/netimages/arrow_bottom.png" /></a>
<span class='selected3'>请选择</span>
<input type="hidden" id="catid" name="row[catid]" value="" />
</div>
</div>
</div>
其中class="selects3",代表调用多级类别选择组件。在后面的绑定代码中,会详细描述。id="jscategoryselect22"这个不需要关注,可以任意修改。属性data-pid=“0”代表最顶级类别。如果2,代表类别选择器里面顶级类别是2.
在require-form.js里面,加一句 events.selectcategory(form); 函数源码如下:
selectcategory: function(form){
if ($(".selects3", form).size() > 0) {
$(".selects3").bind('click',function(){
var s1 = Layer.readcategory($(this).attr("data-pid"));
var s = '<div class="container">';
s = s + '<div class="row">';
s = s + '<div class="col-xs-12">';
s = s + '<ul id="breadcrumb" class="breadcrumb">';
s = s + '<li><a href="javascript:;" title="' + $(this).attr("role") + '">回到顶级</a> <span class="divider">></span></li>';
s = s + '</ul>';
s = s + '</div>';
s = s + '</div>';
s = s + '<div class="row">';
s = s + '<ul id="dcategory" class="dcategory">';
s = s + s1;
s = s + '</ul>';
s = s + '</div>';
s = s + '</div>';
Layer.fullscreen(s);
});
}
},
这段代码的意思是弹出一个层。显示类别,至于读取类别的代码,在Layer.js里面。layer.js位于layer目录src目录下。
readcategory:function(cid){
var s = '';var p = '';
$.ajax({
url: '/admin/ajax/readcategory?catid='+cid,
type: 'post',
dataType: 'json',
async: false,
success: function (ret) {
$.each(ret.pss,function(k,v){
});
$.each(ret.ps,function(k,v){
});
$.each(ret.cs,function(k,v){
s = s + '<li><button class="btn btn-primary currents" id="'+v.id+'" type="button">'+v.name+'</button>';
if(v.child>0){
s = s + ' <button class="btn btn-primary childs" id="'+v.id+'" type="button">></button></li>';
}
});
}
});
return s;
},
fullscreen:function(content){
$(document).delegate(".breadcrumb a","click",function(){
var s = '';var p = '';
$.ajax({
url: '/admin/ajax/readcategory?catid='+$(this).prop("title"),
type: 'post',
dataType: 'json',
success: function (ret) {
$.each(ret.pss,function(k,v){
p = p + '<li><a href="javascript:;" title="' + v.id + '">';
p = p + v.name + '</a>';
p = p + '<span class="divider">></span></li>';
});
$.each(ret.ps,function(k,v){
p = p + '<li><a href="javascript:;" title="' + v.id + '">';
p = p + v.name + '</a>';
p = p + '<span class="divider">></span></li>';
});
$.each(ret.cs,function(k,v){
s = s + '<li><button class="btn btn-primary currents" id="'+v.id+'" type="button">'+v.name+'</button>';
if(v.child>0){
s = s + ' <button class="btn btn-primary childs" id="'+v.id+'" type="button">></button></li>';
}
});
$("#breadcrumb").html('<li><a href="javascript:;" title="0">回到顶级</a> <span class="divider">></span></li>'+p);
$("#dcategory").html(s);
}
});
});
$(document).delegate("button.childs","click",function(){
var s = '';var p = '';
$.ajax({
url: '/admin/ajax/readcategory?catid='+$(this).prop("id"),
type: 'post',
dataType: 'json',
success: function (ret) {
$.each(ret.pss,function(k,v){
p = p + '<li><a href="javascript:;" title="' + v.id + '">';
p = p + v.name + '</a>';
p = p + '<span class="divider">></span></li>';
});
$.each(ret.ps,function(k,v){
p = p + '<li><a href="javascript:;" title="' + v.id + '">';
p = p + v.name + '</a>';
p = p + '<span class="divider">></span></li>';
});
$.each(ret.cs,function(k,v){
s = s + '<li><button class="btn btn-primary currents" id="'+v.id+'" type="button">'+v.name+'</button>';
if(v.child>0){
s = s + ' <button class="btn btn-primary childs" id="'+v.id+'" type="button">></button></li>';
}
});
$("#breadcrumb").html('<li><a href="javascript:;" title="0">回到顶级</a> <span class="divider">></span></li>'+p);
$("#dcategory").html(s);
}
});
});
$(document).delegate("button.currents","click",function(){
$(".selected3").html($(this).html());
$("#catid").val($(this).prop("id"));
layer.closeAll();
});
var ll = layer.open({
type: 1
,title: '选择类别'
,content: content
,anim: 'down'
,closeBtn: true
,area:['90%','90%']
,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});
return ll;
},
服务器端的代码,在/admin/ajax/readcategory 里面,代码如下:
//读取分类数据,支持无限极分类。读取类别当前类,父类,父父类,子类
public function readcategory(){
$catid = $this->request->get('catid');
$where = ['status' => 'normal'];
if($catid !== ''){
//$where = ['id' => $catid];
$tree = Tree::instance();
$tree->init(collection(Db::name('category')->order('weigh desc,id desc')->select())->toArray(), 'pid');
$arr = array();
if($catid == 0){
$pss = array();
$ps = array();
$cs = $tree->getChild($catid);
$arr['pss'] = $pss;
$arr['ps'] = $ps;
$i = 0;
foreach ($cs as $k => $v) {
$arr['cs'][$i]['id'] = $v['id'];
$arr['cs'][$i]['name'] = $v['name'];
$arr['cs'][$i]['nickname'] = $v['nickname'];
$arr['cs'][$i]['image'] = $v['image'];
$arr['cs'][$i]['child'] = $v['child'];
$i++;
}
print_r(json_encode($arr));exit;
}else{
$ps = $tree->getParents($catid,true);//父类
$pss = $tree->getParent($ps[0]['pid']);//父父类
$cs = $tree->getChild($catid);
$i = 0;
foreach ($pss as $k => $v) {
$arr['pss'][$i]['id'] = $v['id'];
$arr['pss'][$i]['name'] = $v['name'];
$arr['pss'][$i]['nickname'] = $v['nickname'];
$arr['pss'][$i]['image'] = $v['image'];
$arr['pss'][$i]['child'] = $v['child'];
$i++;
}
$i = 0;
foreach ($ps as $k => $v) {
$arr['ps'][$i]['id'] = $v['id'];
$arr['ps'][$i]['name'] = $v['name'];
$arr['ps'][$i]['nickname'] = $v['nickname'];
$arr['ps'][$i]['image'] = $v['image'];
$arr['ps'][$i]['child'] = $v['child'];
$i++;
}
$i = 0;
foreach ($cs as $k => $v) {
$arr['cs'][$i]['id'] = $v['id'];
$arr['cs'][$i]['name'] = $v['name'];
$arr['cs'][$i]['nickname'] = $v['nickname'];
$arr['cs'][$i]['image'] = $v['image'];
$arr['cs'][$i]['child'] = $v['child'];
$i++;
}
print_r(json_encode($arr));exit;
}
}
$t = array();
}