検索
ホームページウェブフロントエンドライユイのチュートリアルLauiui を使用して追加、削除、確認、変更操作を実装する方法

Lauiui を使用して追加、削除、確認、変更操作を実装する方法

王林
王林
Sep 28, 2020 pm 05:37 PM
layui

Lauiui を使用して追加、削除、確認、変更操作を実装する方法

まずはlayuiについて知る

layui（同音異義語：UI風）は、ネイティブに準拠した独自のモジュール仕様を使用して書かれたフロントエンドUIフレームワークです。 HTML/CSS/JS の記述と構成形式は非常に敷居が低く、すぐに使用できます。外観はミニマルですが、内部は充実しています。サイズは軽く、コンポーネントが豊富です。コア コードから API に至るすべての詳細が注意深く作成されており、迅速なインターフェイス開発に非常に適しています。

(推奨チュートリアル: layui)

ダウンロード後に CSS および JS スタイルをインポートします

簡単なレンダリング

Lauiui を使用して追加、削除、確認、変更操作を実装する方法

次にコードに直接進みます

daoメソッド

package com.chen.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.chen.util.JsonBaseDao;
import com.chen.util.JsonUtils;
import com.chen.util.PageBean;
import com.chen.util.StringUtils;

public class BooktypeDao extends JsonBaseDao{
	
