ssm整合layui

ssm整合-layui-增删改查

1.配置文件

第一步:导入依赖(就是我们说的jar包,可以根据下方的依赖名称去下载jar)

<dependencies>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.13</version>
    </dependency>
    <!--数据库驱动-->
    <dependency>
        <groupId>com.oracle</groupId>
        <artifactId>ojdbc6</artifactId>
        <version>12.1.0.1-atlassian-hosted</version>
    </dependency>
    <!--数据库连接池-->
    <!-- https://mvnrepository.com/artifact/com.mchange/c3p0 -->
    <dependency>
        <groupId>com.mchange</groupId>
        <artifactId>c3p0</artifactId>
        <version>0.9.5.5</version>
    </dependency>
    <!-- servlet  jsp-->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api -->
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.2</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.5.4</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.4</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.2.4.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>5.2.4.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <!--这是转成Json的jar包,当然你也可以用fastjson Alibaba的jar-->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.10.2</version>
    </dependency>

</dependencies>

第二步:配置mybatis

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <!--配置控制台日志 这里用的日志输出不是log4j-->
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
    <typeAliases>
        <package name="com.aaa.pojo"/>
    </typeAliases>

</configuration>

第三步:配置spring-dao(只用来注册数据源和注册SqlsessionFactory)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd

">
    <!--管理配置文件-->
    <!--注册数据源-->
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="oracle.jdbc.OracleDriver"/>
        <property name="url" value="jdbc:oracle:thin:@localhost:1521:orcl"/>
        <property name="username" value="scott"/>
        <property name="password" value="tiger"/>
    </bean>
    <!--注册-->
    <bean id="sessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <!--绑定mapper.xml 文件-->
        <property name="mapperLocations" value="classpath*:com/aaa/dao/**/*.xml"/>
        <!--绑定mybatis配置文件-->
        <property name="configLocation" value="classpath:mybaits-config.xml"/>
    </bean>
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="sqlSessionFactoryBeanName" value="sessionFactoryBean"/>
        <property name="basePackage" value="com.aaa.dao"/>

    </bean>
</beans>

第四步:配置spring-sevice(这里是只配置事务和service层的东西)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://mybatis.org/schema/mybatis-spring"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring.xsd">

        <!--扫描包-->
    <context:scan base-package="com.aaa.service"/>
    <!--将我们的业务实现类注入到spring中-->
    <bean id="booksService" class="com.aaa.service.BooksServiceImpl">
    </bean>
    <!--配置声明式事务-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>


</beans>

第五步:配置spring-mvc(这里主要用来配置控制器层)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
         http://www.springframework.org/schema/context
         https://www.springframework.org/schema/context/spring-context.xsd
          http://www.springframework.org/schema/mvc
          https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--增加注解驱动-->
    <mvc:annotation-driven/>
    <!--过滤静态资源 如:.mp3 等-->
    <mvc:default-servlet-handler/>
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    <!--扫描控制器层的包-->
    <context:component-scan base-package="com.aaa.controller"/>
    <!--JSON乱码问题配置-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="utf-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
</beans>

第六步:配置applicationContext.xml 这是总的配置文件(把上述三个配置文件整合到一起)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<import resource="classpath:spring-dao.xml"/>
    <import resource="classpath:spring-service.xml"/>
    <import resource="classpath:spring-mvc.xml"/>
</beans>

第七步:配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--配置springmvc 层-->
    <!--第一步,注册DispatchServlet-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <!--启动级别-->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!--配置字符过滤器-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

至此:ssm的配置就完成了

2.编写代码

2.1 :编写实体类

2.1.1:这是你数据中的表对应的实体类
package com.aaa.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

public class Books {
    private int  BookId;
    private  String BookName;
    private int BookCount;
    private  String Detail;

    public Books(int bookId, String bookName) {
        BookId = bookId;
        BookName = bookName;
    }
}

2.2.2:使用layui中必须的要有这个类(因为要解析成layui的数据格式)
package com.aaa.pojo;

import java.io.Serializable;

