<%-- Created by IntelliJ IDEA. User: 3600X Date: 2020/3/7 Time: 17:18 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="ZH_CM"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <jsp:include page="../common/css.jsp"></jsp:include> <style> .tree li { list-style-type: none; cursor: pointer; } table tbody tr:nth-child(odd) { background: #F4F4F4; } table tbody td:nth-child(even) { color: #C00; } </style> </head> <body> <jsp:include page="../common/top.jsp"></jsp:include> <div class="container-fluid"> <div class="row"> <jsp:include page="../common/sidebar.jsp"></jsp:include> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3> </div> <div class="panel-body"> <form class="form-inline" role="form" style="float:left;"> <div class="form-group has-feedback"> <div class="input-group"> <div class="input-group-addon">查询条件</div> <input class="form-control has-success" id="searchKey" type="text" placeholder="请输入查询条件"> </div> </div> <button type="button" class="btn btn-warning" id="searchBtn"><i class="glyphicon glyphicon-search"></i> 查询 </button> </form> <button id="deleteBeachIds" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除 </button> <button type="button" class="btn btn-primary" style="float:right;" data-target="#addModal" id="addBtn" ><i class="glyphicon glyphicon-plus"></i> 新增 </button> <br> <hr style="clear:both;"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th width="45">序号</th> <th width="30"><input type="checkbox" id="checkedAll" onclick="selectedAll()"></th> <th style="display: none">id</th> <th>名称</th> <th width="100">操作</th> </tr> </thead> <tbody id="tBody"> <%--<tr> <td>1</td> <td><input type="checkbox"></td> <td>PM - 项目经理</td> <td> <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button> <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button> <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button> </td> </tr>--%> </tbody> <tfoot> <tr> <td colspan="6" align="center"> <ul id="pagination" class="pagination"> <%--<li class="disabled"><a href="#">上一页</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">下一页</a></li>--%> </ul> </td> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </div> <%--添加模态框--%> <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">添加角色</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">角色名称</label> <div class="col-sm-10"> <input id="addInput" class="form-control" placeholder="请输入角色名称"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="addData()">保存</button> </div> </div> </div> </div> <%--修改模态框--%> <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">修改角色</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">角色名称</label> <div class="col-sm-10"> <input id="updateId" class="form-control" disabled style="display: none"> <input id="updateInput" class="form-control" placeholder="请输入角色名称" style="margin-top: 10px"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="updateData()">提交</button> </div> </div> </div> </div> <jsp:include page="../common/js.jsp"></jsp:include> <script type="text/javascript"> $(function () { $(".list-group-item").click(function () { if ($(this).find("ul")) { $(this).toggleClass("tree-closed"); if ($(this).hasClass("tree-closed")) { $("ul", this).hide("fast"); } else { $("ul", this).show("fast"); } } }); getData(); }); let dataParams = { "pageNum": 1, "pageSize": 4, "searchKey": $("#searchKey").val() } function getData() { console.log(dataParams) $.ajax({ type: "post", url: "${PATH}/role/getList", data: JSON.stringify(dataParams), dataType: "JSON", contentType: "application/json;charset=UTF-8", beforeSend: function () { }, success: function (result) { if (result.code === 200) { showTable(result) } } }) } function showTable(result) { console.log(result); //拼接表格之前清空tbody $("#tBody").empty() //拼接表格 let data = result.data.list console.log(data) let a=(result.data.pageNum)-1 let b=(result.data.pageSize) console.log(a*b) let content = "" $.each(data, function (i, e) { /*console.log(i) console.log(e)*/ content += '<tr> ' + ' <td >' + (a*b+i+1) + '</td> ' + ' <td><input name="checked" type="checkbox" ></td> ' + ' <td id="id" style="display: none">' + (e.id) + '</td> ' + ' <td style="color: #0f0f0f">' + (e.name) + '</td> ' + ' <td> ' + ' <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button> ' + ' <button type="button" class="btn btn-primary btn-xs" onclick="showUpdateDataModal(' + JSON.stringify(e).replace(/"/g, '"') + ')" ><i class=" glyphicon glyphicon-pencil"></i></button> ' + ' <button type="button" class="btn btn-danger btn-xs" onclick="deleteData(' + JSON.stringify(e).replace(/"/g, '"') + ')"><i class=" glyphicon glyphicon-remove"></i></button> ' + ' </td> ' + '</tr>' }) $("#tBody").html(content); //分页条拼接 //拼接前清空 $("#pagination").empty() //上一页拼接 let navigatepageNums = result.data.navigatepageNums; if (result.data.isFirstPage) { $("#pagination").append($('<li class="disabled"><a >上一页</a></li>')) } else { $("#pagination").append($('<li><a onclick="clickTopPage(' + (result.data.pageNum - 1) + ')">上一页</a></li>')) } //条码拼接 $.each(navigatepageNums, function (i, e) { /*console.log(e)*/ if (e === result.pageNum) { $("#pagination").append($('<li class="active"><a >' + e + ' <span class="sr-only">(current)</span></a></li>')) } else { $("#pagination").append($('<li><a onclick="clickCenterPage(' + (e) + ')" >' + e + '</a></li>')) } }) //下一页拼接 if (result.data.isLastPage) { $("#pagination").append($('<li class="disabled"><a href="#">下一页</a></li>')) } else { $("#pagination").append($('<li><a onclick="clickBottomPage(' + (result.data.pageNum + 1) + ')" >下一页</a></li>')) } } /*点击上一页*/ function clickTopPage(a) { dataParams.pageNum = a; getData() } /*点击中间条码*/ function clickCenterPage(a) { dataParams.pageNum = a; getData() } /*点击下一页*/ function clickBottomPage(a) { console.log(a) dataParams.pageNum = a; getData() } /*查询按钮*/ $("#searchBtn").click(function () { dataParams.searchKey = $("#searchKey").val() getData(); }) /*打开添加模态框*/ $("#addBtn").click(function () { $("#addModal").modal({ show: true, keyboard: true, backdrop: true }) }) /*保存数据*/ function addData() { let addParams = { name: $("#addInput").val() } $.ajax({ type: "POST", url: "${PATH}/role/add", data: JSON.stringify(addParams), dataType: "JSON", contentType: "application/json;charset=UTF-8", beforeSend: function () { let name = $("#addInput").val() if (name.trim() === "") { window.alert("请填入数据在保存") return false } }, success: function (result) { let data = result if (data.code == 200) { //提示保存成功的消息 //跳转到主页面 $("#addModal").modal('hide') //把输入框清空 $("#addInput").val("") //刷新数据 getData() } } }) } /*删除数据*/ function deleteData(a) { $.ajax({ type: "DELETE", url: "${PATH}/role/delete/" + a.id, dataType: "JSON", contentType: "application/json;charset=UTF-8", beforeSend: function () { var statu = confirm("您是否确定删【" + a.name + "】这个角色?");//在js里面写confirm，在页面中弹出提示信息。 if (!statu)//如果点击的是取消 { return false;//返回页面 } else { return true } }, success: function (result) { if (result.code === 200) { //提示删除成功 //更新数据 getData(); } } }) } /*打开修改模态框*/ function showUpdateDataModal(a) { console.log(a) //给模态框赋值回显 $("#updateId").val(a.id); $("#updateInput").val(a.name) //打开模态框 $("#updateModal").modal({ show: true, keyboard: true, backdrop: true }) } function updateData() { let updateParams = { id: $("#updateId").val(), name: $("#updateInput").val() } $.ajax({ type: "POST", data: JSON.stringify(updateParams), url: "${PATH}/role/update", dataType: "JSON", contentType: "application/json;charset=UTF-8", beforeSend: function () { }, success: function (result) { if (result.code === 200) { //提示保存成功的消息 //跳转到主页面 $("#updateModal").modal('hide') //把输入框清空 $("#updateInput").val("") //刷新数据 dataParams.pageNum = 0 getData() } } }) } /** * 批量选择 */ function selectedAll() { let checkedAll=document.getElementById("checkedAll") //getElementById得到的是单个元素 let checked=document.getElementsByName("checked")//getElementsByName得到的是数组 console.log(checked.length) if(checkedAll.checked===true){ for (let i=0;i<checked.length;i++){ checked[i].checked=true; } }else { for (let i=0;i<checked.length;i++){ checked[i].checked=false; } } } /** * 批量删除 * * 为了方便根据角色id批量删除，在拼接表格时加上了一列角色id 但是为了不让看见设置了display=none */ $("#deleteBeachIds").click(function () { let roleIds = [] let roleName=[] let checked=document.getElementsByName("checked") for (let i=0;i<checked.length;i++){ if (checked[i].checked===true){//获取被选中的 let id=$(checked[i]).parent("td").next()//获取被选中的的父节td的下一个节点 就是id也就是角色id let name=$(checked[i]).parent("td").next().next(); /* console.log($(id).text())*/ roleIds.push($(id).text()) roleName.push($(name).text()) } } if (roleIds.length===0){ window.confirm("请选择在删除") return } $.ajax({ type:"DELETE", url:"${PATH}/role/deleteRoleIds", data:JSON.stringify({roleIds:roleIds.join(",")}), contentType:"application/json", beforeSend:function(){ var statu = confirm("您是否确定删【" + roleName + "】这个角色?");//在js里面写confirm，在页面中弹出提示信息。 let checked=document.getElementsByName("checked")//getElementsByName得到的是数组 if (!statu)//如果点击的是取消 { for (let i=0;i<checked.length;i++){//取消勾选 checked[i].checked=false; } return false;//返回页面 } else { return true } }, success:function (result) { if (result.code===200){ getData(); } } }) }) </script> </body> </html>
package com.ytkj.rose.controller; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.ytkj.rose.bean.TRole; import com.ytkj.rose.service.TRoleService; import com.ytkj.rose.util.CodeMsgEnum; import com.ytkj.rose.util.Result; import com.ytkj.rose.util.ResultUtil; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @Controller public class TRoleController { @Autowired private TRoleService tRoleService; @RequestMapping("/role/index") public String toRoleIndex(){ return "role/index"; } @RequestMapping(value = "/role/getList",method = RequestMethod.POST) @ResponseBody public Result<TRole> getData(@RequestBody Map<String,String> map){ PageInfo<TRole> pageInfo=tRoleService.getList(map); return ResultUtil.success(pageInfo); } @RequestMapping(value = "/role/add",method = RequestMethod.POST) @ResponseBody public Result<TRole> add(@RequestBody TRole tRole){ tRoleService.addData(tRole); return ResultUtil.success(); } @RequestMapping(value = "/role/delete/{id}",method = RequestMethod.DELETE) @ResponseBody public Result<TRole> deleteData(@PathVariable("id") Integer id){ tRoleService.deleteDataById(id); return ResultUtil.success(); } @RequestMapping(value = "/role/update",method = RequestMethod.POST) @ResponseBody public Result<TRole> update(@RequestBody TRole tRole){ tRoleService.updateData(tRole); return ResultUtil.success(); } @RequestMapping(value = "role/deleteRoleIds",method = RequestMethod.DELETE) @ResponseBody public Result<TRole> deleteByRoleIds(@RequestBody Map<String,String> map){ String roleIds = map.get("roleIds"); List<Integer> roleIdslist=new ArrayList<>(); String[] split = roleIds.split(","); for (String s : split) { int roleId = Integer.parseInt(s); roleIdslist.add(roleId); } tRoleService.deleteByRoleIds(roleIdslist); return ResultUtil.success(); } }
package com.ytkj.rose.service; import com.github.pagehelper.PageInfo; import com.ytkj.rose.bean.TRole; import java.util.List; import java.util.Map; public interface TRoleService { PageInfo<TRole> getList(Map<String, String> map); void addData(TRole tRole); void deleteDataById(Integer id); void updateData(TRole tRole); void deleteByRoleIds(List<Integer> roleIdlist); }
package com.ytkj.rose.service.impl; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.ytkj.rose.bean.TRole; import com.ytkj.rose.mapper.TRoleMapper; import com.ytkj.rose.service.TRoleService; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; import java.util.Map; @Service public class TRoleServiceImpl implements TRoleService { Logger logger= LoggerFactory.getLogger(TRoleServiceImpl.class); @Autowired private TRoleMapper tRoleMapper; @Override public PageInfo<TRole> getList(Map<String, String> map) { String pageNum = map.get("pageNum"); String pageSize = map.get("pageSize"); String searchKey = map.get("searchKey"); PageHelper.startPage(Integer.valueOf(pageNum),Integer.valueOf(pageSize)); List<TRole> list = tRoleMapper.getList(searchKey.trim()); PageInfo<TRole> pageInfo=new PageInfo<>(list); return pageInfo; } @Override public void addData(TRole tRole) { tRoleMapper.addData(tRole); } @Override public void deleteDataById(Integer id) { tRoleMapper.removeDataById(id); } @Override public void updateData(TRole tRole) { tRoleMapper.updateRole(tRole); } @Override public void deleteByRoleIds(List<Integer> roleIdlist) { tRoleMapper.removeByRoleIds(roleIdlist); } }
package com.ytkj.rose.mapper; import com.github.pagehelper.PageInfo; import com.ytkj.rose.bean.TRole; import org.apache.ibatis.annotations.Param; import java.util.List; import java.util.Map; public interface TRoleMapper { List<TRole> getList( @Param("searchKey") String searchKey); void addData(TRole tRole); void removeDataById(Integer id); void updateRole(TRole tRole); void removeByRoleIds(@Param("roleIdlist") List<Integer> roleIdlist); }
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.ytkj.rose.mapper.TRoleMapper"> <select id="getList" resultType="com.ytkj.rose.bean.TRole"> select * from t_role t <where > <if test="searchKey!=null and searchKey!=''"> t.name=#{searchKey} </if> </where> </select> <insert id="addData" parameterType="com.ytkj.rose.bean.TRole"> insert into t_role (name) values (#{name}) </insert> <delete id="removeDataById" parameterType="int"> delete from t_role where id=#{id} </delete> <update id="updateRole" parameterType="com.ytkj.rose.bean.TRole"> update t_role set name=#{name} where id=${id} </update> <delete id="removeByRoleIds" parameterType="java.util.List"> delete from t_role where id in <foreach collection="roleIdlist" item="item" open="(" separator="," close=")"> #{item} </foreach> </delete> </mapper>
