Dojo Grid 在按钮单击时重新加载数据文件

Question

我知道那里可能有类似的问题，但我仍然找不到答案。非常适合任何可以帮助我的人。

有5个部门，每个部门有4个产品。所以我创建了 5 个按钮和 4 个选项卡，每个选项卡都包含一个网格。默认加载部门A，用户可以切换标签查看该部门的不同产品信息。通过单击另一个按钮 B，部门 B 的信息将加载到所有 4 个选项卡。

点击每个按钮都会向后端PHP代码发送一个ajax请求，PHP会读取XML文件做计算并将数据写入“data\productA.json”、“data\productB.json”、“data\productC. json" , "data\productD.json" 文件，针对特定部门的产品 A 到产品 D。请注意，无论您单击哪个按钮，第一个选项卡始终从“data\product A”文件中读取，其他选项卡也是如此。

然后，JavaScript 将从“data\product?.json”文件中读取数据并在网格中显示数据。

页面加载时，第一个部门的信息会正确加载到网格中。但是，如果我切换到另一个部门（单击按钮），网格将不会从 json 文件中重新加载数据。

这里是JS部分：

dojo.addOnLoad(function() {
    //init the first main column when load the page.
    getDepartmentA();
    var layout = [[
        new dojox.grid.cells.RowIndex({ width: 5 }),
        {name: 'Name', field: 'name'},
        {name: 'Count', field: 'count'},
        {name: 'Percent', field: 'percent'}
    ]];
    var store = new dojo.data.ItemFileReadStore( { url: "data/productA.json" } );
    var grid = new dojox.grid.DataGrid( { store: store, rowsPerPage: 200, style: "height:600px; width:874px;", structure: layout}, 
                                            dojo.byId("grid1"));
    grid.startup();
    dojo.connect( dijit.byId("column3"),"onShow", dojo.partial( createGrid, "3")  );
    dojo.connect( dijit.byId("column4"),"onShow", dojo.partial( createGrid, "4")  );
    dojo.connect( dijit.byId("column5"),"onShow", dojo.partial( createGrid, "5")  );
});

function getDepartmentA() {
    dojo.xhrGet( {      
        url: "department_A_process.php",
        handleAs: "json",
        load: function(response) {
            var tempgrid = grids[0];
            var tempresponse = eval("("+response+")");
            var tempstore = new dojo.data.ItemFileReadStore({url: "data/productA.json" }); //updated store!
            var tempModel = new dojox.grid.data.DojoData(null, tempstore, {query:{productName:'*'}, clientSort: true});
            tempgrid.setaModel(tempModel);
            tempgrid.refresh();
            console.dir(response);  // Dump it to the console
        }   
     });
}

function createGrid( id ) {
    console.log("Calling createGrid function now!");
    var layout = [[
        new dojox.grid.cells.RowIndex({ width: 5 }),
        {name: 'Name', field: 'name'},
        {name: 'Count', field: 'count'},
        {name: 'Percent', field: 'percent'}
    ]]; 
    if (! grids[id] ) {
        if (id =="1"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productA.json" } );
            console.log( "I am in tab1");               
        } else if (id =="3"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productB.json" } );
            console.log( "I am in tab3");
        } else if (id =="4"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productC.json" } );
            console.log( "I am in tab4");           
        } else if (id =="5"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productD.json" } );
            console.log( "I am in tab5");

        }
        var grid = new dojox.grid.DataGrid( { store: store, rowsPerPage: 200, style: "height:600px; width:874px;", structure: layout}, 
                                                dojo.byId("grid" + id ));
        grid.startup();
        grids[id] = grid;
        console.log( grid );
    }
}

我的索引页面是这样的：

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" doLayout="false">
    <div id="column1" dojoType="dijit.layout.ContentPane" title="Label by Brand" selected="true">
        <h1>Label by Brand</h1>
        <div class="partsContainer">
            <div id="grid1" class="gridContainer">
            </div>
        </div>
    </div>

    <div id="column3" dojoType="dijit.layout.ContentPane" title="Session Types">
        <h1>Session Types</h1>
        <div class="partsContainer">
            <div id="grid3" class="gridContainer">
            </div>
        </div>
    </div>

    <div id="column4" dojoType="dijit.layout.ContentPane" title="Labels by Session">
        <h1>Labels by Session</h1>
        <div class="partsContainer">
            <div id="grid4" class="gridContainer">
            </div>
        </div>
    </div>

    <div id="column5" dojoType="dijit.layout.ContentPane" title="Monthly Report">
        <h1>Monthly Report</h1>
        <div class="partsContainer">
            <div id="grid5" class="gridContainer">
            </div>
        </div>
    </div>
</div>

JSON 文件如下所示：

{
    identifier: "productName", 
    label: "productName",
    items:  [                            
                { "productName" : "p1", "count" : 3362, "percent" : "32.8" },
                { "productName" : "p2", "count" : 421, "percent" : "4.1" },
                { "productName" : "p3", "count" : 526, "percent" : "5.1" },
                { "productName" : "p4", "count" : 1369, "percent" : "13.4" },
                ...
                { "productName" : "Total", "count" : 10242, "percent" : "100" }
            ]
}

任何人都可以帮忙，如何将PHP生成的文件重新加载到网格中？谢谢。

Answer 1

我在您的代码中没有看到任何涉及按钮或为商店请求新数据的代码...

要解决您的问题，请尝试将 clearOnClose:true 添加到您的商店初始化中。您可能还需要 urlPreventCache:true。 Firebug 或任何类型的网络监视器会告诉您是否需要这样做。 当按下按钮时，获取每个网格的存储引用并调用 store.close() 然后 store.fetch()。这应该通过刷新存储中的数据来完成您正在寻找的内容。在此之后，可能需要调用 grid.render() 或类似的东西。

我应该在这里注意一件事，只是为了避免您以后可能会头疼：除非您对目录结构和安全措施有某种类型的用户哈希，否则您的 PHP 的行为方式是为每个文件创建一组文件部门可能会导致多用户支持问题和安全问题，您可以在其中读取其他人的 JSON 响应。

在这里找到信息：http://livedocs.dojotoolkit.org/dojo/data/ItemFileReadStore。搜索 clearOnClose 以查找大致区域以查找信息。