fuelux.tree用法

ACE中带了一个树，样式和操作挺好看的，就是难用，下面记录下如何使用。

首先fuelux.tree接受的数据源是Json，关键这个Json还不怎么标准，可接受的Json示例如下：

{
    ‘刑侦‘: {
        ‘text‘: ‘刑侦‘,
        ‘type‘: ‘folder‘,
        ‘additionalParameters‘: {
            ‘id‘: ‘1‘,
            ‘children‘: {
                ‘痕迹检验‘: {
                    ‘text‘: ‘痕迹检验‘,
                    ‘type‘: ‘item‘,
                    ‘additionalParameters‘: {
                        ‘id‘: ‘10‘
                    }
                },
                ‘声像技术‘: {
                    ‘text‘: ‘声像技术‘,
                    ‘type‘: ‘item‘,
                    ‘additionalParameters‘: {
                        ‘id‘: ‘9‘,
                        ‘item-selected‘: true
                    }
                }
            }
        }
    },
    ‘交警‘: {
        ‘text‘: ‘交警‘,
        ‘type‘: ‘folder‘,
        ‘additionalParameters‘: {
            ‘id‘: ‘32‘,
            ‘children‘: {
                ‘交通事故‘: {
                    ‘text‘: ‘交通事故‘,
                    ‘type‘: ‘item‘,
                    ‘additionalParameters‘: {
                        ‘id‘: ‘33‘
                    }
                },
                ‘交通道理管理‘: {
                    ‘text‘: ‘交通道理管理‘,
                    ‘type‘: ‘item‘,
                    ‘additionalParameters‘: {
                        ‘id‘: ‘34‘
                    }
                }
            }
        }
    }
}

注意上面有默认选中属性设置。

然后是前台：

<ul id="tree1"></ul>

要引入<script src="~/assets/js/fuelux.tree.min.js"></script>

然后是js绑定代码，可以修改为从服务器获取：

        jQuery(function ($) {
            var sampleData = initiateDemoData();

            $(‘#tree1‘).ace_tree({
                dataSource: sampleData[‘dataSource1‘],
                multiSelect: true,
                cacheItems: true,
                ‘open-icon‘: ‘ace-icon tree-minus‘,
                ‘close-icon‘: ‘ace-icon tree-plus‘,
                ‘selectable‘: true,
                ‘selected-icon‘: ‘ace-icon fa fa-check‘,
                ‘unselected-icon‘: ‘ace-icon fa fa-times‘,
                loadingHTML: ‘<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>‘
            });

            function initiateDemoData() {
                var tree_data = { ‘刑侦‘: { ‘text‘: ‘刑侦‘, ‘type‘: ‘folder‘, ‘additionalParameters‘: { ‘id‘: ‘1‘, ‘children‘: { ‘痕迹检验‘: { ‘text‘: ‘痕迹检验‘, ‘type‘: ‘item‘, ‘additionalParameters‘: { ‘id‘: ‘10‘ } }, ‘声像技术‘: { ‘text‘: ‘声像技术‘, ‘type‘: ‘item‘, ‘additionalParameters‘: { ‘id‘: ‘9‘, ‘item-selected‘: true } } } } }, ‘交警‘: { ‘text‘: ‘交警‘, ‘type‘: ‘folder‘, ‘additionalParameters‘: { ‘id‘: ‘32‘, ‘children‘: { ‘交通事故‘: { ‘text‘: ‘交通事故‘, ‘type‘: ‘item‘, ‘additionalParameters‘: { ‘id‘: ‘33‘ } }, ‘交通道理管理‘: { ‘text‘: ‘交通道理管理‘, ‘type‘: ‘item‘, ‘additionalParameters‘: { ‘id‘: ‘34‘ } } } } } }
                var dataSource1 = function (options, callback) {
                    var $data = null
                    if (!("text" in options) && !("type" in options)) {
                        $data = tree_data;//the root tree
                        callback({ data: $data });
                        return;
                    }
                    else if ("type" in options && options.type == "folder") {
                        if ("additionalParameters" in options && "children" in options.additionalParameters)
                            $data = options.additionalParameters.children || {};
                        else $data = {}//no data
                    }

                    if ($data != null)//this setTimeout is only for mimicking some random delay
                        setTimeout(function () { callback({ data: $data }); }, parseInt(Math.random() * 500) + 200);
                }
                return { ‘dataSource1‘: dataSource1 }
            }

        });

最后是获取选中节点值：

        function xuanzhong() {
            var output = "";
            var ids = "";
            var items = $(‘#tree1‘).tree(‘selectedItems‘);
            for (var i in items) if (items.hasOwnProperty(i)) {
                var item = items[i];
                ids += item.additionalParameters[‘id‘] + ",";
                output += item.text + ",";
            }

            ids = ids.substring(0, ids.lastIndexOf(","));
            output = output.substring(0, output.lastIndexOf(","));
            alert(ids + "___" + output);
        }

本文示例Json来自网络。