Utilisation de dijit.filteringselect dans un environnement Spring MVC

J'essaie de coder deux filtres qui doivent tous deux changer en fonction des données saisies dans l'un des formulaires. Donc, les données entrées dans fs1 devraient déclencher des changements dans fs2. Les données entrées dans fs2 devraient déclencher des changements dans fs1.Utilisation de dijit.filteringselect dans un environnement Spring MVC

Je suis dans un environnement printanier qui dans mon cas signifie que le code dojo est dans un fichier jsp et les champs de sélection de filtrage sont remplis par une classe Controller du côté serveur en utilisant les annotations @ModelAttribute pour rendre les données disponibles en tant que variable dans le fichier jsp.

J'ai les données de relation du côté Java donc il est disponible via le contrôleur.

Voici ce qui m'embrouille pour le moment. Je suis nouveau à DOJO et la documentation sur le site de support DOJO est un peu difficile à saisir pour moi. Je voudrais voir une liste conceptuelle de ce qui est nécessaire pour accopMplish et connecter les magasins séparés de mes filtersingselects.

En cas de modification de l'un des filtres, comment informer la classe de processeurs des modifications et envoyer les données qui restent dans la sélection de filtre? Cette question pourrait également être lue comme: comment puis-je appeler une méthode avec des paramètres d'entrée qui contiennent les données disponibles dans la sélection filtrée éditée?

Source

2010-02-11 Kalle

Je suggère que nous travaillons sur ce en deux parties supplémentaires:

Obtenez le premier événement de onChangeFilteringSelect travail
Fil-les à utiliser les banques de données du serveur

Le code suivant sample prend l'exemple codependent FilteringSelect de Dojo Campus et le simplifie pour que ses banques de données soient locales. Il montre comment instancier par programme deux FilteringSelects avec le second dépendant de la première par un gestionnaire d'événements onChange.

Pouvez-vous s'il vous plaît essayer de l'exécuter et laissez-moi savoir si vous le faites fonctionner?

Une fois que nous aurons votre premier filtrage de déclenchement FilteringSelect sur le second, je vais modifier pour ajouter une explication sur la façon de les convertir pour utiliser les banques de données côté serveur.

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

Source

2010-02-11 15:36:43 Abboq

dans l'espace de noms du jsp:

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

forme

échantillon:

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

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

         }       
        } 
       }));

méthode du contrôleur de l'échantillon:

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

Source

2012-01-13 15:39:21 fmucar

Utilisation de dijit.filteringselect dans un environnement Spring MVC

Répondre

Questions connexes