flexTree Tipo: Object

Componente para armar un arbol de registros de la BD.

La tabla maestra deberá poseer los campos:

rela_padre
sysname_codigo
sysname_orden

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&iacute;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