dijit.form.filteringselect dynamically change options

前端 未结 3 1760
旧巷少年郎
旧巷少年郎 2021-01-13 22:18

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 stor

3条回答
  •  走了就别回头了
    2021-01-13 22:50

    there is two type of data store in 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.

    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.

    
    

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

    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.

    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:

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

    Here - page with working example

提交回复
热议问题