dijit.form.filteringselect动态更改选项 [英] dijit.form.filteringselect dynamically change options

问题描述

我有一个 dijit.form.FilteringSelect 组件，我想动态更改选项。但是我从dijit.form.FilteringSelectwith它的商店财产获得商店;商店中没有设定器功能。 （它可能是一个dojo.store.Reader）

I have a dijit.form.FilteringSelect component and I want to change the options dynamically. But I get the store from the dijit.form.FilteringSelectwith its store property; there is no setter function in the store. (It may be a dojo.store.Reader)

那么如何更改 dijit.form.FilteringSelect ？我应该直接使用DOM进行更改吗？有没有办法更新 dijit.form.FilteringSelect 之后的商店？

So how can I change the option of dijit.form.FilteringSelect? Should I change it directly with DOM? Is there any way to update the store behind dijit.form.FilteringSelect?

推荐答案

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

there is two type of data store in dojo:

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



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

1. dojo.data.ItemFileReadStore - readonly datastore

2. dojo.data.ItemFileWriteStore - extension of ItemFileReadStore that adds on the dojo.data.api.Write

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

In your case, you should use ItemFileWriteStore - it provides functions for modifying data in store.

例如：

您有多个国家/地区，您希望在过滤选项中使用它：

You have array of countries and you want to use it in filtering select:

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

首先，您将需要为ItemFileWriteStore创建数据存储js变量。

First of all you will need to create data store js-variable for ItemFileWriteStore.

<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：

Next step - declare filtering select and itemFileWriteStore in html markup:

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

最后在过滤中创建添加/删除/修改项目的特殊功能select：

And finally create special functions for add/delete/modify items in filtering select:

添加新项目：

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

我希望这一切都很清楚。只有小笔记：标识符字段（在我们的例子中为abbr）在商店中必须是唯一的

I hope here is all clear. Only small note: "identifier" field ("abbr" in our case) must be unique in store

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

Delete Items - e.g. removing all items with name "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。
函数gotNames删除查询返回的所有项目。

As you can see i have created query, that finds items with name == "United States of America" in data store. After the query is executed, function "gotNames" will be called. function gotNames removes all items that query return.

最后一个功能 - 编辑项目

And last function - Edit Item

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

it is similar to the delete function. only one difference:

您应该使用itemFileWriteStore的 setValue（）方法来更改项目属性：

you should use setValue() method of itemFileWriteStore for changing item property:

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

这里 - 具有实例的页面

这篇关于dijit.form.filteringselect动态更改选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！