flexTree Tipo: Object
Componente para armar un arbol de registros de la BD. Permite ser enlazado |
Componente para armar un árbol con los registros de la BD. Este componente es utilizado por los componentes flexForm y flexGrid (en los buscadores), pero también puede ser invocado directamente desde un módulo, para editar los valores de la tabla maestra a la que hace referencia.
La tabla maestra a la que hace referencia deberá poseer obligatoriamente el campo "rela_padre". También podrá tener los campos código y orden que permitirán aplicar funcionalidades avanzadas.
Principales funcionalidades:
- Genera automáticamente códigos único por cada registro.
- Los nodos y las carpetas se pueden editar (edit in place)
- Los nodos y las carpetas se pueden arrastrar para ordenar o mover de una carpeta a otra e incluso clonar.
Ejemplo 1: flextree utilizado directamente dentro un módulo
Ejemplo 2: flextree utilizado dentro de un fleForm
Parámetros
idFlex
Campo id de la tabla maestra. El framework deduce el nombre de la tabla principal que se desea mostrar a través de este parámetro
Tipo: Id Database
Valor por defecto: null
CODIGO EJEMPLO
idFlex:'id_syspubl01',
// La consulta se realizará sobre
// sys_publ_01_XXX_XXXXXXXXX (prefijo único)
url
url a la cual se realizará el post para obtener la información de la BD
Tipo: Path file
Valor por defecto: lib/flex/flexTreeXml.php
urlInterfaz
Path del archivo para agregar un registro. Si se coloca este parámetro se agrega un botón (+) al lado del campo.
El botón abre el archivo y le envía por post los parámetros:
fflex=tree
op=reload
id_refresh=(formulario mas ID del campo).
Tipo: Path file
Valor por defecto: false
optModel
Tambien se lo puede usar como un STRING: Nombre del campo de la BD a mostrar. Para mostrar más de un campo se deben separar los campos por <@>
Si unos de los campos posee un prefijo diferente al de la tabla maestra, realiza un inner join a la tabla en cuestión.
Tipo: Array Object
Valor por defecto: []
Subparámetros de optModel
display
label del campo a mostrar
Tipo: String
Valor por defecto:
null
name
Campo de la BD a mostrar
Tipo: Field Database
Valor por defecto:
null
sortname
ordenar por (nombre del campo en la BD)
Tipo: Field Database
Valor por defecto: null
sortorder
orden a direccionar
Tipo: String
Valor por defecto: null
Valores aceptados: ASC | DESC
filterby
Nombre del campo en la BD para realizar un filtro
Tipo: Field Database
Valor por defecto: null
filtervalue
Valor a buscar para realizar un filtro
Tipo: String
Valor por defecto: null
getAll
Determina si se deben traer todos los registros o solo traer a medida que hace clic sobre una carpeta (se trae siempre UN nivel por debajo de la misma)
Tipo: Boolean
Valor por defecto: true
deafultLabel
Texto a mostrar por defecto en el input (text field)
Tipo: String
Valor por defecto: null
title
Texto a mostrar en la raíz del arbol
Tipo: String
Valor por defecto: Seleccione
folderClick
Permite que las carpetas (nodos con hijos) sean clickeables.
Tipo: Boolean
Valor por defecto: false
leafClick
Permite que las hojas (nodos sin hijos) sean clickeables.
Tipo: Boolean
Valor por defecto: false
fixedheight
Permite que el alto del componente de ajuste al algo de la ventana del navagador.
En caso de setear true, se agrega un borde al componente y aparecen las barras de desplazamiento en caso de ser necesarias
Deshabilitado!
Tipo: Boolean
Valor por defecto: false
collapsed
Muestra el árbol colapsado o no
Tipo: Boolean
Valor por defecto: false
autoCollapse
Si se setea en true, al abrir una carpeta se cierran las otras del mismo nivel.
Tipo: Boolean
Valor por defecto: false
urlClick
path del archivo a visualizar. El resultado de ese archivo (html) se cargará en el div con id contentSystem_tree_(idFlex)
El componente envía por post los parámetros id (del registro) e idTree (idflex del componente)
Utilizado para visualizar el detalle de un nodo, en módulos donde se editan los registros del árbol.
Orden de prevalencia:
urlClick
fillField
onClick
Tipo: Path file
Valor por defecto: false
fillField
Nombre del campo (ID) a rellenar con el valor de un registro al hacer clic sobre la Hoja o Carpeta del árbol.
Utilizado cuando se lo aplica dentro del componente flexForm o flexGrid.
Orden de prevalencia:
urlClick
fillField
onClick
Tipo: Field Database
Valor por defecto: false
filterDefault
Este parámetro permite hacer un include de una url (php) para armar un where específico en la Query. El php debe devolver como como resultado $ whereFilterDefault
Si el archivo no existe, se ejecuta el codigo almacenado en filterDefault (si da error es porque la query esta mal). El código NO DEBE tener saltos de línea. NO INICIAR CON "AND"
Tipo: Path file
Valor por defecto: false
CODIGO EJEMPLO
Include:
"modulos/name_module/php/filter.php"
Código (where):
"id_sysname=1 and sysname_habilitado=1"
errormsg
Texto a mostrar cuando se produce un error
Tipo: String
Valor por defecto: Se ha producido un error de conexión. Consulte al Administrador.
method
Método del envio de datos a URL
Tipo: String
Valor por defecto: POST
Valores aceptados: POST
showSearchTree
Muestra un pequeño formulario para realizar búsquedas (javascript) en el árbol. Se ubica arriba del árbol
Tipo: Boolean
Valor por defecto: false
checkTree
coloca un checkbox al lado de cada registro.
Tipo: Boolean
Valor por defecto: false
checkMode
Tipo: Integer
Valor por defecto: 3
Valores aceptados: 1 | 2 | 3
parentheight
Permite que el arbol tome al ALTO del DIV (o cualquier elemento) contenendor del mismo (parent).
Deshabilitado!
Tipo: Boolean
Valor por defecto: false
sepModel
String a utilizar para separar los campos visualizados en cada nodo del arbol
Tipo: String
Valor por defecto: -
idMod
ID del módulo donde se encuentra el componente. Este valor será enviado como parámetro al php. Por defecto envía el id del TAB (modulo) activo. Puede establecer cualquier ID de módulo.
Tipo: Integer
Valor por defecto: idModActive()
width
Alto del arbol
Tipo: Integer
Valor por defecto: auto
height
Ancho del arbol
Tipo: Integer
Valor por defecto: auto
editable
Permite editar el nombre del nodo al hacer dobleclic o SHIFT+CLIC o F2 (solo si en el optmodel hay una solo campo)
Tipo: Boolean
Valor por defecto: false
allowContextMenu
Permite mostrar el menpu contextual en cada nodo (acciones: seleccionar, editar, etc)
Tipo: Boolean
Valor por defecto: true
allowCopy
Si se setea permite mostrar un menu contextual con las opciones de copiar y pegar un nodo (clonar)
Tipo: Boolean
Valor por defecto: false
allowMoveNodes
permite mover los nodos y carpetas del arbol. Al mover, envia un post para actualizar el registro (campo orden, campo rela_padre, y campo codigo si tuviera)
Tipo: Boolean
Valor por defecto: false
createChildOnMove
Si se setea en false, prohive crear "hijos" dentro de otro nodo (un registro que no es carpeta), permitiendo solo mover nodos dentro de carpetas.
Tipo: Boolean
Valor por defecto: false
codeField
campo de la DB para generar el código automático
Tipo: Field Database
Valor por defecto: false
sortableField
Campo en la BD que "ordena" los registros (de un mismo padre). Si se setea el componente realiza un post para actualizar el registro cada vez que se "mueve" un nodo.
Tipo: Field Database
Valor por defecto: false
autoExpandMS
Milisegundos que demora el componente en abrir una carpeta cuando se arrastra un nodo de una carpeta a otra
Tipo: Integer
Valor por defecto: 1000
clickFolderMode
Comportamiento del arbol al hacer clic sobre un nodo.
Tipo: String Conditional
Valor por defecto: 3
Valores aceptados: 1 | 2 | 3
fieldCheckColor
campo de la BD que deberá devolver una CLASE CSS (por defecto pueden ser: red o 0, blue, orange, green o 1). Esta clase se agrega a cada nodo cambiando el color del texto.
Tipo: Field Database
Valor por defecto: ''
searchTreeTitle
Valor por defecto a mostrar en el buscador interno
Tipo: String
Valor por defecto: Buscar...
fieldCheckStatus
campo de la BD que deberá devolver CERO o UNO, para determinar si el nodo esta ACTIVO O NO (si no esta activo se muestra en color gris, y no es CLICKEABLE)
Tipo: Field Database
Valor por defecto: ''
fieldKey
Permite colocar como "value" del tree un valor distinto al del ID de la tabla
Tipo: Field Database
Valor por defecto: null
fieldIcon
campo de ls BD que devuelve el path a una icono (puede devolver el nombre del archivo o todo el path)
Tipo: Field Database
Valor por defecto: ''
imagePath
Path de la carpeta donde se encuentran los iconos devueltos en fieldIcon
Tipo: Path folder
Valor por defecto: /media/specials/
noborder
Eliminar el border gris del componente
Tipo: Boolean
Valor por defecto: false
startWith
Para versiones con ORACLE
Tipo: Integer
Valor por defecto: null
maxLevel
Para versiones con ORACLE
Tipo: Integer
Valor por defecto: null
Eventos
onClick
función a ejecutar al hacer click sobre un nodo.
Orden de prevalencia:
urlClick
fillField
onClick
Tipo: String function
Valor por defecto: false
onSuccess
Agrega una función a ejecutar cuando se termina de cargar el componente
Tipo: String function
Valor por defecto: false
onBlur
Ejecutada cuando un nodo pierde foco.
Tipo: function js
Valor por defecto: null
CODIGO EJEMPLO
onBlur(node);
onFocus
Ejecutada cuando un nodo recibe el foco.
Tipo: function js
Valor por defecto: null
CODIGO EJEMPLO
onFocus(node)
onRender
Se llama después cada vez que la etiqueta HTML de un nodo se crea o se modifica.
Puede utilizarse para modificar el formato HTML.
Tipo: function js
Valor por defecto: null
CODIGO EJEMPLO
onRender(node, nodeSpan)
onExpand
Se llama cuando un nodo se ha desplegado / contraído.
Tipo: function js
Valor por defecto: null
CODIGO EJEMPLO
onExpand(flag, node)
onDblClick
Se le llama cuando se hace clic doble en un nodo.
Tipo: function js
Valor por defecto: null
CODIGO EJEMPLO
onDblClick(node, event)
API - Funciones Accesibles
flexTreeActivate
Activar un nodo
$("field_name").flexTreeActivate("id_nodo")
flexTreeAddNode
Función para indicar que se ha agredo un nodo al arbol
$("field_name").flexTreeAddNode({nameNode:nameNode,idNode:resultId})
flexTreeDeleteNode
Elimina el nodo activo
$("field_name").flexTreeDeleteNode()
flexTreeOptions
Función para actualizar opciones de un flexTree
$("field_name").flexTreeOptions({ opts... })
flexTreeRefreshNode
Función para actualizar el nombre de un nodo
$("field_name").flexTreeRefreshNode({nameNode:nameNode})
flexTreeReload
Recarga el componente
$("field_name").flexTreeReload()
Ejemplos
ver_tree.html
<script type="text/javascript">
$(document).ready(function(){
$("#tree_{idFlex}").flextree({
idFlex: "{idFlex}",
url: "{url}",
width: "{width}",
onClick:"{onClick}",
urlClick:"{urlClick}",
sortname: "{sortname}",
sortorder: "{sortorder}",
fixedheight:{fixedheight},
collapsed:{collapsed},
showSearchTree:{showSearchTree},
title:"{title}",
filterby: "{filterby}",
filtervalue: "{filtervalue}",
getAll: {getAll},
sortable:false, // PERMITE MOVER NODOS DENTRO DE UNA MISMA CARPETA
//sortableField:'sysname_orden', // Insertar nombre del campo tipo ORDEN
allowMoveNodes:false, // PERMITE MOVER NODOS ENTRE DIFERENTES CARPETAS
createChildOnMove:false, // PERMITE CONVERTIR UN NODO EN CARPETA, al mover
//codeField:'sysname_codigo',
optModel:"{optModel}",
});
});
</script>
<section class="grid_4">
<ul id="tree_{idFlex}" class="filetree"></ul>
</section>
<section class="grid_8">
<div class="box-wrapper">
<div class="box-header">
<h2>{title}</h2>
<button type="button" class="small blue right" onclick="$.flexbox({ url: '{urlAbm}', vars:'idTree=tree_{idFlex}', type:'post'});">Agregar Raíz </button>
</div>
<div class="box-content" id="contentSystem_tree_{idFlex}" >
<p>Explore el arbol para visualizar el contenido</p>
</div>
</div>
</section>
Actualizaciones
- 3.6 Bug: Se corrigío un bug que se producía al utitizar la opción gelAll=false y el filtervalue (filtros por defecto)
24-09-2015 - 3.6 Bug: flexTree: Se corrigío un error que se producia cuando se utiliza el componente en un buscador del flexGrid en DOS o mas campos con el mismo ID (con un group). Este error no permitía buscar con un OR en la QR a la BD.
También, si los campos tienen al mismo ID, al seleccionar un NODO se actualiza ambos campos del LABEL.
24-09-2015