dijit.form.filteringselect动态更改选项

Question

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

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

Answer 1

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

1. dojo.data.ItemFileReadStore - 只读数据存储区

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

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

例如:

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

[{
   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删除查询返回的所有项.

最后一个功能 - 编辑项目

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

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

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

这里 - 带有工作示例的页面