PHP系统树图可快速的处理无限极分类的业务需求 提供两种不同的数据结构和三种视图类型
2.1:
1.版本修视图图标bug
2.视图 方法名称修改 buildCatalog buildRhizome ==》 buildHorizontal buildVertical
3.buildHorizontal buildVertical buildSelect getTreeData 方法增加数据缓存 默认:-1不缓存 0永久缓存 0>缓存n秒
4.视图路由参数router变更为非必要 传递router路由参数视图会自动绑定点击节点修改,增加按钮时的弹窗表单
5.可绑定的按钮事件 节点标签按钮dendrogram.bindClassEnvent('dendrogram-tab',事件,回调方法) 节点新增按钮dendrogram.bindClassEnvent('dendrogram-grow',事件,回调方法)
6.弹窗增加可自定义配置项dendrogram.form.settings
7.无刷新的视图增删改节点操作 修复多种视图bug
| 数据结构 | adjacency list | nested sets | |
|---|---|---|---|
| 视图类型 | 横向视图 Horizontal | 竖向视图 Vertical | 级联下拉列表 select |
composer require dendrogram/dendrogram:v2.1
首先往Laravel应用中注册ServiceProvider,打开文件config/app.php,在providers中添加一项:
'providers' => [
DenDroGram\DendrogramServiceProvider::class
]
然后发布拓展包的配置文件,使用如下命令:
php artisan vendor:publish
会在config目录下会生成dendrogram.php的配置文件
php artisan migrate
两表四个自定义函数 表名可先行在配置文件中修改.以保持与自定义函数内的表名一致
migrations下增加中国城市sql文件
由于查询节点过多需要配置mysql
SET GLOBAL group_concat_max_len = 20460;
/*adjacency list数据结构*/
new DenDroGram(AdjacencyList::class)
/*nested set数据结构*/
new DenDroGram(NestedSet::class)
两种不同数据结构分别对应两张表,请根据实际业务场景选择
| 调用方法 | 方法说明 | 方法参数 | 返回内容 |
|---|---|---|---|
| buildHorizontal | 生成横向视图 | id:根节点id column: 节点展示记录字段名 cache: 缓存时间 文件缓存需要开启目录权限chmod -R 0777 vendor/dendrogram/ router: 修改节点数据路由[POST方式] |
html文本 如果没有传递router路由参数不会自动绑定点击节点修改,增加按钮时的弹窗表单 自定义js代码块 1.绑定事件到节点的标签tab,添加按钮grow:dendrogram.bindClassEnvent('dendrogram-tab',事件,回调方法) dendrogram.bindClassEnvent('dendrogram-grow',事件,回调方法) 2.可以对表单内容自定义的设置:dendrogram.form.settings = [{配置1},{配置2}...] * settings结构为数组对象: [setting,setting,...] * 输入框setting 普通对象: { column:记录列明 必填, label:输入框标签 选填, type:输入框类型 选填, attribute:输入框属性参数 选填, options:当类setting的类型type为radio或者checkbox时的选项参数 选填 } * setting中 type类型:text textarea hidden disable radio checkbox 默认text * options结构为数组对象 [] option为普通对象 {label:选项标签 必填,value:选项值 必填} |
| buildVertical | 生成竖向视图 | id: 根节点id column: 节点展示记录字段名 cache: 缓存时间 router: 修改节点数据路由[POST方式] |
同上 [参考示例] |
| buildSelect | 生成级联下拉列表 | id: 根节点id 根节点id label: 列表选项显示值(记录字段名) value: 列表选项值(记录字段名) default : 列表选项默认值(级联数组对应值) cache: 缓存时间 -1不缓存 0永久缓存 0>缓存n秒 |
html文本 获取选项结果事件的值:js中调用dendrogramUS.storage()获取选择结果值的数组 点击选项事件回调方法:js中调用dendrogramUS.callback = function(){} |
| operateNode | 节点操作 | action: 增删改标识 [添加记录:add 修改: update 删除: delete] data: 修改节点记录的传参[post方式] |
新增返回id 修改删除返回bool 返回的result用json输出到客户端 |
| getTreeData | 获取结构型数据 | id: 根节点id cache: 缓存时间 [-1不缓存 0永久缓存 0>缓存n秒] |
array 结构参见下图 |
