@dfeidao/fd-w000001 v4.6.201910211528

树

https://dfeidao.gitee.io/widgets/

• Installation
• 注意：
• Usage
• 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
• 4. Events - 4.1. feidao-web事件绑定示例 - 4.2. fdwe-tree-select-node - 4.3. fdwe-tree-activate-node
• 5. Example - 5.1. 完整示例
• ChangeLogs - latest - 4.6.201907081002

Installation

yarn add --dev @dfeidao/fd-w000001

注意：

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

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

Usage

<fd-w000001></fd-w000001>

2. Attributes

2.1. data

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

<fd-w000001 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":"ffffffffffffffffffffffff"},{"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"}]'></fd-w000001>

如需刷新数据，请使用脚本重新设置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

选中一个或多个结点

4. Events

4.1. feidao-web事件绑定示例

<fd-w000001 data-feidao-actions="fdwe-tree-select-node:a001"></fd-w000001>

4.2. fdwe-tree-select-node

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

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

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

4.3. fdwe-tree-activate-node

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

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

5. Example

5.1. 完整示例

<fd-w000001 id="widget" checkbox node_open node_close 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":"ffffffffffffffffffffffff"},{"no":2,"parent":"0","name":"2"},{"no":"11","parent":"1","name":"444"},{"no":"12","parent":"1","name":"12", "img":"https://avatars1.githubusercontent.com/u/15901911?s=40&v=4"},{"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}]'></fd-w000001>
<input id="btn" type="button" value="test">

const widget = document.querySelector('#widget');
widget.addEventListener('fdwe-tree-select-node', (e)=>{
	console.info(e.data);
});
widget.addEventListener('fdwe-tree-activate-node', (e)=>{
	console.info(e.data);
});
const btn = document.querySelector('#btn');
btn.addEventListener('click', ()=>{
	// console.log(widget.get_checked());
	// widget.check_all();
	// widget.uncheck_all();
	widget.check_node(['11', 2]);
});

ChangeLogs

latest

添加node_open与node_close属性，添加了node_open属性，点击则可以进行节点的打开，添加了node_close属性，点击节点则进行节点的关闭。

4.6.201907081002