树

• 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[];
}