javascript - dijit.form.filteringselect 动态更改选项

我有一个 dijit.form.FilteringSelect 组件，我想动态更改选项。但是我从 dijit.form.FilteringSelect 和它的 store 属性得到了商店；商店中没有 setter 功能。 (它可能是一个 dojo.store.Reader)

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

最佳答案

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

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

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 变量。

<script>
   dojo.require("dojo.data.ItemFileWriteStore");
   dojo.require("dijit.form.FilteringSelect");

   var storeData = {
       identifier: 'abbr',
       label: 'name',
       items: //YOUR COUTRIES ARRAY
       }
</script>

下一步 - 在 html 标记中声明过滤选择和 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' });
}

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

删除项目 - 例如删除所有名为“美利坚合众国”的项目

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”。
函数 gotNames 删除查询返回的所有项目。

最后一个功能 - 编辑项目

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

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

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

Here - page with working example

关于javascript - dijit.form.filteringselect 动态更改选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5707021/