Fastadmin類別無限極選擇元件原始碼洩露
阿新 • • 發佈：2019-01-30
我們只需要在介面程式碼的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();
}