¿Cómo hacer un soporte para lanzadera de árbol Axure?
El método de fabricación del portaequipajes para árboles Axure:
En primer lugar, el material principal es 1. El elemento de árbol es el elemento que se encuentra en la esquina superior izquierda del establecimiento comercial. Podemos usar el elemento de árbol original de axure.
2. El repetidor 1 (lista de empleados) es el repetidor de la lista de empleados en la esquina superior derecha. El interior del repetidor se compone de varios cuadros. La tabla repetidora consta de cuatro columnas:
Columna 1: indica la sala de negocios donde se encuentra el empleado, correspondiente a la sala de negocios del componente del árbol anterior;
Columna 2: la nombre del empleado representativo;
Columna 3: representa el puesto del empleado;
Seleccionado: indica si la casilla de verificación múltiple está seleccionada y está vacía de forma predeterminada.
3. El repetidor 2 (lista seleccionada) es el contenido de la lista seleccionada a continuación. El interior del repetidor consta de un rectángulo y un botón de cierre X. Solo se necesita una columna, Columna0, en la tabla del repetidor, que puede representar el nombre del empleado.
2. Explicación de ideas: este prototipo selecciona principalmente nodos de árbol (seleccione la sala de negocios correspondiente) para filtrar los empleados correspondientes en la sala de negocios de acuerdo con las diferentes salas de negocios y luego, seleccione el empleado en el empleado; list Después de eso, el empleado aparecerá en la lista seleccionada; si no está seleccionado, desaparecerá en la lista seleccionada; si deselecciona un empleado en la lista seleccionada, también debe deseleccionarlo en la lista de empleados;
El prototipo implica principalmente la siguiente lógica de interacción:
Filtrar: filtrar los empleados correspondientes en la sala de negocios seleccionada;
La comunicación entre los dos repetidores Interacción , transferencia de valor entre dos repetidores.
El tercero es la producción interactiva1. Interacción de los elementos del árbol Cuando el mouse hace clic en el nodo del árbol (nodo del salón de negocios), agregue un evento de filtro para el repetidor 1 (el repetidor de la lista de empleados). La condición del filtro es que el valor de la columna 1 del repetidor 1 sea igual a. el clic actual del mouse. El valor del nodo del árbol. Debido a que hay muchos nodos de árbol (salas de negocios), usamos this.text para poder copiar y pegar directamente esta interacción en todos los nodos del árbol.
La sala de negocios que se muestra de forma predeterminada, como la primera sala de negocios en el distrito de Tianhe en este caso, requiere un evento desencadenante para activar la interacción cuando se hace clic en el nodo actual.
2. Interacción del Repetidor 1 (Repetidor de la lista de empleados) Al cargar cada elemento del Repetidor 1, configuramos el texto del cuadro de selección múltiple con el nombre del empleado en la segunda columna del Repetidor y el empleado. en la tercera columna el valor del puesto, por ejemplo, Nombre del empleado 1 (Gerente de cuenta). También puedes configurarlo según las necesidades reales.
Luego debemos agregar una condición. Controlamos si el cuadro de selección múltiple está seleccionado usando el valor en la cuarta columna del repetidor, por lo que si el valor en la columna "Seleccionado" es igual a 1, configuramos el cuadro de selección múltiple para que se seleccione; de lo contrario, El valor predeterminado es no seleccionado.
Después de cargar cada elemento, agregamos el escenario 2 y la condición correspondiente es item.xuanzhong==1. Si se cumple esta condición, se realiza la interacción y el cuadro de selección múltiple se establece en el estado seleccionado. Si item.xuanzhong no es igual a 1, en teoría deberíamos configurar el cuadro de selección múltiple en un estado sin marcar, pero dado que el cuadro de selección múltiple por defecto está en un estado sin marcar, no necesitamos reinventar la rueda y, por lo tanto, no No tengo que escribir la segunda mitad de la interacción.
Necesitamos agregar un área activa para bloquear el cuadro de selección múltiple que se encuentra encima, porque si el cuadro de selección múltiple está seleccionado o no está determinado por el valor de la columna de declaración del repetidor. Por lo tanto, un punto de acceso en una casilla de verificación evita que los clics directos del mouse cambien si la casilla de verificación está seleccionada o no.
Cuando el mouse hace clic en el área popular encima del cuadro de selección múltiple, debemos dividirla en dos situaciones.
1)
Cuando el valor de la columna en la selección es igual a 1, se selecciona. Cuando cambia de seleccionada a no seleccionada, interactuamos para actualizar la fila y seleccionar. la fila actual. El valor en la columna del medio se actualiza a 0 y se puede desmarcar.
Además, dado que ya está seleccionado, originalmente existe esta lista en el Repetidor 2 (el Repetidor con la lista seleccionada), y necesitamos eliminar este empleado no seleccionado en el Repetidor 2, así que realice la interacción de eliminar la fila, la premisa es el valor del artículo. La columna 2 es igual al valor de TargetItem. Columna 0 y artículo. La columna 2 es el nombre del empleado en el duplicado de la lista de empleados correspondiente; Columna0 es el nombre del empleado en el control repetido correspondiente al empleado seleccionado.
Caso 2
Cuando la emoción anterior no se cumple (el valor de la columna en la selección no es igual a 1), es decir, cuando originalmente fue deseleccionada y nunca ha sido seleccionada seleccionado, primero debemos realizar una interacción para actualizar la fila y actualizar el valor de la columna seleccionada de la fila actual a 1, de modo que se pueda seleccionar el cuadro de selección múltiple de la fila actual.
Luego queremos agregar el nombre del empleado a los nombres seleccionados, por lo que necesitamos usar la interacción Agregar fila, y el valor agregado es Artículo. Columna 2 (nombre del empleado).
3. Interacción del Repetidor 2 (Repetidor de la lista seleccionada) Cuando se carga cada elemento del Repetidor 2, debemos configurar el texto rectangular en el Repetidor 2 == Item.Column0. si no se elimina, generalmente no es necesario escribirlo.
Lo que necesitamos escribir es la interacción cuando el ratón pulsa el botón Cancelar X. Si queremos eliminar esta lista de empleados, debemos realizar dos interacciones. Una es eliminar la fila actual de la persona duplicada actual y la otra es deseleccionar al empleado correspondiente a la persona duplicada 1 (persona duplicada en la lista de empleados).
Primero debemos deseleccionar al empleado correspondiente al repetidor 1 (repetidor de lista de empleados), porque si eliminamos primero la fila actual, no podemos encontrar el valor correspondiente para actualizar después de la eliminación, por lo que necesitamos actualizar el repetidor. 1 primero. Interactuamos con la actualización de filas. La condición de actualización es este elemento. Columna 0 == elemento de destino. Columna 2, el valor de la columna en la selección se puede actualizar a 0.
De esta manera hemos completado la producción de la caja lanzadera para árboles. Si hay muchos árboles o repetidores, podemos convertirlos en paneles dinámicos y agregar controles deslizantes. También puede embellecer su propio estilo, como el estilo cuando pasa el mouse, etc.
Una vez completada la producción, la próxima vez que lo use, solo necesita modificar el nodo del árbol y el contenido del repetidor 1, y el efecto interactivo se generará automáticamente, con alta reutilización.
Lo anterior es "¿Cómo hacer una caja lanzadera de árbol Axure?". He explicado el contenido relevante, ¡espero que te sea útil! Aprenda a crear prototipos de Axure, no tenga miedo de demasiados tutoriales, no tenga miedo de los detalles en el contenido y hay más artículos de Axure esperando que los lea ~ Si tiene dificultades para aprender Axure en este momento, también puede Elija el curso de autoaprendizaje de Axure, los puntos de conocimiento claros y completos pueden ayudarlo a aprender rápidamente ~