Vamos a ver como agregar un select o combobox en lift, cargando los datos de una lista.
Lo primero que tenemos que hacer es crear el select en un Html, este select no tiene option, porque como dijimos, los datos los cargaremos de una lista.
Despues vamos al Snippet y dentro de la funcion en la que vamos a usar el select ponemos lo siguiente
Nuestro SHtml.select lleva los siguientes parametros:
select(opcion, valor por default, funcion: (string) => Any)
1.opcion: Es la lista o valores que queremos mostrar como options
2.valor por default: Es el valor que muestra por default, si no tenemos ninguno podemos poner Empty
3.funcion: La funcion que se realizara en el form al hacer submit
Podemos usar un ajaxSelect en vez de un select, esto es bueno usarlo si queremos que las opciones de un select dependan de lo que fue seleccionado anteriormente.
Para mostrar esto agregaremos las siguientes lineas a nuestro codigo htmal:
Entonces lo que trabajo muestre dependera de la familia que seleccionemos. En el Snippet tambien tendremos que agregar algo de codigo:
El SHtml.ajaxSelect funciona muy similar al SHtml.select:
ajaxSelect(opcion, valor por default, funcion: (string) => JsCmd )
1.opcion: Es la lista o valores que queremos mostrar como options
2.valor por default: Es el valor que muestra por default, si no tenemos ninguno podemos poner Empty
3.funcion: La funcion que se realizara en el form al hacer submit, pero tiene que devolver un Js
Vamos agregar una nueva funcion que llamaremos remplazarTrabajo y que recibira por parametro un String.
Lo primero que tenemos que hacer es crear el select en un Html, este select no tiene option, porque como dijimos, los datos los cargaremos de una lista.
Despues vamos al Snippet y dentro de la funcion en la que vamos a usar el select ponemos lo siguiente
"#trabajo" #> SHtml.select( TipoTrabajo.findAll.map(tra => (tra.id.toString, tra.tipoTrabajo.is)), Empty, tra => partidaVar.is.trabajoId(tra.toLong))
Nuestro SHtml.select lleva los siguientes parametros:
select(opcion, valor por default, funcion: (string) => Any)
1.opcion: Es la lista o valores que queremos mostrar como options
2.valor por default: Es el valor que muestra por default, si no tenemos ninguno podemos poner Empty
3.funcion: La funcion que se realizara en el form al hacer submit
Podemos usar un ajaxSelect en vez de un select, esto es bueno usarlo si queremos que las opciones de un select dependan de lo que fue seleccionado anteriormente.
Para mostrar esto agregaremos las siguientes lineas a nuestro codigo htmal:
Entonces lo que trabajo muestre dependera de la familia que seleccionemos. En el Snippet tambien tendremos que agregar algo de codigo:
"#familia" #> SHtml.ajaxSelect( Familia.findAll.map(fam => (fam.id.toString, fam.nombre.is)), Full(familia), {fam => familia = fam; remplazarTrabajo(familia) }) & "#trabajo" #> SHtml.select( TipoTrabajo.findAll.map(tra => (tra.id.toString, tra.tipoTrabajo.is)), Empty, tra => partidaVar.is.trabajoId(tra.toLong))
El SHtml.ajaxSelect funciona muy similar al SHtml.select:
ajaxSelect(opcion, valor por default, funcion: (string) => JsCmd )
1.opcion: Es la lista o valores que queremos mostrar como options
2.valor por default: Es el valor que muestra por default, si no tenemos ninguno podemos poner Empty
3.funcion: La funcion que se realizara en el form al hacer submit, pero tiene que devolver un Js
Vamos agregar una nueva funcion que llamaremos remplazarTrabajo y que recibira por parametro un String.
private def remplazarTrabajo(familia: String): JsCmd = { debug("FAMILIA : "+familia) val trabajos = trabajoVar.obtieneTrabajoFamilias(familia.toLong) debug("TRABAJO : "+trabajos) var first = new TipoTrabajo if(trabajos.size > 0){ val first = trabajos.head } ReplaceOptions("trabajo", trabajos.map(s => (s.id.toString, s.tipoTrabajo.toString)), Full(first.id.toString)) }
Comentarios
Publicar un comentario