在Spring MVC環境中使用dijit.filteringselect

我想編寫兩個過濾選擇，它們都應根據輸入到任何窗體中的數據進行更改。在Spring MVC環境中使用dijit.filteringselect

因此，輸入到fs1中的數據應觸發fs2中的更改。輸入到fs2中的數據應觸發fs1中的更改。

我在一個春天的環境，在我的情況下，這意味着dojo代碼在一個jsp文件中，並且篩選選擇字段通過服務器端的Controller類使用@ModelAttribute註釋填充以使數據可用作爲變量在jsp文件中。

我在Java方面有關係數據，所以它可以通過控制器。

這是什麼使我困惑的時刻。

我是新來Dojo和對道場支持網站上的文檔是有點難以把握我。我希望看到一個概念清單，說明如何加入並連接我的過濾選擇的獨立商店。
當其中一個篩選選項發生更改時，如何通知控制器類更改併發送篩選中剩餘的數據？

這個問題也可以被解讀爲：我怎樣才能調用一個方法，輸入參數保存編輯的過濾選擇中可用的數據？

來源

2010-02-11 Kalle

我建議我們兩個的增量部分這方面的工作：

獲取第一FilteringSelect的onChange事件工作
線起來使用服務器數據存儲

下面的代碼樣本採用了Dojo校區的「codependent FilteringSelect」示例並將其簡化爲使其數據存儲位於本地。它顯示瞭如何以編程方式實例化兩個FilteringSelects，第二個依賴於第一個onChange事件處理程序。

你可以請嘗試運行它，讓我知道如果你得到它的工作？

當我們第一次觸發第一個FilteringSelect過濾時，我將編輯以添加關於如何將其轉換爲使用服務器端數據存儲的解釋。

xmlns:springform="http://www.springframework.org/tags/form"

樣品形式：

<springform:form action="#" > 
    <label for="country">Country:</label> 
    <springform:select id="country" path="country" items="${countryList}" itemLabel="country" itemValue="id"/> 
    <div id="citySelectDiv"></div> 
</springform:form>

JavaScript代碼：

<script type="text/javascript"> 
      <![CDATA[ 
       dojo.require("dojo.parser"); 
       dojo.require("dojo.data.ItemFileReadStore"); 

       function countryChanged(dataFromServer){ 
        //convert json to dojo filteringSelect options 
        var options = { 
          identifier: 'id', 
          label: 'city', 
          items: dataFromServer 
         }; 
        var cityStore =new dojo.data.ItemFileReadStore({data : options});         
        // create Select widget, populating its options from the store 
        if (!dijit.byId("citySelectDiv")) { 
         //create city selction combo 
         new dijit.form.FilteringSelect({ 
          name: "citySelectDiv", 
          store: cityStore, 
          searchAttr : "city", 
         }, "citySelectDiv");  
        }else{ 
         //if already created the combo before 
         dijit.byId('citySelectDiv').set('value',null); 
         dijit.byId('citySelectDiv').store = cityStore; 
        } 
       } 



       Spring.addDecoration(new Spring.ElementDecoration({ 
        elementId : "country", 
        widgetType : "dijit.form.FilteringSelect", 
        widgetAttrs : { 
         promptMessage: "Select a Country", 
         required : true, 
         onChange : function(){        
         var xhrArgs = { 
          url: "ajax/country/" +dijit.byId('country').get('value'), 
          handleAs: 'json', 
          load: function(dataFromServer) { 
           countryChanged(dataFromServer); 
          }        
         }; 
         //make the ajax call 
         dojo.xhrGet(xhrArgs); 

         }       
        } 
       }));

樣品控制器方法：

<html> 
<head> 
<title>Test File</title> 
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/> 
</head> 
<body class="tundra"> 

<label for="state">State:</label> 
<input id="state"> 

<label for="city">City:</label> 
<input id="city"> 

<script type="text/javascript" src="dojo/dojo.js" 
     djConfig="isDebug: true, parseOnLoad: true"></script> 
<script type="text/javascript"> 
dojo.require("dijit.form.FilteringSelect"); 
dojo.require("dojo.data.ItemFileReadStore"); 

    dojo.addOnLoad(function() { 
     var cityJson = { 
      label: 'name', 
      items: [{ name: 'Albany', state: 'NY' }, 
        { name: 'New York City', state: 'NY' }, 
        { name: 'Buffalo', state: 'NY' }, 
        { name: 'Austin', state: 'TX' }, 
        { name: 'Houston', state: 'TX' }] 
      }; 
     var stateJson = { 
      identifier: 'abbreviation', 
      label: 'name', 
      items: [ { name: 'New York', abbreviation: 'NY' }, 
        { name: 'Texas', abbreviation: 'TX' } ] 
      }; 

     new dijit.form.ComboBox({ 
      store: new dojo.data.ItemFileReadStore({ 
       data: cityJson 
      }), 
      autoComplete: true, 
      query: { 
       state: "*" 
      }, 
      style: "width: 150px;", 
      required: true, 
      id: "city", 
      onChange: function(city) { 
       dijit.byId('state').attr('value', (dijit.byId('city').item || { 
        state: '' 
       }).state); 
      } 
     }, 
     "city"); 

     new dijit.form.FilteringSelect({ 
      store: new dojo.data.ItemFileReadStore({ 
       data: stateJson 
      }), 
      autoComplete: true, 
      style: "width: 150px;", 
      id: "state", 
      onChange: function(state) { 
       dijit.byId('city').query.state = state || "*"; 
      } 
     }, 
     "state"); 
    }); 
</script> 

</body> 
</html>

來源

2010-02-11 15:36:43 Abboq

在jsp的名稱空間

@ResponseBody 
    @RequestMapping("/ajax/country/{country}") 
    public List<City> clientSelection(@PathVariable("country") String country) { 
     log.info("Country = {} ",country);  
     return cityService.findCitiesByCountry(country); 
    }

來源

2012-01-13 15:39:21 fmucar

在Spring MVC環境中使用dijit.filteringselect

回答

相關問題