топливное дерево с динамическим источником данных

Question

Я использую плагин топливного дерева для бутстрапа. если данные жестко (как показано ниже) дерево появляется правильно

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: 400 
}); 

, пожалуйста, помогите мне знать, как я могу установить источник данных динамически вызова службы (AJAX вызова). У меня есть служба, которая возвращает строку json.

var treeDataSource = new DataSource({ 
     data: //how to pull data from service call 
    }); 

Ниже полный фрагмент кода

$(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); 
     }); 
    }); 

Answer 1

Вот вспомогательный метод, который был представлен в рамках Ace Администратор Web App я использую .. делает его очень проста в использовании:

  //IN YOUR DOCUMENT.READY() 

      var DataSourceTree = function (options) { 
       this.url = options.url; 
      } 

      DataSourceTree.prototype.data = function (options, callback) { 
       var self = this; 
       var $data = null; 

       var param = null 

       if (!("name" in options) && !("type" in options)) { 
        param = 0;//load the first level 
       } 
       else if ("type" in options && options.type == "folder") { 
        if ("additionalParameters" in options && "children" in options.additionalParameters) { 
         param = options.additionalParameters["id"]; 
        } 
       } 

       if (param != null) {      
        $.ajax({ 
         url: this.url, 
         data: 'id=' + param, 
         type: 'POST', 
         dataType: 'json', 
         success: function (response) { 
          if (response.status == "OK") 
           callback({ data: response.data }) 
         }, 
         error: function (response) { 
          //console.log(response); 
         } 
        }) 
       } 
      }; 

    $('#[YOURTREEVIEWID]').tree({ 
      dataSource: new DataSourceTree({ url: '[PATH TO SERVICE]' }), 
      multiSelect: false, 
      loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>', 
      'open-icon': 'icon-minus', 
      'close-icon': 'icon-plus', 
      'selectable': true, 
      'selected-icon': 'icon-ok', 
      'unselected-icon': 'icon-remove' 
     }); 

выборочные данные должны быть возвращены что-то вроде этого:

{"status":"OK"," 
    data":[ 
      {"id":1,"name":"label 1","type":"folder","additionalParameters":  
         {"id":1,"children":true,"itemSelected":false}}, 
      {"id":2,"name":"label 2","type":"item","additionalParameters":   
        {"id":2,"children":false,"itemSelected":false}}, 
      {"id":3,"name":"label 3","type":"item","additionalParameters":  
        {"id":3,"children":false,"itemSelected":false}} 
      ]}