dijit.form.filteringselect动态更改选项

时间:2011-04-18 18:10:37

标签: javascript dojo

我有一个dijit.form.FilteringSelect组件,我想动态更改选项。但我从dijit.form.FilteringSelect获取商店的商店属性;商店里没有setter功能。 (它可能是一个dojo.store.Reader)

那么如何更改dijit.form.FilteringSelect的选项呢?我应该直接用DOM更改吗?有没有办法更新dijit.form.FilteringSelect后面的商店?

3 个答案:

答案 0 :(得分:8)

dojo中有两种类型的数据存储:

  1. dojo.data.ItemFileReadStore - readonly datastore
  2. dojo.data.ItemFileWriteStore - 在dojo.data.api.Write上添加的ItemFileReadStore的扩展

    在您的情况下,您应该使用ItemFileWriteStore - 它提供了修改商店中数据的功能。

  3. E.g:

    您有多个国家/地区,并希望在过滤选择中使用它:

    [{
       abbr: 'ec',
       name: 'Ecuador',
       capital: 'Quito'
    },
    {
       abbr: 'eg',
       name: 'Egypt',
       capital: 'Cairo'
    },
    {
       abbr: 'et',
       name: 'Ethiopia',
       capital: 'Addis Ababa'
    }]
    

    首先,您需要为ItemFileWriteStore创建数据存储js-variable。

    <script>
       dojo.require("dojo.data.ItemFileWriteStore");
       dojo.require("dijit.form.FilteringSelect");
    
       var storeData = {
           identifier: 'abbr',
           label: 'name',
           items: //YOUR COUTRIES ARRAY
           }
    </script>
    

    下一步 - 在html标记中声明过滤select和itemFileWriteStore:

    <div dojotype="dojo.data.ItemFileWriteStore" data="storeData" jsid="countryStore"></div>
    <div dojotype="dijit.form.FilteringSelect" store="countryStore" searchattr="name" id="filtSelect"></div>
    

    最后在过滤选择中创建用于添加/删除/修改项目的特殊功能:

    添加新项目:

    function addItem() {
       var usa = countryStore.newItem({ abbr: 'us', name: 'United States', capital: 'Washington DC' });
    }
    

    我希望这一切都清楚。只有小注:“标识符”字段(在我们的例子中为“abbr”)在商店中必须是唯一的

    删除项目 - 例如删除所有名称为“United States of America”的项目

    function removeItem() {
    
       var gotNames = function (items, request) {
          for (var i = 0; i < items.length; i++) {
             countryStore.deleteItem(items[i]);
          }
       }
    
       countryStore.fetch({ query: { name: "United States of America" }, queryOptions: { ignoreCase: true }, onComplete: gotNames });   
    }
    

    如您所见,我创建了查询,在数据存储中查找名称==“美国”的项目。执行查询后,将调用函数“gotNames”。 function gotNames删除查询返回的所有项目。

    最后一项功能 - 编辑项目

    它类似于删除功能。只有一个区别:

    你应该使用itemFileWriteStore的setValue()方法来改变项目属性:

    countryStore.setValue(item, "name", newValue); 
    

    Here - page with working example

答案 1 :(得分:3)

我用这句话解决了同样的问题,希望它有助于某人。

对于 Dojo版本&lt; 1.7

dijit.byId('myId').store.root[{index of select}].innerText='New text';

dijit.byId('myId').store.root[{index of select}].value='New Value';

Dojo版本&gt; = 1.7

dijit.byId('myId').store.data[{index of select}].name='New Text';

dijit.byId('myId').store.data[{index of select}].value='New Value';

更改显示的文字(当前选定的)

dijit.byId('myId').textbox.value='New text';

您可以使用Firebug或其他调试控制台查看此属性。

答案 2 :(得分:0)

属性&#39; urlPreventCache:true,clearOnClose:true&#39;将强制重新加载商店

<div data-dojo-type="eco/dojo/data/ItemFileReadStore" data-dojo-props='url:"../json/GetClients", urlPreventCache:true, clearOnClose:true' data-dojo-id="clientStore" ></div>

<div id=proposalClient data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="store:clientStore, searchAttr:'clientName', required:'true', pageSize:'15'" ></div>

然后,在事件/回调/处理程序中,您需要/想要重置值,只需执行此操作

function func-name() {
    clientStore.url = "../json/GetClients?param=<your-new-search-conditions>";
    clientStore.close();
}