En la sección anterior, completamos las funciones de consultar y eliminar productos. En esta sección, haremos las funciones de agregar y actualizar productos.
1. Agregar categoría de producto
1.1 Agregar diseño de interfaz de usuario de categoría
Hablemos primero sobre la idea: primero, cuando el usuario hace clic en "Agregar producto", debemos aparecer una ventana de interfaz de usuario de "Agregar producto" (tenga en cuenta que esto no salta al nuevo JSP, y EasyUi solo tiene una página). Después de que aparece la ventana "Agregar producto", todas las ventanas de su clase principal deben bloquearse (es decir, hacer clic en otros lugares no es válido, y solo la ventana de los productos agregue). Después de que el usuario complete la información, haga clic en "Agregar" en la ventana recién aparente, envíe la solicitud a Struts2. Luego, Struts2 obtiene los parámetros de solicitud y realiza la acción de adición de la base de datos. De esta manera, se completa la operación de fondo. Al mismo tiempo, la recepción necesita actualizar la página actual y redisir todos los productos.
Revisamos la documentación de EasyUi y descubrimos que hay dos formas de crear una nueva ventana. O crealo con etiquetas o usando JS. Usamos JS para crearlo aquí, pero necesitamos una caja <div>, como sigue:
Además, la nueva ventana que creamos no es necesario minimizar o maximizar, pero la pantalla debe bloquearse. Entonces estas propiedades se establecen en el div. A lo que debe prestar atención aquí es la función de bloquear la pantalla. Porque el <div> se coloca de manera diferente y el rango de pantalla bloqueada también es diferente. Necesitamos bloquear la pantalla completa, por lo que necesitamos poner <div> en aindex.jsp. El contenido de Query.jsp (incluido el botón de adición) debe generarse en aindex.jsp y el contenido de save.jsp (esa es la interfaz de usuario de ventana de adición que queremos mostrar). Por lo tanto, después de la ventana emergente, necesitamos bloquear el alcance de aindex.jsp, por lo que <div> debe colocarse en aindex.jsp, y la implementación específica es la siguiente:
Agregue un nuevo <Viv> a Aindex.jsp's <Body>
Copie el código de la siguiente manera: <div id = "win" data-options = "colapse: false, minimizable: false, maximizable: false, modal: true"> </div>
Luego perfeccionamos la parte de agregar categorías en Query.jsp:
{iconcls: 'icon-add', text: 'agregar category', handler: function () {parent. $ ("#win"). Window ({// porque <div> se coloca en aindex.jsp, debe llamar al título de los padres: "Agregar categoría", ancho: 350, altura: 150, contenido: '<iframe src = "send_category_save.ACTION" Category " }); }} Como se puede ver en el código anterior para agregar categorías, presentamos el contenido del archivo save.jsp en el directorio web-inf/categoría. A continuación, completamos save.jsp:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transición // en"> <html> <foad> <%@ include file = "/public/head.jspf"%> <type de estilo = "text/css" margen: 5px; } </style> <script type = "text/javascript"> $ (function () {$ ("input [name = type]"). ValidateBox ({// Esta es la función de verificación de "Nombre de categoría". Si el usuario lo envía sin completarlo, habrá un aviso requerido: Verdadero, faltando Message: 'Ingrese el nombre de categoría de categoría' // El Contenido de la solicitud}); En la lista desplegable del administrador, box.comBobox ({// Envíe la solicitud al método de consulta en Resoporación para el procesamiento. Aquí debe devolver los datos procesados a este lado para mostrarlo, por lo que los antecedentes deben empaquetar los datos en el formato JSON y enviarlo a URL: 'Account_Query.Action', Valuefield: 'ID', Textfield: 'Login', // El nombre de administrador se muestra en nuestro nombre de registro en nuestro registro. PanelHeight: 'Auto', // Adaptive Height Width: 120, // La lista desplegable es un ancho: 120 compuesto de dos componentes, // El editable: False // El cuadro desplegable no permite la edición}); $ ("#ff"). Form ("DisableValidation"); // Registre el evento del botón. Es decir, lo que hace el usuario al hacer clic en "Agregar" $ ("#btn"). Click (function () {// enable verificación $ ("#ff"). Form ("enkableValidation"); // Si la verificación es exitosa, envíe los datos if ($ ("#ff"). Form ("Validato") {// llamando al método de envío a los datos a $ ("#ff"). {url: 'category_save.action', // Envíe la solicitud al método Guardar en categoría para manejar el éxito: function () {// después de éxito // Si es exitoso, cierre la ventana actual. Administración '] "). Get (0) .ContentWindow. $ ("#Dg "). DataGrid (" recoad ");}});}}); }); </script> </head> <body> <form id = "ff" método = "post"> <div> <etiqueta for = "name"> Nombre del producto: </label> <input type = "text" name = "type"/> </div> <div> <belebel> administrador: </etiqueta> <input id = "cc" name = "cuento"/> </div> <iv> <belebel> administrador: </etiqueta) name = "Account.id"/> </div> <div> <label> for = "hot"> hotspot: </label> yes <input type = "radio" name = "hot" value = "true"/> no <input type = "radio" name = "hot" valor = "true"/> </div> <div> <aid = "btn" href = "#"#"" data-options = "iconcls: 'icon-add'"> add </a> </div> </form> </body> </html> Se han completado las solicitudes de pantalla y envío de la recepción, y el siguiente paso es hacer el programa de backend.
1.2 Implementación lógica de la adición de categorías <Br /> La recepción enviará datos al método Guardar en categoryAction para la ejecución, por lo que solo necesitamos escribir acciones, porque el fondo solo necesita agregar la categoría a la base de datos y no necesita devolver datos a la recepción, por lo que es relativamente simple, solo escribir la acción directamente:
@Controller ("CategyAction") @Scope ("Prototype") La clase pública CategoryAction extiende Baseaction <Cateatory> {// omitir otros códigos ... public void save () {System.out.println (modelo); categoryService.save (modelo); }}De esta manera, los datos se almacenarán en la base de datos. Después de eso, la recepción actualizará la pantalla y mostrará las categorías de productos recién agregadas. Echemos un vistazo.
Terminaremos de agregar categorías de productos. Hagamos la actualización de la categoría de producto a continuación.
2. Actualizar la categoría de productos
2.1 Actualización de diseño de interfaz de usuario Categoría
La idea de actualizar las categorías de productos es básicamente la misma que las agregadas anteriormente. Primero, aparece una ventana de UI, y luego el usuario completa los datos y lo envía en segundo plano, actualiza la base de datos en segundo plano y actualiza la pantalla en la recepción. Todavía usamos el método anterior para crear una ventana UI. <Div> El cuadro no necesita ser cambiado, todo lo que necesitamos hacer es mejorar el código para la parte "Categoría de actualización" en Query.jsp:
{icOnCls: 'icon-edit', text: 'actualización de la categoría', handler: function () {// juzga si hay registros de fila seleccionados, use getSelections para obtener todas las filas seleccionadas var filas = $ ("#dg"). dataGrid ("getSelections"); if (Rows.Length == 0) {// Aparece el mensaje de inmediato $ .messager.show ({// La sintaxis es similar a los métodos estáticos en Java. Título de las llamadas de objetos directos: 'Solicitud de error', msg: 'al menos un registro debe ser seleccionado', Tiempo de tiempo: 2000, showType: 'Slide',}); } else if (rows.length! = 1) {// mensaje de inmediato popular $ .messager.show ({// La sintaxis es similar a los métodos estáticos en Java. Título de llamadas de objetos directos: 'Solicitud de error', msg: 'Solo un registro se puede actualizar a tiempo', Tiempo de espera: 2000, showType: 'Slide',}); } else {// 1. La página actualizada Padre. $ ("#Win"). Ventana ({Título: "Agregar categoría", ancho: 350, altura: 250, contenido: '<iframe src = "send_category_update.action" frameBorder = "0"/>'}); // 2. }}}} Analicemos el código JS anterior: primero obtenga la línea que el usuario actualice. Si no está seleccionado, se le pedirá al usuario que seleccione al menos un registro para actualizar. Si se selecciona más de un registro, también se le solicitará al usuario que actualice solo un registro a la vez. Después de completar todos estos juicios, el usuario ha verificado un registro, luego comenzamos a crear una nueva ventana de interfaz de usuario. Aquí, como anteriormente, presentamos el contenido de la página Update.jsp en el directorio web-INF/Categoría. Echemos un vistazo al contenido de la página Update.jsp:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transición // en"> <html> <foad> <%@ include file = "/public/head.jspf"%> <type de estilo = "text/css" margen: 5px; } </style> <script type = "text/javascript"> $ (function () {// dataGrid Object var dg = parent. $ ("iframe [title = 'Category Management']"). get (0) .contentwindow. $ ("#dg"); // cargar remotamente $ ("#cc"). combin Devuelva los datos procesados a este lado para mostrarlo, por lo que el fondo debe empaquetar los datos en formato JSON y enviarlos a URL: 'Account_query.action', vallefield: 'id', TextField: 'Iniciar sesión', // Nuestra lista desplegable de la lista desplegable del administrador: 120 PanelHeight: 'Auto', // AdaptiveWidth: 120, // La lista desplegable es un nombre de registro: 120 componentes compuestos de la altura de la altura de los dos. anchos al mismo tiempo Editable: False // El cuadro desplegable no permite la edición}); id: filas [0] .id, tipo: filas [0] .type, hot: filas [0] .hot, 'cuenta.id': filas [0] .account.id // easyui no admite operaciones de puntos de cuenta.id, por lo que debe agregar marcas de cotización}); // Después de hacer eco de los datos, establezca la función de verificación $ ("input [name = type]"). ValidateBox ({requerido: true, faltandoMessage: 'Ingrese el nombre de la categoría'}); // deshabilitar la verificación $ ("#ff"). Form ("DisableValidation"); // Registre el evento del botón $ ("#btn"). Click (function () {// enable Verificación $ ("#ff"). Form ("EnableValidation"); // Si la verificación es exitosa, envíe los datos if ($ ("#ff"). Form ("Validato")) {// Llamando el método de envío para enviar los datos $ ("#ff"). 'Categy_update.Action', // Al enviar la solicitud al método de actualización de CategyAction ejecuta el éxito: function () {// Si tiene éxito, cierre la ventana actual y actualice la página de los padres. }); </script> </head> <body> <form id = "ff" método = "post"> <div> <etiqueta for = "name"> nombre de categoría: </label> <input type = "text" name = "type"/> </div> <div> <d <lelepsel etiqueta for = "hot"> hotspot: </etiqueta de la etiqueta <input type = "name" name = "hot" valor = "verdadero"/"no <input type" name "hot" hot "hot" hot "hot" hot "hot" hot "hot" value = "false"/> </div> <div> <etiqueta for = "cuenta"> administrador: </selet> <!-Lista desplegable Usamos la carga remota para cargar datos de administrador-> <input id = "cc" name = "cuenta.id"/> </div> <div> <d <a id = "btn" href = "#" options-options = "iconcls: 'icon- edit' '" "Autor" type = "Hidden" name = "id"/> </div> `</form> </body> </html> La diferencia entre actualizar y agregar es que primero se hacen eco de los datos, y luego hay una lista desplegable para mostrar los datos del administrador, porque el administrador al que pertenece también necesita actualizar. Veamos el código anterior. Primero, use el método de carga remota para cargar los datos del administrador. Primero, envíe una solicitud al backend. Después de procesar el método de consulta de la contabilidad de fondo, los datos del administrador se empaquetan en formato JSON y se devuelven, de modo que se puedan obtener los datos del administrador. Después de obtenerlo, los datos se pueden hacer eco. Echemos un vistazo al programa de fondo:
2.2 Actualizar la implementación lógica de las categorías
@Controller ("BASEACTION") @Scope ("Prototype") Public Class Baseaction <T> Extiende ActionSupport implementa request AWare, SessionAware, ApplicationAware, ModelDivened <T> {// Usar para cargar los datos para empaquetarse en formato JSON para volver al primer plano. Lo siguiente es para implementar la lista protegida del método Get <T> jsonList = null; // omitir otros métodos ...} // Accountaction @Controller ("Accountaction") @Scope ("Prototype") Public Class AccountAction extiende BASEACTION <Account> {public String Query () {jsonList = AccountService.query (); regresar "jsonlist"; }} A continuación, configuremos el archivo Struts.xml:
<Action Name = "Account_*" Method = "{1}"> <result Name = "jsonList" type = "json"> <param name = "root"> jsonlist </amam> <param name = "excludeProperties"> <!-[0] .pass, [1] .pass-> <!-La expresión regular muestra un error, tomaré una imagen a continuación-> </parámetro> </resultado> < Después de completar el ECHO, la operación de actualización es la operación de actualización. Por supuesto, también hay una función de verificación. Al igual que Agregar, la operación de actualización pasa la solicitud al método de actualización de categoría para ejecutar, que es relativamente simple:
@Controller ("CategyAction") @Scope ("Prototype") La clase pública CategoryAction extiende Baseaction <Cateatory> {// omitir otros métodos ... public void Update () {System.out.println (modelo); categoryService.Update (modelo); }}En este punto, hemos completado las operaciones de adición y actualización de las categorías de productos.
Dirección original: http://blog.csdn.net/eson_15/article/details/51347734
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.