我们只需要在界面代码的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(); }