fuelux-tree API 實例

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;
}