码迷,mamicode.com
首页 > 其他好文 > 详细

fuelux.tree用法

时间:2016-04-10 10:22:40      阅读:986      评论:0      收藏:0      [点我收藏+]

标签:

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来自网络。

fuelux.tree用法

标签:

原文地址:http://www.cnblogs.com/madyina/p/5373400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!