php - ExtJs 树存储和数据拉取

Question

我在数据库中的数据

目前我的 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'
        });
    });

我目前的结果看起来像这样

我的预期结果应该是

我从数据库中提取数据时出现问题。请帮我修复它，以便达到预期的格式。我相信我的 php 文件中需要修复。

Answer 1

好的，我看到了您的问题，您返回的 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 文件中。

Answer 2

生成必须馈送到 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;
    }