单击按钮后 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以了解大致区域以查找信息。