dijit.form.filteringselect 动态更改选项

Question

我有一个 dijit.form.FilteringSelect 组件，我想动态更改选项。但是我从 dijit.form.FilteringSelect 的 store 属性中获取 store；store 中没有 setter 函数。(它可能是一个 dojo.store.Reader)

那么我该如何更改 dijit.form.FilteringSelect 的选项呢？我应该直接使用 DOM 更改吗？是否有任何方法可以更新 dijit.form.FilteringSelect 后面的 store 呢？

- cn1h

Answer 1

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

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

2. dojo.data.ItemFileWriteStore - ItemFileReadStore的扩展，添加了dojo.data.api.Write的功能

   在您的情况下，应使用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' });
}

我希望这里一切都清楚了。只有一个小提醒：在存储中，“标识符”字段（在我们的情况下为“abbr”）必须是唯一的。

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

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); 

这里 - 有工作示例的页面

此页面提供了一个可行的示例。

- Andrei

---

荒谬。你会认为你可以做这样的事情：dijit.byId('element').store.load([键值对数组]) - user1086498

Answer 2

我用以下方法解决了相同的问题，希望能对某些人有所帮助。

对于Dojo版本小于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 版本 >= 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或其他调试控制台查看这些属性。

- Rodrigo

---

这不是一个适当的实现！不要直接修改存储值！ - GuyT

Answer 3

属性'urlPreventCache:true, clearOnClose:true'将强制重新加载存储

<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();
}

- Legna