怎么利用layui实现增删查改操作
                                            小编给大家分享一下怎么利用layui实现增删查改操作,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
专注于为中小企业提供网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业凉山州免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
首先认识layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。
下载之后导进css、js样式
简单的效果图

接下来直接上代码
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 Listentity一个树形的实体类
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 attributes = new HashMap<>();
	private List 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 getAttributes() {
		return attributes;
	}
	public void setAttributes(Map attributes) {
		this.attributes = attributes;
	}
	public List getChildren() {
		return children;
	}
	public void setChildren(List children) {
		this.children = children;
	}
	public TreeNode(String id, String text, Map attributes, List 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 + "]";
	}
}        action子控制器
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);
			Listmvc.xml的配置路径
web.xml的配置路径
Mvc_Layui encodingFiter com.chen.util.EncodingFiter encodingFiter /* dispatherServlet com.chen.framework.DispatherServlet xmlPath /mvc.xml dispatherServlet *.action 
jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ include file="/jsp/common/head.jsp" %>    
Insert title here 
    
 
    
        
        
            
        
        
        
    
   
本次所用到的jar包

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: '#demo',// 传入元素选择器
                nodes: data,
//		     	spread:true,
                click: function (node) {// 点击tree菜单项的时候
                    var element = layui.element;
                    var exist = $("li[lay-id='" + node.id + "']").length;//判断是不是用重复的选项卡
                    if (exist > 0) {
                        element.tabChange('tabs', node.id);// 切换到已有的选项卡
                    } else {
                        if (node.attributes.menuURL != null && node.attributes.menuURL != "") {// 判断是否需要新增选项卡
                            element.tabAdd(
                                'tabs',
                                {
                                    title: node.name,
                                    content: ''// 支持传入html
                                    ,
                                    // width="99%" height="99%"
                                    id: node.id
                                });
                            element.tabChange('tabs', node.id);
                        }
                    }
                }
            });
        }
    });
})完成!
以上是怎么利用layui实现增删查改操作的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网页标题:怎么利用layui实现增删查改操作
转载源于:http://www.cqwzjz.cn/article/jdeehd.html

 建站
建站
 咨询
咨询 售后
售后
 建站咨询
建站咨询 
 