@mmstudio/ww000001 v1.0.202004170932

树

• 1. 注意：
• 2. Attributes - 2.1. data - 2.2. id-field - 2.3. pid-field - 2.4. text-field - 2.5. title-field - 2.6. icon - 2.7. icon-field - 2.8. dots - 2.9. checkbox - 2.10. disable_undetermined_state - 2.11. state - 2.12. auto-open - 2.13. auto-close
• 3. Methods - 3.1. get_data_by_id - 3.2. get_node_by_id - 3.3. search - 3.4. clear_search - 3.5. close_all - 3.6. open_all - 3.7. open - 3.8. close - 3.9. get_checked - 3.10. check_all - 3.11. uncheck_all - 3.12. check_node - 3.13. set_data
• 4. Events - 4.1. 事件绑定示例 - 4.2. mmwe-tree-select-node - 4.3. mmwe-tree-activate-node

1. 注意：

需要在gulpfile.js文件的webpack命令中添加以下代码:

...
module:{
	...
},
plugins: [
	new webpack.ProvidePlugin({
		$: "jquery",
		jQuery: "jquery"
	})
]
}, webpack))
...

2. Attributes

2.1. data

必要属性，必须为一个数组，并且至少有三个字段

<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}]');

2.2. id-field

提供的数据中可以作为id的字段名,该字段用来标识每一个树结点。默认值为id

2.3. pid-field

提供的数据中可以作为pid的字段名，该字段用来标识该结点的父结点。默认值为pid

2.4. text-field

提供的数据中可以作为text的字段名，该字段用来在树结点上显示。默认值为text

2.5. title-field

提供的数据中可以作为title的字段名，该字段用来在树结点上标示title属性，鼠标在上面的时候弹出提示信息，当需要显示更多内容的时候有用。默认值为title

2.6. icon

提供一个图片地址，用来替换默认图标显示,如果未定义属性值或属性值为字符串，则使用默认图标显示

2.7. icon-field

提供的数据中可以作为icon的字段名，该字段用来在树结点上显示图标。默认值为icon。只有设置了icon属性时起使用

2.8. dots

是否显示结点左边的虚线

2.9. checkbox

是否显示复选框,如果显示复选框的话，点击节点不会展开或关闭

2.10. disable_undetermined_state

是否禁用三态复选框，注意：checkbox为true时才有效

2.11. state

是否保存状态

2.12. auto-open

点击结点是否进行展开

2.13. auto-close

点击结点是否进行关闭

3. Methods

3.1. get_data_by_id

通过id获取数据

3.2. get_node_by_id

通过结点id获取结点对象

3.3. search

在树中进行搜索

3.4. clear_search

解除搜索状态，还原完整树结点显示

3.5. close_all

折叠全部结点

3.6. open_all

打开全部结点

3.7. open

打开某个结点

3.8. close

折叠某个结点

3.9. get_checked

获取选中的数据

3.10. check_all

全部选中

3.11. uncheck_all

全部不选

3.12. check_node

选中一个或多个结点

3.13. set_data

重置数据

4. Events

4.1. 事件绑定示例

<mm-000001 data-feidao-actions="mmwe-tree-select-node:a001"></mm-000001>

4.2. mmwe-tree-select-node

参数属性data中数据格式如下

{
	data: any;
	id: string;
	parent: string;
	parents: string[];
}

注意此事件在初始化时，如果该控件不是第一次使用，也会被调用，如果不希望该事件在初始化时被调用，请使用mmwe-tree-activate-node

4.3. mmwe-tree-activate-node

参数属性data中数据格式如下

{
	data: any;
	id: string;
	parent: string;
	parents: string[];
}