fuelux-tree API 实例

最新推荐文章于 2020-10-23 17:25:00 发布

原创最新推荐文章于 2020-10-23 17:25:00 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ux

JQUERY 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用FuelUX Tree API结合Ajax调用来动态加载数据源，展示了在fulux-sample-data中实现这一功能的具体步骤和方法。

fulux-sample-data

var treeDataSource = new DataSource({
     data: [
        { name: 'Test Folder 1', type: 'folder', additionalParameters: { id: 'F1' },
          data: [
            { name: 'Test Sub Folder 1', type: 'folder', additionalParameters: { id: 'FF1' } },
            { name: 'Test Sub Folder 2', type: 'folder', additionalParameters: { id: 'FF2' } },
            { name: 'Test Item 2 in Folder 1', type: 'item', additionalParameters: { id: 'FI2' } }
          ]
        },
        { name: 'Test Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
        { name: 'Test Item 1', type: 'item', additionalParameters: { id: 'I1' } },
        { name: 'Test Item 2', type: 'item', additionalParameters: { id: 'I2' } }
      ],
  delay: 40

$(document).ready(
function () 
   {    
        var DataSource = function (options) {
            this._data = options.data;
        };

        var cont = 0;
        DataSource.prototype = {
            columns: function () {
                return this._columns;
            },

            data: function (options, callback) 
            {
                var self = this;
                if (options.search) 
                {
                    callback({ data: 0 , start: 0, end: 0, count: 0, pages: 0, page: 0 });
                } 
                else if (options.data) 
                {
                    callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
                } 
                else if (cont == 0) 
                {
                    callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
                }
                else 
                {
                    callback({ data: 0, start: 0, end: 0, count: 0, pages: 0, page: 0 });
                }
                cont = cont+1;
            }
        }

        var treeDataSource = new DataSource({
            data: //how to pull data from service call and assign (how do i call a service here)
        });

        $('#MyTree').tree({
            dataSource: treeDataSource
        });

        $('#tree-selected-items').on('click', function() {
            console.log("selected items: ", $('#MyTree').tree('selectedItems'));
        });

        $('#MyTree').on('loaded', function(evt, data) {
            console.log('tree content loaded');
        });

        $('#MyTree').on('opened', function(evt, data) {
            if(data.moduleId != 0)
            {
                SetModuleInfoInSession(data.moduleId,data.moduleName,data.url);
            }
            console.log('sub-folder opened: ', data);
        });

        $('#MyTree').on('closed', function(evt, data) {
            console.log('sub-folder closed: ', data);
        });

        $('#MyTree').on('selected', function(evt, data) {
            console.log('item selected: ', data);
        });
    });

设置数据源动态通过调用一个服务(ajax调用)

function myTreeInit() {

            $('#myTree').tree({
                dataSource: function(parentData, callback){
                    setTimeout(function () {
                        var id = (parentData!=undefined&&parentData!=null&&parentData.attr!=undefined)?parentData.attr.id:1;
                        var data = initTree(WEB_GLOBAL_CTX+"/console/security/organization/findJsonById/"+id,"",[3,4]);
                        callback(data);
                    }, 400);
                },
                multiSelect: true,
                cacheItems: true,
                folderSelect: false
            });
        }

//初始化fuelue树
function initTree(ajaxUrl, ajaxDataParam, initData) {
    //同步
    var temp_tree_data = {data:[]};
    $.ajax({
        async: false,
        cache: true,
        type: 'POST',
        url: WEB_GLOBAL_CTX + ajaxUrl,
        data: ajaxDataParam,
        error: function () {// 请求失败处理函数
            //$.scojs_message("更新失败,请重新登陆!", $ERROR);
        },
        success: function (result) {
            $(result.data).each(function () {
                var t = selectTreeOption(this,initData);
                temp_tree_data.data.push(t);
            });
        }
    });
    return temp_tree_data;
}
//下拉框选中
var item_data_icon = 'icon-item glyphicon fueluxicon-bullet';
var selected_item_data_icon= 'glyphicon icon-item glyphicon-ok';
var select_class_name = 'tree-selected';
function selectTreeOption(obj, initData) {
    var selected = "";//默认不选择
    //判断是否是已存储的选择
    obj.attr.dataIcon=item_data_icon;
    if (initData != undefined && initData != null && initData != "") {
        for(var i=0;i<initData.length;i++){
            if (initData[i] == obj.attr.id) {
                obj.attr.className = select_class_name;
                obj.attr.dataIcon=selected_item_data_icon;
                return obj
            }
        }
    }
    return obj;
}