jQuery Flex Tree插件以动态、交互式、可折叠的树结构提供分层数据,并支持复选框和单选按钮。
1.将jQuery库与flex树插件的文件一起插入到html页面中。
- <!-- Main Stylesheet -->
- <link href="dist/flex-tree.min.css" rel="stylesheet">
- <!-- Minimal Skin -->
- <link href="dist/flex-tree-minimal.min.css" rel="stylesheet">
- <!-- jQuery Library -->
- <script src="/path/to/cdn/jquery.min.js"></script>
- <!-- Main JavaScript -->
- <script src="dist/flex-tree.min.js"></script>
2.创建一个容器来放置树状视图。
- <div id="flex-tree-container"></div>
3.在数组或JSON对象中定义您自己的分层数据。
- const myData = [
- {
- label: 'Item 1',
- childrens: [
- {
- label: 'Item 1.1',
- value: 'item_1_1',
- checked: true
- },
- {
- label: 'Item 1.2',
- value: 'item_1_2',
- childrens: [
- {
- label: 'Item 1.2.1',
- value: 'item_1_2_1',
- childrens: [
- {
- label: 'Item 1.2.2.1',
- value: 'item_1_2_2_1' },
- {
- label: 'Item 1.2.2.2',
- value: 'item_1_2_2_2',
- id: 'foo' }
- ]
- },
- ]}
- ]}
- ]
4.在您刚刚创建的容器元素中渲染一个基本的树状视图。
- $('#flex-tree-container').flexTree({
- items: myData
- });
5.将输入控件(例如复选框或单选按钮)添加到树节点。
- $('#flex-tree-container').flexTree({
- items: myData,
- type: 'checkbox',
- });
- $('#flex-tree-container').flexTree({
- items: myData,
- type: 'radio',
- });
6.自定义树状视图的可能选项。
- $('#flex-tree-container').flexTree({
- id: undefined,
- targetElement: $( this ),
- type: undefined,
- debug: false,
- name: 'flex_tree',
- items: {},
- className: 'flex-tree',
- buildTree: true,
- collapsed: false,
- collapsable: true,
- addControlOnParent: true,
- threeState: true
- });
v1.2.2 (2022-06-21)
v1.2.1 (2022-06-19)
v1.2.0 (2020-08-20)