Je sais qu'il y a peut-être des questions similaires, mais je n'arrive toujours pas à trouver la réponse. Très approprié à quiconque peut m'aider.Dojo Grille recharger le fichier de données après un clic sur le bouton
Il y a 5 départements et chaque département a 4 produits. J'ai donc créé 5 boutons et 4 onglets, chaque onglet contient une grille. Par défaut, le département A est chargé, l'utilisateur peut changer d'onglet pour voir les informations sur les produits de ce département. En cliquant sur un autre bouton B, les informations du département B seront chargées dans les 4 onglets. Cliquez sur chaque bouton pour envoyer une requête ajax au code PHP, PHP va lire le fichier XML pour le calcul et écrire les données dans "data \ productA.json", "data \ productB.json", "data \ productC" Fichiers .json "," data \ productD.json ", par rapport au produit A au produit D pour ce département spécifique. Notez que le premier onglet lit toujours le fichier "data \ product A", quel que soit le bouton sur lequel vous avez cliqué, même chose pour les autres onglets.
Ensuite, le JavaScript lira le fichier "data \ product? .json" et présentera les données dans la grille.
Lorsque la page est chargée, les informations du premier département sont correctement chargées dans la grille. Cependant, si je change de département (cliquez sur le bouton), la grille ne rechargera pas les données des fichiers json.
Voici une partie 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);
}
}
Ma page d'index est comme:
<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>
Le fichier JSON ressemble:
{
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" }
]
}
Tout le monde peut aider, comment recharger le fichier généré par PHP sur la grille? Je vous remercie.