树
1. 注意:
需要在gulpfile.js文件的webpack命令中添加以下代码:
...
module:{
...
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}, webpack))
...
2. Attributes
data
2.1. 必要属性,必须为一个数组,并且至少有三个字段
<mm-000001 checkbox dots icon="./images/45_70x70.jpg" id-field="no" text-field="name" pid-field="parent" title-field="alias" icon-field="img" data='[{"no":1,"parent":"root","name":"1", "alias":"title"},{"no":2,"parent":"0","name":"2"},{"no":"11","parent":"1","name":"11"},{"no":"12","parent":"1","name":"12", "img":"https://avatars1.githubusercontent.com/u/15901911?s=40&v=4"},{"no":"111","parent":"11","name":"111"},{"no":"112","parent":"11","name":"112"},{"no":"211","parent":"2","name":"211"}]'></mm-000001>
如需刷新数据,请使用脚本重新设置data属性
widget.setAttribute('data', '[{"no":1,"parent":"root","name":"1", "alias":"ddddddddddd"},{"no":2,"parent":"0","name":"2"},{"no":"11","parent":"1","name":"444"},{"no":"12","parent":"1","name":"12"},{"no":"111","parent":"11","name":"111", "no_checkbox": true},{"no":"112","parent":"11","name":"112", "no_checkbox": true},{"no":"211","parent":"2","name":"211", "no_checkbox": true}]');
id-field
2.2. 提供的数据中可以作为id
的字段名,该字段用来标识每一个树结点。默认值为id
pid-field
2.3. 提供的数据中可以作为pid
的字段名,该字段用来标识该结点的父结点。默认值为pid
text-field
2.4. 提供的数据中可以作为text
的字段名,该字段用来在树结点上显示。默认值为text
title-field
2.5. 提供的数据中可以作为title
的字段名,该字段用来在树结点上标示title
属性,鼠标在上面的时候弹出提示信息,当需要显示更多内容的时候有用。默认值为title
icon
2.6. 提供一个图片地址,用来替换默认图标显示,如果未定义属性值或属性值为字符串,则使用默认图标显示
icon-field
2.7. 提供的数据中可以作为icon
的字段名,该字段用来在树结点上显示图标。默认值为icon
。只有设置了icon
属性时起使用
dots
2.8. 是否显示结点左边的虚线
checkbox
2.9. 是否显示复选框,如果显示复选框的话,点击节点不会展开或关闭
disable_undetermined_state
2.10. 是否禁用三态复选框,注意:checkbox
为true时才有效
state
2.11. 是否保存状态
auto-open
2.12. 点击结点是否进行展开
auto-close
2.13. 点击结点是否进行关闭
3. Methods
get_data_by_id
3.1. 通过id获取数据
get_node_by_id
3.2. 通过结点id获取结点对象
search
3.3. 在树中进行搜索
clear_search
3.4. 解除搜索状态,还原完整树结点显示
close_all
3.5. 折叠全部结点
open_all
3.6. 打开全部结点
open
3.7. 打开某个结点
close
3.8. 折叠某个结点
get_checked
3.9. 获取选中的数据
check_all
3.10. 全部选中
uncheck_all
3.11. 全部不选
check_node
3.12. 选中一个或多个结点
set_data
3.13. 重置数据
4. Events
4.1. 事件绑定示例
<mm-000001 data-feidao-actions="mmwe-tree-select-node:a001"></mm-000001>
mmwe-tree-select-node
4.2. 参数属性data
中数据格式如下
{
data: any;
id: string;
parent: string;
parents: string[];
}
注意此事件在初始化时,如果该控件不是第一次使用,也会被调用,如果不希望该事件在初始化时被调用,请使用mmwe-tree-activate-node
mmwe-tree-activate-node
4.3. 参数属性data
中数据格式如下
{
data: any;
id: string;
parent: string;
parents: string[];
}