public class Test  implements Serializable {
    private Integer code;//这是是响应码
    private  Object data;
    public Test() {

    }
    public Test(Integer code) {
        this.code = code;


    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

2.2:编写dao层

2.2.1:BooksMapper 接口
package com.aaa.dao;

import com.aaa.pojo.Books;
import com.aaa.pojo.Test;

import java.util.List;
import java.util.Map;

public interface BooksMapper {
    //查询全部
    List<Books> queryAll();
        //根据条件进行查询
    List<Books> queryOnes(int BookId); //因为layui中要解析的数据格式不一样,所以使用集合
    //增加
    int addBooks(Books books);
    //删除
    int  deleteBooks(int BookId);
    //修改
    int updateBooks(Books books);
}
2.2.2:BooksMapper.xml 文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--核心配置文件 就是接口名 绑定接口 -->
<mapper namespace="com.aaa.dao.BooksMapper">
<select id="queryAll" resultType="books">
    select * from BOOKS order by BOOKID asc
</select>
    <select id="queryOnes" resultType="books">
        select * from BOOKS
        <where>
            BOOKID=#{BookId}
        </where>
    </select>
    <insert id="addBooks" parameterType="books">
        insert into BOOKS (BOOKID,BOOKNAME,BOOKCOUNT,DETAIL)
        values(#{BookId},#{BookName},#{BookCount},#{Detail})
    </insert>
    <update id="updateBooks" parameterType="books">
        update BOOKS set BOOKNAME=#{BookName} where BOOKID=#{BookId}
    </update>

    <delete id="deleteBooks" parameterType="_int">
        delete from BOOKS where BOOKID=#{BookId}
    </delete>
</mapper>

2.3:编写service层

2.3.1:BooksService接口
package com.aaa.service;

import com.aaa.pojo.Books;
import com.aaa.pojo.Test;

import java.util.List;
import java.util.Map;

public interface BooksService {
  
    //查询全部
    List<Books> queryAll();
    //根据条件进行查询
     List<Books> queryOnes(int BookId);
    //增加
    int addBooks(Books books);
    //删除
    int  deleteBooks(int BookId);
    //修改
    int updateBooks(Books books);
}
2.3.2:BookServiceImpl 实现类(这里用到了一个自动装配的注解 @Autowired)
package com.aaa.service;

import com.aaa.dao.BooksMapper;
import com.aaa.pojo.Books;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

public class BooksServiceImpl implements BooksService {
    @Autowired
    private BooksMapper booksMapper;

    public List<Books> queryOnes(int BookId) {
        return booksMapper.queryOnes(BookId);
    }

    public List<Books> queryAll() {
        return booksMapper.queryAll();
    }
    public int addBooks(Books books) {
        return booksMapper.addBooks(books);
    }

    public int deleteBooks(int BookId) {
        return booksMapper.deleteBooks(BookId);
    }

    public int updateBooks(Books books) {
        return booksMapper.updateBooks(books);
    }
}

2.4编写控制器层

package com.aaa.controller;

import com.aaa.pojo.Books;
import com.aaa.pojo.Test;
import com.aaa.service.BooksService;
import com.aaa.until.LayUiCode;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.omg.PortableInterceptor.INACTIVE;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.List;

@Controller
@RequestMapping("/u1")
public class MyController {
    @Autowired
    @Qualifier("booksService")
    private BooksService booksService;
    //跳转路径
    @RequestMapping("/test")
    public String test(Model model){
        List<Books> list = booksService.queryAll();
        model.addAttribute("list",list);
        return "queryALL";
    }
    //查询全部书籍
    @GetMapping("/queryAll")
    @ResponseBody
    public  String queryAll() throws JsonProcessingException {
        List<Books> list = booksService.queryAll();
        Test test = LayUiCode.LayCode(list);
        ObjectMapper mapper=new ObjectMapper();
        String s = mapper.writeValueAsString(test);
        return s;
    }
    //查询单个书籍
    @GetMapping("/queryAll2")
    @ResponseBody
    public  String queryAlls(int bookIds) throws JsonProcessingException {
        List<Books> list = booksService.queryOnes(bookIds);
        Test test = LayUiCode.LayCode(list);
        ObjectMapper mapper=new ObjectMapper();
        String s = mapper.writeValueAsString(test);
        return s;
    }
    //增加书籍
    @PostMapping("/addBooks")
    @ResponseBody
    public String addBooks(HttpServletRequest request, HttpServletResponse response) throws JsonProcessingException {
        String bian = request.getParameter("bian");
        int i= Integer.parseInt(bian);
        String ming = request.getParameter("ming");
        int count= Integer.parseInt(request.getParameter("count"));
        String miaoshu = request.getParameter("miaoshu");
        Books books=new Books(i,ming,count,miaoshu);
        int i1 = booksService.addBooks(books);
        String s = JSON.toJSONString(books);
        return  s;

    }
    //删除书籍
    @PostMapping("/deleteBooks")
    @ResponseBody
    public String deleteBooks(int bookId) throws JsonProcessingException {
        int i = booksService.deleteBooks(bookId);
        ObjectMapper mapper=new ObjectMapper();
        String s = mapper.writeValueAsString(i);
        return  s;

    }
    //修改书籍
    @PostMapping("/updateBooks")
    @ResponseBody
    public String updateBooks(int bookId,String bookName) throws JsonProcessingException 	{
        Books books=new Books(bookId,bookName);
        int i = booksService.updateBooks(books);
       ObjectMapper mapper=new ObjectMapper();
        String s = mapper.writeValueAsString(i);
        System.out.println("测试值是"+i);
        System.out.println("得到的值是"+bookName);
        return  s;

    }

	}

2.4:工具类

(这里只是封装一下layui的响应格式)预防前端报错

package com.aaa.until;

import com.aaa.pojo.Test;

import java.util.List;

public class LayUiCode {
    public static  Test LayCode(Object object){
        Test test=new Test(200);
        test.setData(object);
        return test;
    }
}

2.5 编写jsp页面

2.5.1 跳转页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>跳转页面</title>
  </head>
  <body>
<a href="${pageContext.request.contextPath}/u1/test">跳转页面</a>
  </body>
</html>
2.5.2 :增删改查页面queryALL.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查询所有的书籍</title>

    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="../../static/layui/layui.js"></script>
</head>
<body>
<div class="layui-form layui-form-pane" style="padding:80px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">书籍编号</label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" placeholder="请输入书籍编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <select id="bookId" name="bookId">
                    <option value="">请选择书籍</option>
                    <c:forEach items="${list}" var="mc">
                        <option value="${mc.bookId}">${mc.bookName}</option>
                    </c:forEach>
                </select>
             </div>
        </div>
        <button class="layui-btn"  id="cha">查询</button>
    </div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
    </div>
</script>
<script type="text/html" id="barDemo" lay-filter="test">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
    <%--增加的页面层---%>
    <script type="text/html" id="addForm" lay-filter="addForm">
       <form class="layui-form layui-form-pane" style="padding-top:30px;padding-left:100px;">
           <div class="layui-form-item">
               <label class="layui-form-label">书籍编号</label>
               <div class="layui-input-inline">
                   <input type="text" lay-verify="require|number" lay-reqText="请输入书籍号" class="layui-input" name="bian" id="bian" placeholder="请输入书籍编号"/>
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">书籍名称</label>
               <div class="layui-input-inline">
                   <input type="text"   lay-verify="require" class="layui-input" name="ming" id="ming" placeholder="请输入书籍名称"/>
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">书籍数量</label>
               <div class="layui-input-inline">
                   <input type="text" lay-verify="require|number" class="layui-input" name="count"  placeholder="请输入书籍数量"/>
               </div>
           </div>
           <div class="layui-form-item layui-form-text" style="width:300px;">
               <label class="layui-form-label">书籍描述</label>
               <div class="layui-input-block">
                   <textarea name="miaoshu"  lay-verify="require" placeholder="请输入" class="layui-textarea"></textarea>
               </div>
           </div>
           <div class="layui-form-item">
               <div class="layui-input-inline">
                   <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
               </div>
           </div>
       </form>
    </script>
    <%--修改的页面层--%>
    <script type="text/html" id="updateForm" lay-filter="updateForm">
        <form lay-filter="dFrm" class="layui-form layui-form-pane" style="padding-top:30px;padding-left:100px;">
            <div class="layui-form-item" style="display:none;">
                <label class="layui-form-label">书籍编号</label>
                <div class="layui-input-inline">
                    <input type="text"  lay-verify="require" class="layui-input" name="hao" id="hao" placeholder="请输入书籍名称"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">书籍名称</label>
                <div class="layui-input-inline">
                    <input type="text"  lay-verify="require" class="layui-input" name="username" id="username" placeholder="请输入书籍名称"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="" lay-event="edit">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>
</div>
</body>
</html>
<script type="text/javascript">
    layui.use(['table','jquery','form','layer'], function(){
        var table = layui.table;
        var $=layui.jquery;
        var form=layui.form;
        var layer=layui.layer;
          var tab=table.render({
            id:"dataTable"
            ,elem: '#test'
            ,url:'${pageContext.request.contextPath}/u1/queryAll'
            ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                ,defaultToolbar:[]
                ,width:1200
                ,response: {
                   statusCode: 200 //规定成功的状态码,默认:0
                }
                //field :是数据库中查询到的东西
                ,cols: [[
                {type: 'checkbox', fixed: 'left',width:80}
                ,{field:'bookId', title:'书籍Id', fixed: 'left',align:'center',sort:true}
                ,{field:'bookCount', title:'书籍数量',align:'center'}
                ,{field:'bookName', title:'书籍名称',align:'center'}
                ,{field:'detail', title:'书籍描述',align:'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}
            ]]

        });
            //表格重载
        //这里以搜索为例
        $("#cha").on("click",function () {
            // 搜索条件
            var send_data = $('#bookId').val();
           tab.reload({
               method:'get',
               where:{
                   'bookIds':send_data//bookIds是传到后台的东西
               },
               url:"${pageContext.request.contextPath}/u1/queryAll2"
           })
        });
        //监听工具栏头事件
        var tal= table.on('toolbar(test)', function(obj){
            //获取选中行
           /* var checkStatus = table.checkStatus("dataTable");*/
            switch(obj.event){
                case 'add':
                    layer.open({
                       type:1 //1代表页面层
                       ,title:'添加' //标题
                       ,content:$("#addForm").html()//内容
                       ,skin:'layui-layer-molv'//皮肤
                       ,area: ['500px', '500px']//宽高
                        ,success:function () {
                            form.render();//重新渲染
                        }
                         });
                    break;
                    //批量删除
                case 'delete':
                    layer.msg("删除");
                    break;
            }
        });
        //监听提交事件
        form.on("submit(demo1)",function (data) {
            //增加
            $.post("${pageContext.request.contextPath}/u1/addBooks",data.field,function (data) {
                if(data.code!=200){
                    layer.msg(data);
                }
                 //关闭弹出窗并且刷新页面
                    layer.close(layer.index);
                    window.parent.location.reload();

                 });
            return false;
        });
        //监听行工具栏
     /*   table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    $.post("/u1/deleteBooks",{bookId:data.bookId},function (data) {
                        console.log(data)
                        if (data==='1'){
                                obj.del();
                                layer.close(index);
                            }
                    })
                });
            } else if(layEvent === 'edit'){
                  //  openUpdateUser(obj);
             }
        });
*/
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;//获得当前行数据
            //删除
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    $.post("${pageContext.request.contextPath}/u1/deleteBooks",{bookId:data.bookId},function (data) {
                        console.log(data)
                        if (data==='1'){
                            obj.del();
                            layer.close(index);
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                //修改
                openUpdateUser(data);
            }
        });
         //打开修改页面
        function openUpdateUser(data){
          layer.open({
                type: 1,
                title:"修改数据",
                content: $('#updateForm').html()
                ,area:['600px','200px']
                ,skin: 'layui-layer-molv',
                success: function(index){
                    //为这个表单赋值
                   form.val("dFrm",{
                       'username':data.bookName,
                       'hao':data.bookId
                   })
                }

            }
            )};
        //监听这个修改的按钮
     form.on("submit(dFrm)",function () {
            //修改
            $.post("${pageContext.request.contextPath}/u1/updateBooks",{'bookId':$("#hao").val(),'bookName':$("#username").val()},function (data) {
                if(data==='1'){
                    layer.close(layer.index);
                    tab.reload()
                }
                });
            return false;
        });
    });
</script>

注意:因为queryALL.jsp在WEB-INF下jsp这个包中,所以我们直接访问queryALL.jsp访问不到,所以我们要进行跳转

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值