[英]dijit.form.filteringselect dynamically change options
我有一个dijit.form.FilteringSelect
组件,我想动态更改选项。 但我从dijit.form.FilteringSelect获取商店的商店属性; 商店里没有setter功能。 (它可能是一个dojo.store.Reader)
那么如何更改dijit.form.FilteringSelect
的选项呢? 我应该直接用DOM更改吗? 有没有办法更新dijit.form.FilteringSelect
后面的商店?
dojo中有两种类型的数据存储:
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-variable。
<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:
<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”)在商店中必须是唯一的
删除项目 - 例如删除所有名称为“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”。 function gotNames删除查询返回的所有项。
最后一个功能 - 编辑项目
它类似于删除功能。 只有一个区别:
你应该使用itemFileWriteStore的setValue()
方法来改变item属性:
countryStore.setValue(item, "name", newValue);
我用这句话解决了同样的问题,希望对某人有所帮助。
对于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或其他调试控制台查看此属性。
属性'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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.