Na seção anterior, concluímos as funções de consulta e exclusão de produtos. Nesta seção, faremos as funções de adicionar e atualizar produtos.
1. Adicione a categoria de produto
1.1 Adicionar categoria UI Design
Vamos falar sobre a ideia primeiro: primeiro, quando o usuário clicar em "Adicionar produto", devemos exibir uma janela de interface do usuário de "Adicionar produto" (observe que isso não está pulando para o novo JSP e a easyui tem apenas uma página). Depois que a janela "Adicionar produto" aparece, todas as janelas da classe pai devem ser bloqueadas (ou seja, clicar em outros lugares é inválido e apenas a janela de adição de produtos pode ser operada). Depois que o usuário preenche as informações, clique em "Adicionar" na janela recém -aparada, envie a solicitação para o Struts2. Em seguida, o Struts2 obtém os parâmetros de solicitação e executa a ação de adição do banco de dados. Dessa forma, a operação em segundo plano é concluída. Ao mesmo tempo, a recepção precisa atualizar a página atual e redisplay todos os produtos.
Verificamos a documentação da Easyui e descobrimos que existem duas maneiras de criar uma nova janela. Crie -o com tags ou usando JS. Usamos o JS para criá -lo aqui, mas precisamos de uma caixa <div>, como segue:
Além disso, a nova janela que criamos não precisa ser minimizada ou maximizada, mas a tela precisa ser bloqueada. Portanto, essas propriedades são definidas na div. O que você precisa prestar atenção aqui é a função de travar a tela. Porque o <div> é colocado de maneira diferente e o intervalo de tela bloqueado também é diferente. Precisamos bloquear a tela cheia, para que precisemos colocar <div> em AIndex.jsp. O conteúdo do query.jsp (incluindo o botão Adicionar) deve ser gerado no Aindex.jsp e o conteúdo do salv.jsp (essa é a interface do usuário da janela de adição que queremos exibir). Portanto, após a janela pop-up, precisamos bloquear o escopo do Aindex.jsp, para que <div> deve ser colocado em Aindex.jsp, e a implementação específica é a seguinte:
Adicione um novo <div> ao <body> de Aindex.jsp>
Copie o código da seguinte
Em seguida, aperfeiçoamos a parte de adicionar categorias em query.jsp:
{iconCls: 'icon-add', text: 'add category', manipulador: function () {patern. frameborder = "0"/> '}); }} Como pode ser visto no código acima para adicionar categorias, introduzimos o conteúdo do arquivo save.jsp no diretório Web-Inf/Categoria. Em seguida, concluímos o Save.jsp:
<%@ página linguagem = "java" import = "java.util. margem: 5px; } </style> <script type = "text/javascript"> $ (function () {$ ("input [name = type]"). ValidateBox ({// Esta é a função de verificação de "Nome da categoria". $ ("#cc") na caixa de listagem suspensa do administrador Box.comBOBOX ({// Envie a solicitação ao método de consulta em conta para processamento. Aqui você precisa retornar os dados processados para este lado para exibi-lo, para que o plano de fundo do Formato do JSON e envie o Formato JSON e envie-o: 'Account_Query. Lista. $ ("#ff"). form ("desabillevalidação"); // Registre o evento de botão. Ou seja, o que o usuário faz ao clicar em "Adicionar" $ ("#BTN"). Clique em (function () {// Ative a verificação $ ("#ff"). Form ("enableValidation"); // se a verificação for bem -sucedida, envia os dados se ("#ff"). {url: 'category_save.action', // envie a solicitação ao método de salvar na categoria para lidar com o sucesso: function () {// após o sucesso // se for bem-sucedido, feche a janela atual Gerenciamento '] "). Get (0) .ContentWindow. $ ("#Dg "). DataGrid (" Reload ");}});}}); }); </script> </ad Head> <body> <formig id = "ff" method = "post"> <div> <etiqueta para = "name"> Nome do produto: </celt> <input type = "text" name = "type"/> </div> <div> <bel> <bel> administrador: </etiquetel> <bpty> <brat> </divi-> <div> <bel> <bel> <bel> <bel> id = "cc" name = "account.id"/> </div> <div> <breting> para = "hot"> hotspot: </elated> sim <input type = "radio" name = "hot" value = "true"/> não <input type = "radio" name = "hot" "" "/> </div> <dr> <a ida =" bt "bt" hot "" data-options = "icoCls: 'icon-add'"> add </a> </div> </morm> </body> </html> A exibição da recepção e as solicitações de envio foram concluídas, e a próxima etapa é fazer o programa de back -end.
1.2 Implementação lógica de adicionar categorias <r /> A recepção enviará dados para o método Salvar na categoriaActionAction para execução; portanto, precisamos apenas escrever ações, porque o plano de fundo só precisa adicionar a categoria ao banco de dados e não precisa retornar dados à recepção, por isso é relativamente simples, apenas escreva a ação diretamente:
@Controller ("CategoryAction") @Scope ("prototype") Categoria de classe pública estende Baseaction <Category> {// omitis outros códigos ... public void save () {System.out.println (modelo); categoryService.Save (Modelo); }}Dessa forma, os dados serão armazenados no banco de dados. Depois disso, a recepção atualizará a tela e exibirá as categorias de produtos recém -adicionadas. Vamos dar uma olhada.
Terminaremos a adição de categorias de produtos. Vamos fazer a atualização da categoria de produto abaixo.
2. Atualize a categoria de produto
2.1 Atualizar categoria Design de interface do usuário
A idéia de atualizar as categorias de produtos é basicamente a mesma das adicionadas acima. Primeiro, uma janela da interface do usuário aparece e, em seguida, o usuário preenche os dados e o envia para o plano de fundo, atualiza o banco de dados em segundo plano e atualiza a tela na recepção. Ainda usamos o método acima para criar uma janela de interface do usuário. <div> A caixa não precisa ser alterada, tudo o que precisamos fazer é melhorar o código da parte "Atualizar categoria" em query.jsp:
{iconCls: 'icon-edit', texto: 'categoria de atualização', manipulador: function () {// julga se existem registros de linha selecionados, use getSelections para obter todas as linhas selecionadas var linhas = $ ("#dg"). Datagrid ("getSelection"); if (linhas.Length == 0) {// Popa a mensagem de prompt $ .messager.show ({// A sintaxe é semelhante aos métodos estáticos no Java. Direct Object Calls Title: 'Error prompt', msg: 'pelo menos um registro deve ser selecionado', Timeout: 2000, Showtype: 'Slide',}); } else if (linhas.length! = 1) {// Mensagem de prompt popular $ .messager.show ({// A sintaxe é semelhante aos métodos estáticos no Java. Direct Object Chamadas Título: 'Erro Prompt', MSG: 'Somente um registro pode ser atualizado por vez', Timeout: 2000, Showtype: 'Slide,}); } else {// 1. A página atualizada pai. $ ("#Win"). Window ({title: "Adicionar categoria", largura: 350, altura: 250, conteúdo: '<iframe src = "send_category_update.action" frameBerborder = "0"/>'}); // 2. }}}} Vamos analisar o código JS acima: primeiro obtenha a linha a ser atualizada pelo usuário. Se não estiver selecionado, o usuário será solicitado a selecionar pelo menos um registro para atualizar. Se mais de um registro for selecionado, o usuário também será solicitado a atualizar apenas um registro por vez. Depois que todos esses julgamentos são concluídos, o usuário verificou um registro e começamos a criar uma nova janela da interface do usuário. Aqui, como acima, apresentamos o conteúdo da página update.jsp no diretório Web-Inf/Categoria. Vamos dar uma olhada no conteúdo da página update.jsp:
<%@ página linguagem = "java" import = "java.util. margem: 5px; } </style> <script type = "text/javascript"> $ (function () {// datagrid objeto var dg = pai. $ ("iframe [title = 'category Management']"). get (0) .ContentWindow. Precisa retornar os dados processados para este lado para exibi-los, para que o plano de fundo precise empacotar os dados no formato JSON e enviá-los para o URL: 'Account_Query.action', ValueField: 'ID', TextField: 'Login', // Lista de suspensão do Administrador, o Nome de Login do Administrador: 'Auto', // Adaptive Painelwidth: 120, //10 Adaption, // ADTRESHON ISOWLON ISOWN ISENDON ISENDON: 120 Adaptive, // Adaptive, // Adaptive Off. Defina duas larguras no mesmo horário editável: False // A caixa suspensa não permite a edição}); ID: linhas [0] .id, Tipo: linhas [0] .Type, Hot: linhas [0] .HOT, 'Account.id': linhas [0] .Account.id // easyui não suporta operações de ponto. // Depois de ecoar os dados, defina a função de verificação $ ("input [nome = tipo]"). // desativar a verificação $ ("#ff"). Form ("desabilablevalidação"); // Registre o evento do botão $ ("#btn"). Clique (function () {// Ative a verificação $ ("#ff"). Form ("enableValidation"); // se a verificação for bem -sucedida, envia os dados if ($ ("#ff"). "Form (" valides ") {// chamando o método de envio para enviar para submar 'Categoria_update.action', // Ao enviar a solicitação para o método de atualização da categoria Executa o sucesso: function () {// Se bem -sucedido, feche a janela atual e atualize o pai. }); </script> </ad Head> <body> <formig id = "ff" method = "post"> <div> <gravador para = "name"> Nome da categoria: </cret> <input type = "text" name = "type"/> </<bt> <div> <bel para = "Hot"> Hotspot: </label> SimppT tipo = "Nome" = "Hot"> Hotspot: </label> SimppT) value = "false"/> </div> <div> <etiqueta para = "conta"> administrador: </crety> <!-Lista suspensa Usamos carregamento remoto para carregar dados do administrador-> <input id = "cc" name = "account.id"/> </div> <div> <a "btn" hrof = "" ""- >-pions" type = "hidden" name = "id"/> </div> `</morm> </body> </html> A diferença entre atualizar e adicionar é que os dados são ecoados e, em seguida, há uma lista suspensa para exibir os dados do administrador, porque o administrador ao qual você pertence também precisa atualizar. Vejamos o código acima. Primeiro, use o método de carregamento remoto para carregar os dados do administrador. Primeiro, envie uma solicitação para o back -end. Após o processamento do método de consulta do Background AccountAction, os dados do administrador são empacotados no formato JSON e retornados, para que os dados do administrador possam ser obtidos. Depois de obtê -lo, os dados podem ser ecoados. Vamos dar uma olhada no programa de fundo:
2.2 Atualize a implementação lógica de categorias
@Controller ("BaseAction") @Scope ("Prototype") Public Class Baseaction <T> Estende o ACTIONSupport implementa requestare, sessionAWare, ApplicationAware, Modeldriven <T> {// Use para carregar os dados a serem embalados no formato JSON para retornar ao primeiro plano. O seguinte é implementar a lista protegida do método GET <T> jsonList = null; // omitir outros métodos ...} // AccountAction @Controller ("AccountAction") @Scope ("prototype") public class AccountAction estende BaseAction <Couction> {public String query () {jsonList = AccountService.Query (); retornar "jsonList"; }} Em seguida, vamos configurar o arquivo struts.xml:
<ação name = "conta_*" method = "{1}"> <resultado name = "jsonList" type = "json"> <param name = "root"> jsonList </param> <param name = "excluiProperties"> <!-[0] .pass, [1]. Depois de concluir o Echo, a operação de atualização é a operação de atualização. Obviamente, há também uma função de verificação. Assim como adicionar, a operação de atualização passa a solicitação para o método de atualização da categoriaActionAction para executar, o que é relativamente simples:
@Controller ("CategoryAction") @Scope ("prototype") Categoria de classe pública estende Baseaction <Category> {// omita outros métodos ... public void update () {System.out.println (modelo); categoryService.Update (Model); }}Neste ponto, concluímos as operações de adição e atualização das categorias de produtos.
Endereço original: http://blog.csdn.net/eson_15/article/details/51347734
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.