Я знаю, что, возможно, есть похожие вопросы, но я до сих пор не могу найти ответ. Очень подходит любому, кто может мне помочь.
Есть 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, в сетку? Спасибо.