在组合框值更改时更新/打印具有新存储值的dojo datagrid [英] updating/refereshing dojo datagrid with new store value on combobox value changes

问题描述

我的页面中有一个组合框和一个数据网格。当用户更改组合框值时，我必须更新具有新选择的父项的子节点的网格。如何使用Dojo组合框和datagrid来实现这一点。

以下代码片段对我而言不起作用。当我使用新的json数据的网格上的setStore方法。

 < div dojoType =dojo.data.ItemFileReadStorejsId =storeurl =/ child / index />< / div> // grid store 
 
< div dojoType =dojo.data.ItemFileReadStorejsId =parentStoreurl =/ parent / index />< / div> //组合框存储
  

//组合框

 < input dojoType =dijit.form.ComboBoxvalue =Selectwidth =autostore =parentStoresearchAttr =namename =parentid =parentonchange =displayChildren（）> 
  

// MY GRID

 < table dojoType =dojox.grid.DataGridjsId =gridstore =storeid =display_grid
 query ={child_id：'*'}rowsPerPage =2clientSort =true
 singleClickEdit =falsestyle =width：90％; height：400px; 
 rowSelector =20pxselectionMode =multiple> 
< thead> 
< tr> 
< th field =child_idname =IDwidth =autoeditable =false
 hidden =true> Text< / th& 
< th field =parent_idname =Parentwidth =auto
 editable =falsehidden =true> Text< / th& 
< th field =child_namename =childwidth =300pxeditable =false> Text< / th> 
< th field =createdname =创建日期width =200px
 editable =falsecellType ='dojox.grid.cells.DateTextBox'
 datePattern =' DD-MMM-YYYY'>< /第> 
< th field =last_updatedname =Updated Datewidth =200px
 editable =falsecellType ='dojox.grid.cells.DateTextBox'
 datePattern =' DD-MMM-YYYY'>< /第> 
< th field =child_idname =编辑/更新formatter =fmtEdit>< / th> 
< / tr> 
< / thead> 
< / table> 
  

//父组合框的onchange方法，我试图用新数据重新加载网格服务器。

  function displayChildren（）{
 var selected = dijit.byId（parent）。attr 值）; 
 var grid = dojo.byId（'display_grid'）; 
 var Url =/ childsku / index / parent /+ selected; 
 grid.setStore（new dojo.data.ItemFileReadStore（{url：Url}））; 
} 
  

但是它没有用新的内容更新我的网格。每当用户更改组合框值时，我都不知道如何刷新网格。

任何人都可以帮我解决这个问题...

如果我会很高兴获取ItemFileReadStore和ItemFileWrireStore的解决方案。

谢谢

>

解决方案

我想你缺少 fetch（）步骤。这是我如何编写你的事件处理程序：

  function displayChildren（）{
 var selected = dijit.byId 父）ATTR（ 值）。 
 var store = new dojo.data.ItemFileWriteStore（{//读取或写入，无差异
 url：/ childsku / index / parent /+ selected 
}）; 
 //使用数据获取网格
 store.fetch（{
 query：{}，
 onComplete：function（items，request）{
 var grid = dojo.byId（'display_grid'）; 
 if（grid.selection！== null）{
 grid.selection.clear（）; 
} 
 grid.setStore（store ）; 
}，
错误：function（message，ioArgs）{alert（message +\\\
url：+ ioArgs.url）;} 
}）; 
} 
  

I have a combo box and a datagrid in my page. when the user changes the combo box value i have to update the grid with children details of newly selected parent. How can I achieve this using Dojo combo box and datagrid.

the following code snippet not working for me. when I use setStore method on the grid with new json data.

<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

//combo box

<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 method of parent combo box in which i am trying to reload the grid with new data from the server.

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 }));
            }

But its not updating my grid with new contents. I don know how to refresh the grid every time users changes the combo box value.

Could anyone help me to solve this issue...

I would be glad if I get the solution for both ItemFileReadStore and ItemFileWrireStore.

Thanks

Raj..

解决方案

I think you're missing the fetch() step. Here is how I would code your event handler:

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); }
    });
}

这篇关于在组合框值更改时更新/打印具有新存储值的dojo datagrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！