大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下怎么利用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 List
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 Mapattributes = 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); List
mvc.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实现增删查改操作的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!