ExtJS的樹存儲和數據拉

enter image description here

目前我的PHP文件是從數據庫中像

 $data = array(); 

     $sql = "SELECT * FROM tree"; 

     $q = mysql_query($sql); 

     while ($r = mysql_fetch_array($q)) { 
      // check if have a child node       
      $qq = mysql_query("SELECT `id`, `text` FROM `tree` WHERE parent_id = '". $r['id'] ."'"); 

      if (mysql_num_rows($qq) > 0) { 
       // if have a child 
       $r['leaf'] = false; 
       $r['cls'] = 'folder'; 
      } else { 
       // if have no child 
       $r['leaf'] = true; 
       $r['cls'] = 'file'; 
      } 
      $data[] = $r; 

     }    


     echo json_encode($data); 
    ?> 
    <div id="tree_el"></div>

我的JavaScript讀取數據是

Ext.require([ 
     'Ext.tree.*', 
     'Ext.data.*', 
     'Ext.tip.*' 
    ]); 

    Ext.onReady(function() { 
     Ext.QuickTips.init(); 

     var store = Ext.create('Ext.data.TreeStore', { 
      proxy: { 
       type: 'ajax', 
       url: 'treegetdata.php' 
      }, 
      root: { 
       text: 'Eatables', 
       id: 'root_node', 
       expanded: true 
      }, 
      folderSort: true, 
      sorters: [{ 
       property: 'text', 
       direction: 'ASC' 
      }] 
     }); 

     var tree = Ext.create('Ext.tree.Panel', { 
      store: store, 
      renderTo: 'tree_el', 
      height: 300, 
      width: 250, 
      title: 'Eatables' 
     }); 
    });

我目前的結果看起來像這樣

enter image description here

我預期的結果應該是

enter image description here

有問題，而我拉從數據庫中的數據。請幫我修復它，以便達到預期的格式。我相信這個修復程序在我的php文件中是必需的。

來源

2012-11-23 Some Java Guy

看不到您當前的結果。 –

@JohanHaest添加圖片 –

這將是非常低效的。更好地一次獲取所有結果，並對結果使用遞歸算法生成樹。不應該多次查詢分貝。 –

好的，我看到你的問題，你返回的JSON格式是錯誤的。如果您希望孩子在你需要真正讓他們回到了父母的孩子們收集這樣的家長：

{ 
    children: [{ 
     name: 'Eatables', 
     children: [{ 
      name: 'Fruits', 
      children: [...] 
     }, { 
      name: 'Vegetables' , 
      children: [...] 
     }] 
    }] 
}

這是你給返現：

[{ 
    name: 'Apples', 
    leaf: false, 
    cls: 'folder' 
},{ 
    name: 'Eatables', 
    leaf: false, 
    cls: 'folder' 
},{ 
    name: 'Fruits', 
    leaf: false, 
    cls: 'folder' 
},{ 
    name: 'Vegetables', 
    leaf: false, 
    cls: 'folder' 
},{ 
    name: 'Gala apples', 
    leaf: false, 
    cls: 'file' 
}, .... 
]

所以這ExtJS將它們全部視爲1級節點非常合乎邏輯。而不是多層次。

問題的確在於PHP文件。

來源

2012-11-23 09:58:12

生成必須送入extjs的樹時存在邏輯錯誤。我不知道PHP，所以我會寫javascript：

function getTree() 
{ 
    var tree, list = [], root, result = []; // fetch list from database 
    tree = {text : root.name}; 
    result.push(createTreeStructur(tree, root, list)); 
    return result; 
} 
    //tree = holder of data, root = parent in each recursive call, list = complete list from database 
    function createTreeStructure(tree, root, list) { 
     var i=0, ln = children.length, result = [], child, childList = [], temptree = {}; 
     var children = getChildren(root, list); //Fetch children 
     for(i=0, i<ln;i++) 
     { 
      child = children[i]; 
      tree = []; 
      if(getChildren(child, list).length===0) //If no children of child exist 
      { 
      temptree = {name : child.name, leaf : true}; 
      childList.push(temptree); 
      tree["children"] = childList; // Add child as child of the passed parent 
      } 
      else 
      { 
      temptree = {name : child.name, leaf : false}; 
      childList.push(temptree); 
      tree["children"] = childList; 
      createTreeStructure(temptree, child, list); // Recursively create tree structure for the child since children exist. 
      } 
     } 
     result.push(tree); 
     return result; 
    } 

    function getChildren(root, list) 
    { 
     var i=0, ln = list.length, result = []; 
     for(i=0, i<ln;i++) 
     { 
      if(root.id===list[i].parent) 
      { 
      result.push(list[i]); 
      } 
     } 
     return result; 
    }

來源

2012-11-23 15:28:55

ExtJS的樹存儲和數據拉

回答

相關問題