树形根据数据库查询的简单实例
开发工具与关键技术: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的关系,在数据库建立好表;其次还要明确认清配置参数的功能实现;