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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5707021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 18:04:37  来源:igfitidea点击:

dijit.form.filteringselect dynamically change options

javascriptdojo

提问by cn1h

I have a dijit.form.FilteringSelectcomponent 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组件,我想动态更改选项。但是我从 dijit.form.FilteringSelect 和它的 store 属性得到了商店;商店中没有设置器功能。(它可能是一个 dojo.store.Reader)

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?

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

回答by Andrei

there is two type of data store in dojo:

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

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

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

  1. dojo.data.ItemFileReadStore- 只读数据存储
  2. dojo.data.ItemFileWriteStore- 添加在 dojo.data.api.Write 上的 ItemFileReadStore 的扩展

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

E.g.:

例如:

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'
}]

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

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

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

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

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

下一步 - 在 html 标记中声明过滤选择和 itemFileWriteStore:

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

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

最后为过滤选择中的添加/删除/修改项目创建特殊功能:

Add New Item:

添加新项目:

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

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

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.

如您所见,我创建了查询,它在数据存储中查找名称 ==“美利坚合众国”的项目。执行查询后,将调用函数“gotNames”。函数 gotNames 删除查询返回的所有项目。

And last function - Edit Item

最后一个功能 - 编辑项目

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

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

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

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

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

Here - page with working example

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

回答by Rodrigo

I solved the same problem with this sentences, hope it helps someone.

我用这句话解决了同样的问题,希望对某人有帮助。

For Dojo version < 1.7

对于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';

For Dojo version >= 1.7

对于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';

To change displayed text (current selected)

更改显示的文本(当前选定的)

dijit.byId('myId').textbox.value='New text';

You can see this properties using Firebug or another debug console.

您可以使用 Firebug 或其他调试控制台查看此属性。

回答by Legna

the properties 'urlPreventCache:true, clearOnClose:true' will force the store to be reloaded

属性 '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>

and then, on event/callback/handler where you need/want to reset the values just do this

然后,在您需要/想要重置值的事件/回调/处理程序上执行此操作

function func-name() {
    clientStore.url = "../json/GetClients?param=<your-new-search-conditions>";
    clientStore.close();
}