我的页面中有一个组合框和一个数据网格。当用户更改组合框值时,我必须使用新选择的父项的子项详细信息更新网格。如何使用Dojo组合框和datagrid实现此目的。
以下代码段不适合我。当我在网格上使用setStore方法时使用新的json数据。
<div dojoType="dojo.data.ItemFileReadStore" jsId="store" url="/child/index/"></div> // grid store
<div dojoType="dojo.data.ItemFileReadStore" jsId="parentStore" url="/parent/index/"></div> // combo box store
//组合框
<input dojoType="dijit.form.ComboBox" value="Select" width="auto" store="parentStore" searchAttr="name" name="parent" id="parent" onchange="displayChildren()">
// MY GRID
<table dojoType="dojox.grid.DataGrid" jsId="grid" store="store" id="display_grid"
query="{ child_id: '*' }" rowsPerPage="2" clientSort="true"
singleClickEdit="false" style="width: 90%; height: 400px;"
rowSelector="20px" selectionMode="multiple">
<thead>
<tr>
<th field="child_id" name="ID" width="auto" editable="false"
hidden="true">Text</th>
<th field="parent_id" name="Parent" width="auto"
editable="false" hidden="true">Text</th>
<th field="child_name" name="child" width="300px" editable="false">Text</th>
<th field="created" name="Created Date" width="200px"
editable="false" cellType='dojox.grid.cells.DateTextBox'
datePattern='dd-MMM-yyyy'></th>
<th field="last_updated" name="Updated Date" width="200px"
editable="false" cellType='dojox.grid.cells.DateTextBox'
datePattern='dd-MMM-yyyy'></th>
<th field="child_id" name="Edit/Update" formatter="fmtEdit"></th>
</tr>
</thead>
</table>
//父组合框的onchange方法,我试图用服务器中的新数据重新加载网格。
function displayChildren() {
var selected = dijit.byId("parent").attr("value");
var grid = dojo.byId('display_grid');
var Url = "/childsku/index/parent/" + selected;
grid.setStore(new dojo.data.ItemFileReadStore({ url: Url }));
}
但它没有用新内容更新我的网格。每次用户更改组合框值时,我都不知道如何刷新网格。
如果我获得ItemFileReadStore和ItemFileWrireStore的解决方案,我会很高兴。
答案 0 :(得分:3)
我认为您错过了 fetch()步骤。以下是我对事件处理程序进行编码的方法:
function displayChildren() {
var selected = dijit.byId("parent").attr("value");
var store = new dojo.data.ItemFileWriteStore({ // Read or Write, no difference
url: "/childsku/index/parent/" + selected
});
// Fetch the grid with the data
store.fetch( {
query : {},
onComplete : function(items, request) {
var grid = dojo.byId('display_grid');
if (grid.selection !== null) {
grid.selection.clear();
}
grid.setStore(store);
},
error: function(message, ioArgs) { alert(message+"\nurl: "+ioArgs.url); }
});
}