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

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

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

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

    <!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);
    })

我认为

这个链接有答案，你不把网格指向商店，你通过迭代商店中的相关子项来创建网格并添加项目

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

相关内容

最新更新

热门标签：