	/**
	 * 书籍类别查询
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql=" select * from t_type where true";
		String tid=JsonUtils.getParamVal(paMap, "tid");
		String tname=JsonUtils.getParamVal(paMap, "tname");
		if(StringUtils.isNotBlank(tid)) {
			sql+=" and tid ="+tid+" ";
		}
		if(StringUtils.isNotBlank(tname)) {
			sql+=" and tname like &#39;%"+tname+"%&#39;";
		}
		sql += "  order by tid desc ";
		return executeQuery(sql, pageBean);
	}
	
	
	
	
	
	/**
	 * 增加
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int addType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="insert into t_type(tname)  values(?) ";
		
		return super.executeUpdate(sql, new String[] {"tname"}, paMap);
	}
	
	
	/**
	 * 修改
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int editType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="update t_type set tname=? where tid=?";
		
		return super.executeUpdate(sql, new String[] {"tname","tid"}, paMap);
	}
	
	/**
	 * 删除
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	
	public int removeType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="delete from t_type where tid=? ";
		
		return super.executeUpdate(sql, new String[] {"tid"}, paMap);
	}
	
	

}

entityはツリー状のエンティティクラスです

package com.chen.entity;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class TreeNode {
	private String id;
	private String name;
	private Map<String, Object> attributes = new HashMap<>();
	private List<TreeNode> children = new ArrayList<>();

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeNode> getChildren() {
		return children;
	}

	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}

	public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) {
		super();
		this.id = id;
		this.name = name;
		this.attributes = attributes;
		this.children = children;
	}

	public TreeNode() {
		super();
	}

	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", name=" + name + ", attributes=" + attributes + ", children=" + children + "]";
	}

}

アクションサブコントローラ

package com.liuting.web;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.chen.dao.BooktypeDao;
import com.chen.framework.ActionSupport;
import com.chen.util.PageBean;
import com.chen.util.ResponseUtil;

public class BooktypeAction extends ActionSupport {
	private BooktypeDao booktypeDao=new BooktypeDao();
	
	/**
	 * 查询书籍类别
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String list(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		try {
			PageBean pageBean=new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> list = this.booktypeDao.list(req.getParameterMap(), pageBean);
			ObjectMapper om =new ObjectMapper();
			Map<String, Object> map=new HashMap<>();
			map.put("code", 0);
			map.put("count", pageBean.getTotal());
			map.put("data", list);
			ResponseUtil.write(resp, om.writeValueAsString(map));
		} catch (InstantiationException e) {
			e.printStackTrace();
		} 
		return null;
	}
	
	
	/**
	 * 增加
	 * @param req
	 * @param resp
	 * @return
	 */
	public String addBookType(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<Map<String, Object>> list = this.booktypeDao.list(req.getParameterMap(), null);
			int val = 0;
			//如果集合不为空 或者长度等于 0  就把它增加进去 
			if(list==null || list.size() == 0) {
				
				val = this.booktypeDao.addType(req.getParameterMap());
			}
		
			else {
				val= 2;
			}
			
			ResponseUtil.write(resp, val);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	
	/**
	 * 删除书本类别
	 * @throws Exception 
	 * @throws JsonProcessingException 
	 * 
	 */

	public String deleteBookType(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
		try {
			int deleteBookType=this.booktypeDao.removeType(req.getParameterMap());
			ObjectMapper om=new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(deleteBookType));
		} catch (NoSuchFieldException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 修改书籍类别
	 * @param req
	 * @param resp
	 * @return
	 * @throws JsonProcessingException
	 * @throws Exception
	 */
	
	public String updateBookType(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
		try {
			int updateBookType=this.booktypeDao.editType(req.getParameterMap());
			ObjectMapper om=new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(updateBookType));
		} catch (NoSuchFieldException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	
	
	
	/**
	 * 下拉框
	 */
	public String listSelect(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		try {
			PageBean pageBean=new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> list = this.booktypeDao.list(req.getParameterMap(), pageBean);
			ObjectMapper om =new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(list));
		} catch (InstantiationException e) {
			e.printStackTrace();
		} 
		return null;
	}
	
	
	
	
}

mvc.xml 設定パス

<?xml version="1.0" encoding="UTF-8"?>
<config>
	
	<action path="/booktypeAction" type="com.chen.web.BooktypeAction">
		<forward name="index" path="/xz.jsp" redirect="false" />
		<forward name="addBookType" path="/add.jsp" redirect="true" />
		
	</action>
	
	<action path="/menuAction" type="com.chen.web.MenuAction">
		<forward name="index" path="/index.jsp" redirect="false" />
	</action>
	
	<action path="/userAction" type="com.chen.web.UserAction">
		<forward name="index" path="/index.jsp" redirect="false" />
	</action>
	
	
	<!--书本信息  -->
	<action path="/bookAction" type="com.chen.web.BookAction">
		<forward name="index" path="/index.jsp" redirect="false" />
		<forward name="addBookType" path="/add.jsp" redirect="true" />
		
	</action>
	
</config>

web.xml 設定パス

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>Mvc_Layui</display-name>
  <filter>
  	<filter-name>encodingFiter</filter-name>
  	<filter-class>com.chen.util.EncodingFiter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>encodingFiter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>
  <servlet>
  	<servlet-name>dispatherServlet</servlet-name>
  	<servlet-class>com.chen.framework.DispatherServlet</servlet-class>
  	<init-param>
  			<param-name>xmlPath</param-name>
  			<param-value>/mvc.xml</param-value>
  	</init-param>
  </servlet>
  <servlet-mapping>
  	<servlet-name>dispatherServlet</servlet-name>
  	<url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

jsp page

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ include file="/jsp/common/head.jsp" %>    
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body class="child-body">
<div class="child-nav">
    <span class="layui-breadcrumb">
         <a>书籍类别管理</a>
         <a><cite>分类列表</cite></a>
    </span>
</div>
<blockquote class="layui-elem-quote">

<!--搜索维度  -->
 <div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">书籍名称</label>
        <div class="layui-input-inline">
            <input type="text" id=&#39;booktypename&#39; name="booktypename" lay-verify="required" placeholder="请输入书籍名" autocomplete="true" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-normal layui-btn-radius" data-type="reload"><i class="layui-icon">&#xe615;</i>查询</button>
        <button class="layui-btn layui-btn-normal"   data-type="add">新建</button>
    </div>
</div>   
</blockquote>

<!--隐藏域传值  -->
<input type="hidden"  id="sj" value="${pageContext.request.contextPath}" >
<!--根据table id 来展示表格数据  -->
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--行内样式按钮   -->
<script type="text/html" id="lineBtns">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--弹出层  -->
	 <div class="site-text" style="margin: 5%; display: none" id="box1"  target="test123">
	    <form class="layui-form layui-form-pane" onsubmit="return false" id="booktype">
	        <div class="layui-form-item">
	           <label class="layui-form-label">类型编号</label>
	            <div class="layui-input-block">
	                <input type="text" class="layui-input layui-disabled text_add "  id="booktypeid" name=booktypeid  disabled="disabled">
	            </div>
	            <br>
	            <label class="layui-form-label"> 书本类别名</label>
	            <div class="layui-input-block">
	                <input type="text" class="layui-input"  id="booktypename1"  name=booktypename1><br>
	            </div>
	        </div>
	    </form>
	</div> 
</body>

<!--权限-->



<script >
//管理
//执行渲染
layui.use([&#39;table&#39;,&#39;layer&#39;,&#39;form&#39;],function(){
	var data=document.getElementById("sj").value;
	var table =layui.table;
	var layer=layui.layer;
	var form = layui.form;
     /*展示数据表格  */
	table.render({
		  elem:&#39;#test&#39;//表格id
		,url:data+&#39;/booktypeAction.action?methodName=list&#39;//所对应调用的接口
		,method:&#39;post&#39;		//提交方式
	    ,cols:[[
	    	/*根据数据库的表格所对应的名称  */
	         {field:&#39;tid&#39;,height:80, width:300, title: &#39;书籍类别序号&#39;, sort: true}
	         ,{field:&#39;tname&#39;, height:80,width:300, title: &#39;书籍类别名称&#39;}
	         ,{field:&#39;right&#39;,height:80, width:300, title: &#39;操作&#39;, toolbar:&#39;#lineBtns&#39;}//操作栏 
	    ]]
	         ,page:&#39;true&#39;//分页
	         , id: &#39;testReload&#39;
	});
	
	//上方菜单操作栏(查询、以及  增加  按钮  )
    var $ = layui.$, active = {
            //查询
            reload: function () {
                var booktypename = $(&#39;#booktypename&#39;);//书籍类别名称 根据 id来取值
                console.log(booktypename.val());
                // 执行重载
                table.reload(&#39;testReload&#39;, {
                    page: {
                        curr: 1
                        // 重新从第 1 页开始
                    },
                    where: {
                        key: &#39;tname&#39;,
                        tname: booktypename.val(),
                    }
                });
            }, add: function () { //添加
                layer.open({//弹出框
                    type: 1,
                    title: &#39;添加书本类别&#39;,
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: [&#39;80%&#39;, &#39;80%&#39;],
                    content: $(&#39;#box1&#39;),
                    btn: [&#39;确定&#39;, &#39;取消&#39;],
                    yes: function (index, layero) {//确定执行函数
                    	console.log(layero);
                        //执行添加方法
                        $.getJSON(data+"/booktypeAction.action?methodName=addBookType", {
                        	tname: $("#booktypename1").val(), ///角色名
                        	/* booktypename: $("input[ name=&#39;booktypename1&#39;]").val(), *///角色名
                        }, function (data) {
                        	/*根据后台返回的参数来进行判断  */
                            if (data==1) {
                                layer.alert(&#39;添加成功&#39;, {icon: 1, title: &#39;提示&#39;}, function (i) {
                                    layer.close(i);
                                    layer.close(index);//关闭弹出层
                                    $("#booktype")[0].reset()//重置form
                                })
                                table.reload(&#39;testReload&#39;, {//重载表格
                                    page: {
                                        curr: 1
                                        // 重新从第 1 页开始
                                    }
                                })
                            } else if(data==2){
                                layer.msg(&#39;添加失败,请勿重复添加书本类别名称&#39;)
                            }
                        })

                    }, cancel: function (index, layero) {//取消
                        $("#booktype")[0].reset()//重置form  根据id
                        layer.close(index)
                    }
                });
            }
    }
    $(&#39;.layui-form .layui-btn&#39;).on(&#39;click&#39;, function () {
        var type = $(this).data(&#39;type&#39;);
        active[type] ? active[type].call(this) : &#39;&#39;;
    });
	
	
	
	/*表格 行内操作(编辑  以及  删除 按钮操作)  */
	    table.on(&#39;tool(test)&#39;, function(obj){
         var data = obj.data; //获得当前行数据
         var urlex=document.getElementById("sj").value;
         var tr=obj.tr//活动当前行tr 的  DOM对象
         console.log(data);
         var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
         if(layEvent === &#39;del&#39;){ //删除
             layer.confirm(&#39;确定删除吗？&#39;,{title:&#39;删除&#39;}, function(index){
                 //向服务端发送删除指令og
                 $.getJSON(urlex+&#39;/booktypeAction.action?methodName=deleteBookType&#39;,{tid:data.tid}, function(ret){
                         layer.close(index);//关闭弹窗
                         table.reload(&#39;testReload&#39;, {//重载表格
                             page: {
                                 curr: 1
                                 // 重新从第 1 页开始
                             }
                         })
                 });
                 layer.close(index);
             });
         } else if(layEvent === &#39;edit&#39;){ //编辑
             layer.open({
                 type: 1 //Page层类型
                 ,skin: &#39;layui-layer-molv&#39;
                 ,area: [&#39;380px&#39;, &#39;270px&#39;]
                 ,title: [&#39;编辑书本类别信息&#39;,&#39;font-size:18px&#39;]
                 ,btn: [&#39;确定&#39;, &#39;取消&#39;] 
                 ,shadeClose: true
                 ,shade: 0 //遮罩透明度
                 ,maxmin: true //允许全屏最小化
                 ,content:$(&#39;#box1&#39;)  //弹窗id
                 ,success:function(layero,index){
	                 $(&#39;#booktypeid&#39;).val(data.tid);
	                 $(&#39;#booktypename1&#39;).val(data.tname);  
                 },yes:function(index,layero){
                	/*  $.ajaxSettings.async = false; */
                	  $.getJSON(urlex+&#39;/booktypeAction.action?methodName=updateBookType&#39;,{
                		 tid: $(&#39;#booktypeid&#39;).val(),
                		  tname: $(&#39;#booktypename1&#39;).val(), 
                         tid: data.tid,
                	  },function(data){
                	  //根据后台返回的参数，来进行判断
                		  if(data>0){
                			  layer.alert(&#39;编辑成功&#39;,{icon:1,title:&#39;提示&#39;},function(i){
                				  layer.close(i);
                                  layer.close(index);//关闭弹出层
                                  $("#booktype")[0].reset()//重置form
                			  })
                			  table.reload(&#39;testReload&#39;,{//重载表格
                				  page:{
                					  curr:1
                				  }
                			  })
                		  }
                	  });
                 }
               
             
             });
         }
      
	    });
	  
});


// 实现查询所有的菜单

</script>

</html>

今回使用したjarパッケージ

Lauiui を使用して追加、削除、確認、変更操作を実装する方法

index.js

$(function () {
    $.ajax({
        type: "post",
        url: "menuAction.action?methodName=treeMenu",
        dataType: "json",
        /*data: {// 传给servlet的数据,
            role_id: MenuHid,
            right_code: "-1",
            d: new Date()
        },*/
        success: function (data) {
        	console.info(data);
            layui.tree({
                elem: &#39;#demo&#39;,// 传入元素选择器
                nodes: data,
//		     	spread:true,
                click: function (node) {// 点击tree菜单项的时候
                    var element = layui.element;
                    var exist = $("li[lay-id=&#39;" + node.id + "&#39;]").length;//判断是不是用重复的选项卡
                    if (exist > 0) {
                        element.tabChange(&#39;tabs&#39;, node.id);// 切换到已有的选项卡
                    } else {
                        if (node.attributes.menuURL != null && node.attributes.menuURL != "") {// 判断是否需要新增选项卡
                            element.tabAdd(
                                &#39;tabs&#39;,
                                {
                                    title: node.name,
                                    content: &#39;<iframe   scrolling="yes" frameborder="0" src=" &#39;
                                    + node.attributes.menuURL
                                    + &#39; " width="100%" height="100%"></iframe>&#39;// 支持传入html
                                    ,
                                    // width="99%" height="99%"
                                    id: node.id
                                });
                            element.tabChange(&#39;tabs&#39;, node.id);
                        }
                    }

                }

            });

        }

    });
})

完了!

以上がLauiui を使用して追加、削除、確認、変更操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はcsdnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
4週間前ByDDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
4週間前ByDDD
<🎜>：Dead Rails-すべての課題を完了する方法
1 か月前ByDDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
1 か月前ByDDD
もっと見る

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7698
15
Java チュートリアル
1640
14
CakePHP チュートリアル
1393
52
Laravel チュートリアル
1287
25
PHP チュートリアル
1229
29
もっと見る