下拉列表展示生成樹結構

原創

2020-02-20 23:32

PHP:

public function tree($item = [], $pid=0, $level=1)
{
    $data = array();
    foreach($item as $key=>$val) {
        if($val->parentid == $pid) {
            $val->level = $level;
            $val->sub = $this->tree($item, $val->id, $level+1);
            $data[] = $val;
        }
    }
    return $data;
}

HTML:

<select class="form-control" id="selectbox" name="type_id" id="type"></select>

JS:

$(function () {
    function listToTree(list, pid)
    {
        var ret = [];//一個存放結果的臨時數組
        for(var i in list) {
            if(list[i].parentid == pid) {//如果當前項的父id等於要查找的父id，進行遞歸
                list[i].children = listToTree(list, list[i].id);
                ret.push(list[i]);//把當前項保存到臨時數組中
            }
        }
        return ret;//遞歸結束後返回結果
    }
    var jj = '{!! $typeModels !!}';

    var tree=listToTree(JSON.parse(jj), 0);//調用函數，傳入要轉換的list數組，和樹中頂級元素的pid


    //js腳本，遞歸生成
    //獲取容器對象
    var selectbox=document.getElementById("selectbox");

    //生成樹下拉菜單
    var j="";//前綴符號，用於顯示父子關係，這裏可以使用其它符號
    function creatSelectTree(d){
        var option="";
        for(var i=0;i<d.length;i++){
            if(d[i].children.length){//如果有子集
                if(defaultId == d[i].id) {
                    option+="<option selected value='"+d[i].id+"'>"+j+d[i].name+"</option>";
                } else {
                    option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
                }
                j+="└─";//前綴符號加一個符號
                option+=creatSelectTree(d[i].children);//遞歸調用子集
                j=j.slice(0,j.length-1);//每次遞歸結束返回上級時，前綴符號需要減一個符號
            }else{//沒有子集直接顯示
                if(defaultId == d[i].id) {
                    option+="<option selected value='"+d[i].id+"'>"+j+d[i].name+"</option>";
                } else {
                    option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
                }
            }
        }
        return option;//返回最終html結果
    }

    //調用函數，並將結構出入到下拉框容器中
    var defaultOption = "<option value=''>請選擇</option>";
    var defaultId = '{{$type_id}}';
    selectbox.innerHTML = defaultOption + creatSelectTree(tree, defaultId);
});