dijit.tree 和 dojox.grid 的 dojo.data-store 相同答案

【问题标题】：Same dojo.data-store for dijit.tree and dojox.griddijit.tree 和 dojox.grid 的 dojo.data-store 相同
【发布时间】：2011-05-19 08:45:21
【问题描述】：

我想实现一种文件浏览器，用户可以在其中使用文件夹树进行导航，并在网格中查看文件夹内容。

我想为两个小部件使用相同的数据存储，但看不到如何实现这一点 - 树需要带有例如一个孩子属性，网格只需要那些孩子。
因为可能是一个巨大的数据集，我打算使用 jsonreststore。

【问题讨论】：

标签： dojox.grid dojo

【解决方案1】：

我正在尝试这个，并得到了一个这样的解决方案，请注意网格和树正在使用相同的商店。。这里要注意的是，如果文件夹的 id 为 fld1，那么该文件夹下的所有文件都应该具有像“fld1f1”、“fld1f2”这样的 id 模式。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

<head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <script src="djlib/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/Grid.css"/>
    <link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/claroGrid.css"/>
</head>
<body class=" claro ">
    <div id="treeOne"></div>
    <div id="gridHolder" style="height:500px"></div>
</body>
<script type="text/javascript">
    s =[];
    dojo.require("dijit.tree.ForestStoreModel");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");     
    dojo.require("dojox.grid.DataGrid");


    dojo.addOnLoad(function(){          
        baseStore = new dojo.data.ItemFileReadStore({
            data:{
                identifier: 'id',
                label: 'name',
                items: [                        

                    {id:'fld1',name:'folder 1', type:"folder", files:[{_reference:'fld1f1'},{_reference:'fld1f2'}]},
                    {id:'fld1f1',name:'file 1 of folder 1', type:"file", size:'1KB', dateLstMod:'15/15/2001'},
                    {id:'fld1f2',name:'file 2 of folder 1', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
                    {id:'fld2',name:'folder 2', type:"folder", files:[{_reference:'fld2f1'},{_reference:'fld2f2'}]},
                    {id:'fld2f1',name:'file 1 of folder 2', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
                    {id:'fld2f2',name:'file 2 of folder 2', size:'1KB', type:"file",dateLstMod:'15/15/2001'},
                    {id:'fld3',name:'folder 3', type:"folder"}
                ]
            }
        });     

        treeModel = new dijit.tree.ForestStoreModel({
            store: baseStore,
            query:{
                type:'folder'
            },
            rootId: "root",
            rootLabel: "List of folders on this drive",
            childrenAttrs:['files']
        })

        t = new dijit.Tree({
            model: treeModel                
        },"treeOne")

        dojo.connect(t,'onClick', function(item, node, evt){                
            if(node.isExpandable){
                updateGrid(baseStore.getValues(item,"id"));                 
            }
        })          
        function updateGrid(folderId){              
            grid.filter({
                type:'file' , id:folderId+'*'
            },true);
        }                   
        var gridStr = [{
            cells:[
                [
                    { field: "name", name: "File Name", width: 'auto' },
                    { field: "size", name: "Size", width: 'auto'},
                    { field: "dateLstMod", name: "Date Last Modified", width: 'auto'}                           
                ]
            ]
        }]          
        grid = new dojox.grid.DataGrid({
            store:baseStore,                
            structure: gridStr,             
            noDataMessage:"NO DATA"
        }, 'gridHolder');           
        grid.startup();
        grid.filter({
                type:'filee'
        },true);
    })

【讨论】：

【解决方案2】：

我认为这个链接有答案，您不要将网格指向商店，而是创建网格并通过迭代商店中的相关子项来添加项目

http://groups.google.com/group/dojo-interest/browse_thread/thread/af7265b19edeeb0/9fee8b5498746dd8

【讨论】：