树形根据数据库查询的简单实例

树形根据数据库查询的简单实例

开发工具与关键技术：Javascript + html5
作者：张金荣
撰写时间：2019年1月20日

树形数据与数据库这之间实现关联查询显示主要有三个层。一是在数据库建立数据库，格式如下图：

1、 该表要设置父ID（PaentsID）和子ID（SonID），树ID（TreeID）
父ID的ID为子ID的上级代码比如中国的父ID是0表示中国以上没有上级代码，广东省的父ID是1，说明广东省的上级是中国（TreeID == 1）,以此类推；

二则是在页面层准备号树形显示的工作；
（1） 先引用插件

（2） 初始化配置

     var zNodes = [];
        var num=0;
        var setting = {
            view: {
                //addHoverDom: addHoverDom,//设置鼠标移到节点上，隐藏用户自定义控件
                //removeHoverDom: removeHoverDom,//用于当鼠标移出节点时，隐藏用户自定义控件
                selectedMulti: false   //设置是否允许同时选中多个节点-禁止多点同时选中的功能
            },
            check: {
                enable: false , //需要显示 checkbox
                chkStyle : "checkbox" ,
                autoCheckTrigger: false

            },
            data: {
                simpleData: {
                    enable: true//使用简单 Array 格式的数据
                }
            },
            edit: {
                enable: false//设置 zTree 是否处于编辑状态

            },
            callback: {
                beforeDrag: zTreeBeforeDrag,//预处理吧，不太清楚，方法直接写过来就行
                onClick: zTreeOnClick  //点击子树形子项事件（下面定义）
            }

        };

(3)查询参数

Body 代码

 <div>
                            <ul id="treeDemo" class="ztree"></ul>
                            <input type="text" id="" />
   </div>

(4)控制器代码

显示结果

要做好树形的显示就需要明确父ID和子ID的关系，在数据库建立好表；其次还要明确认清配置参数的功能实现；