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

<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