extjs 树数据库(使用数据库实现ExtJS树状结构)

介绍ext js 树数据库

Ext JS 树控件是一个强大而灵活的组件，允许您对大量数据进行分层和组织。它可以与许多不同类型的数据源一起使用，包括静态javascript 数组、JSON对象、XML数据和远程服务器 api。

数据库存储着许多数据。在现代web应用程序中，必须使用树控件以使用户能够快速找到需要的信息。Ext JS树控件可以帮助您更轻松地处理这些大块数据。

如何在 Ext JS中使用树控件

Ext JS提供了一种使用TreePanel类的简单方式，该类允许您使用内建的数据存储器或其他类型的数据存储器来加载数据。

首先，您需要指定一个数据源来填充树。您可以使用以下其中一种方式之一:

“tree”配置项 - 这是一种静态方式，只要Ext JS知道数据的形状和层次结构，就可以使用它来显示树结构。

自定义数据来源- 如果要使用内容详细信息的动态树，可以为TreePanel指定以下项目之一:

直接的数据源是以嵌套 JSON 对象呈现的：

var treedata = {
    text: 'Parent node',
    c++hildren: [
        {
            text: 'Child node 1'

        },
        {
            text: 'Child node 2'
        }
    ]
};
var treeStore = Ext.create('Ext.data.TreeStore', {
    root: treedata
});
var treePanel = Ext.create('Ext.tree.Panel', {
    store: treeStore,
    rootvisible: false
});

另一种选择是使用应用程序程序的数据源。下面显示的是使用远程数据源的示例。TreeGrid 元素使用的数据是从服务器返回的 JSON 对象。

Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'yourserverurl.php',
        reader: {
            type: 'json',
            root: 'data'
        }
    },
    root: {
        text: 'Root',
        expanded: true
    }
});

使用Ext JS 树控件进行搜索

使用Ext JS 树控件进行搜索是一件相当简单的事情。Ext JS提供了一组搜索方法，可以轻松地过滤出与搜索条件匹配的节点。

var tree = new Ext.tree.TreePanel({
    ...
});
Ext.define('NodesearchFilter', {
    extend: 'Ext.tree.plugin.TreeViewDragDrop',
 
    alias: 'plugin.nodeseachfilter',
    /**
? ? ?* Overriding the `beforedrop` method.
? ? ?*/
    beforedrop: function() {
        if(this.searchFilterinputEl) {
            /**
? ? ? ? ? ? * This is the?search box value
? ? ? ? ? ? */
            var searchQuery = this.searchFilterInputEl.getValue();
            /**
? ? ? ? ? ? ?* This will filter down the tree
? ? ? ? ? ? ?*/
            tree.filterBy(function(node) {
                return node.get('text').indexOf(searchQuery) >= 0;
            });
        }
        this.callParent(arguments);
    }
});