Question

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

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

点击每个按钮会向后端发送一个ajax请求PHP代码，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的大致区域以查找信息。

按钮单击后，Dojo Grid重新加载数据文件

1 个答案: