alvaro-prieto
9/13/2017 - 12:54 PM

insertaTabla click boton, clase celda fila, tabla, fila, insertaTablaFiltros, botones accion, botonesFuncion ocultar ocultas columna

manejar el click en un boton de insertaTabla. Ocultar columna tabla insertaTabla fila datos JS. columna columnas tabla ocultar oculta

Agregar clase a fila / celda

Para agregar una clase a una fila, en función de sus datos, que se actualiza dinámicamente, utilizaremos el truco del botón oculto:

$s.=$PersonalEntradas->insertaTabla([
    "_escritura"=>($this->admin() || $this->supervisor()),
    "permiteInsertar"=>($this->admin() || $this->supervisor()),
    "permiteBorrar"=>false,
    "botones"=>[
        "fake"=>["rotulo"=>"fake", "desactivado"=>true]
    ],
    "botonesFuncion" => "function(fila, boton){
            const tr =  $('tr[data-idr=\''+ fila.id +'\']');
            const tt = fila.modalidad === 'tt';
            tr[ tt ? 'addClass' : 'removeClass' ]('tt');
    }",
    etc...
Para que una columna de un insertaTabla esté oculta (lo cual puede servir para acceder a datos desde js):

"campos" => [
	//colummna oculta, para poder acceder por js
	"trabajando" => ["campo" => "trabajando", "rotulo"=>_("Trabajando"), "desactivado"=>true],
	...
]
/*
En un insertaTabla, podemos personalizar los botones que aparecen por cada fila, de manera
que por ejemplo algunos se oculten/muestren en función de cada fila. Desde PHP se puede hacer
que una función JS se invoque por cada fila, por defecto si retorna false el botón estará
deshabilitado y si retorna true estará activo.

La clave es "botonesFuncion"

Para ocultar una columna concreta, se puede hacer agregando a la columna  "desactivado"=>true


*/

$s.=$this->insertaTabla([
	"_class"=>"tablaDiapositivas",
	"_escritura"=>true,
	"botones"=>["previsualizar"=>["rotulo"=>"ver"], "editar"=>["rotulo"=>"editar"], "subdiapositivas"=>["rotulo"=>"subdiapositivas"]],
	"rotuloInsercion"=>"nueva diapositiva",
	"agrupacion"=>"if (visible,'Publicados','Borradores')",
	"requeridosInsercion"=>[
		"visible"=>"0",
		"clase"=> ($parametros["padre"] ? $parametros["padre"] :"WebPaginas")
	], 
	//======== MIRAR AQUÍ =========
	"botonesFuncion" => "function(fila, boton){ 
		//console.log(fila);
		var posiblesPadres = ['carrusel', 'layout'];
		if(boton == 'subdiapositivas' & fila.id*1>0){
			return (fila.plantilla && !$.inArray( fila.plantilla, posiblesPadres) );
		}
		return true;
	}",
	
	"campos"=>
	[
		"clave"=> ["campo"=>"clave"],
		"titulo"=>["campo"=>"titulo"],
		"visible"=>["campo"=>"visible"],		
		"plantilla"=>["campo"=>"plantilla", "rotulo"=> "Tipo"],	
		"tipo"=>["campo"=>"tipo","rotulo"=>"Subplantilla"],		
		"campo"=>["campo"=>"campo","rotulo"=>"Ubicación"],			
		"orden"=>["campo"=>"orden"],
		
	]
]);

	
//obtener los datos de una fila de una tabla por id, por ejemplo cuando
//haces click en un boton de una fila y quieres obtener la fila entera:

var tabla = quontrol.find(".Quontrol_insertaTabla");
console.log(tabla.accion("valor", id));  

//si por ejemplo esto está asociado a un botón, seria algo asi:

var quontrol = this.quontrol;
this.quontrol.on("accion",".Quontrol_insertaTabla",function(e,accion,id){
	if (accion=="miBoton"){
		console.log("se ha presionado un boton de una fila");
		var tabla = quontrol.find(".Quontrol_insertaTabla");
		console.log(tabla.accion("valor", id));
	}
}
	
//Imaginate que un insertaTabla tiene un desplegable, pero que en ese desplegable salen
//opciones que no queremos que aparezcan. Se puede aplicar un filtro a nivel de campo

$s .= $this->insertaTabla(array( 
	"_escritura" => 1,
	"campos"=> [
		
		"idUsuario"=>["campo"=>"idUsuario"],
		"lider" => ["campo"=> "lider"],
		//así solo saldran llos AreasCentros cuyo idCentro == 5
		"idAreaCentro"=>["campo"=>"idAreaCentro", "filtro" => "idCentro = 5"] 
	]
));
eventos('QuontrolPersonalArticulos_administraArticulos',
{
	"inicia":function()
	{
		//Código de inicio	
		let quontrol = this.quontrol;
		this.quontrol.on("accion", ".QuontrolPlugins_tabla", (e,accion,id) => {if(accion=="editar") quontrol.accion("editarFila", id)} );
	},
	"editarFila":function(id){
		console.log("editar fila ", id);	
	}
});
/*
También se pueden ocultar columnas, para tener datos accesibles pero no visibles,
y acceder a los datos completos de la fila al hacer click en un botón. 

El código sería asi:

*/

//EN PHP:

"Quontrol_insertaTabla"=> [
	"_escritura" => true,
	"_class"=>"tablaCentros",
	"expandida"=> true, 
	"paginacion"=>["rango"=>50,"pagina"=>1],  //rango = nº elementos por página
	"permiteBorrar" => true,
	"permiteInsertar" => false,
	
	"botones" => [
		"editar" => ["rotulo"=>"editar"]   //INTERESANTE! AQUÍ LOS BOTONES POR FILA
	],
	
	"campos"=>[
		"variable"=>["campo"=>"VariablesCentros.Variables.variable", "rotulo"=>"Variable"],
		"centro"=>["campo"=>"VariablesCentros.Centro.centro", "rotulo"=>"Centro"],
		"descripcion"=>["campo"=>"VariablesCentros.Variables.descripcion", "rotulo"=>"Descripcion"],
		"valor"=>["campo"=>"valor", "rotulo"=>"Valor"],
		"defecto"=>["campo"=>"VariablesCentros.Variables.defecto", "rotulo"=>"V. Defecto"],
		"idcentro"=>["campo"=>"VariablesCentros.Centro.id", "rotulo"=>"idcentro", "desactivado"=>1]  //INTERESANTE! Columna oculta

	]
],
	
	
	
//En JS:

this.quontrol.on("accion", ".tablaCentros", function(e, b, id, a){ 
	var tabla = $(this);
	var fila = tabla.accion("valor", id);
	if(b == "editar"){
		console.log(fila);
	}
});