六、模塊實現：權限管理模塊（2）

1. 權限管理模塊
  1. 權限model類

在包“com.example.demo.model”中新建一個“Permission”類（如果自己添加model類時，只須定義好屬性，然後利用eclipse的生成getter和setter功能，直接生成代碼），代碼如下：

package com.example.demo.model;

import com.baomidou.mybatisplus.annotations.TableId;

import com.baomidou.mybatisplus.annotations.TableName;

@TableName("t_sys_permission")//數據庫對應表名

public class Permission {

@TableId

private String id;//@TableId表示主鍵，與字段名稱大小寫一致

private String name;//與字段名稱大小寫一致

private String descripion;//與字段名稱大小寫一致

private String url;//與字段名稱大小寫一致

private String pid;//與字段名稱大小寫一致

private String perms;//與字段名稱大小寫一致

private Integer type;//與字段名稱大小寫一致

private String icon;//與字段名稱大小寫一致

private Integer order_num;//與字段名稱大小寫一致

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 String getDescripion() {

return descripion;

}

public void setDescripion(String descripion) {

this.descripion = descripion;

}

public String getUrl() {

return url;

}

public void setUrl(String url) {

this.url = url;

}

public String getPid() {

return pid;

}

public void setPid(String pid) {

this.pid = pid;

}

public String getPerms() {

return perms;

}

public void setPerms(String perms) {

this.perms = perms;

}

public Integer getType() {

return type;

}

public void setType(Integer type) {

this.type = type;

}

public String getIcon() {

return icon;

}

public void setIcon(String icon) {

this.icon = icon;

}

public Integer getOrder_num() {

return order_num;

}

public void setOrder_num(Integer order_num) {

this.order_num = order_num;

}

在包“com.example.demo.model”中再新建一個“RolePermission”類（用來操作關聯表），代碼如下：

package com.example.demo.model;

import com.baomidou.mybatisplus.annotations.TableId;

import com.baomidou.mybatisplus.annotations.TableName;

@TableName("t_sys_permission_role")//數據庫對應表名，關聯表

public class RolePermission {

@TableId

private String id;//@TableId表示主鍵，與字段名稱大小寫一致

private String sys_role_id;//與字段名稱大小寫一致

private String sys_permission_id;//與字段名稱大小寫一致

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getSys_role_id() {

return sys_role_id;

}

public void setSys_role_id(String sys_role_id) {

this.sys_role_id = sys_role_id;

}

public String getSys_permission_id() {

return sys_permission_id;

}

public void setSys_permission_id(String sys_permission_id) {

this.sys_permission_id = sys_permission_id;

}

在包“com.example.demo.model”中再新建一個“Role”類（因爲需要用到角色，所以角色model先創建好），代碼如下：

package com.example.demo.model;

import com.baomidou.mybatisplus.annotations.TableId;

import com.baomidou.mybatisplus.annotations.TableName;

@TableName("t_sys_role")//數據庫對應表名

public class Role {

@TableId

private String id;//@TableId表示主鍵，與字段名稱大小寫一致

private String name;//與字段名稱大小寫一致

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;

}

1. 1. 權限vo類

在包“com.example.demo.vo”中新建一個“PermissionVO”類（如果自己添加類時，只須定義好屬性，然後利用eclipse的生成getter和setter功能，直接生成代碼），代碼如下：

package com.example.demo.vo;

public class PermissionVO{

private String id;

private String name;

private String descripion;

private String url;

private String pid;

private String perms;

private Integer type;

private String icon;

private Integer order_num;

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 String getDescripion() {

return descripion;

}

public void setDescripion(String descripion) {

this.descripion = descripion;

}

public String getUrl() {

return url;

}

public void setUrl(String url) {

this.url = url;

}

public String getPid() {

return pid;

}

public void setPid(String pid) {

this.pid = pid;

}

public String getPerms() {

return perms;

}

public void setPerms(String perms) {

this.perms = perms;

}

public Integer getType() {

return type;

}

public void setType(Integer type) {

this.type = type;

}

public String getIcon() {

return icon;

}

public void setIcon(String icon) {

this.icon = icon;

}

public Integer getOrder_num() {

return order_num;

}

public void setOrder_num(Integer order_num) {

this.order_num = order_num;

}

1. 1. 權限mapper類以及xml文件

在包“com.example.demo.mapper”中新建一個“PermissionMapper”接口，代碼如下：

package com.example.demo.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.baomidou.mybatisplus.mapper.BaseMapper;

import com.baomidou.mybatisplus.plugins.pagination.Pagination;

import com.example.demo.model.Permission;

import com.example.demo.vo.PermissionVO;

@Mapper

public interface PermissionMapper extends BaseMapper<Permission>{

List<PermissionVO> selectPermissionListPage(Pagination page ,PermissionVO permissionVO);

List<PermissionVO> selectUserPermissionList(String userid);

}

在“src/main/resources”中的“mapper”文件夾中，新建一個文件，命名爲“PermissionMapper.xml”，代碼如下：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

SELECT

p.id as id,

p.name as name,

p.descripion as descripion,

p.url as url,

p.pid as pid,

p.perms as perms,

p.type as type,

p.icon as icon,

p.order_num as order_num

FROM

t_sys_permission p

WHERE 1=1

and p.name like concat('%',#{name},'%')

</if>

and p.url like concat('%',#{url},'%')

</if>

</select>

SELECT

pr.sys_permission_id as id

FROM

t_sys_user u

INNER JOIN t_sys_role_user ru ON u.id = ru.sys_user_id

INNER JOIN t_sys_permission_role pr ON ru.sys_role_id = pr.sys_role_id

WHERE

u.id = #{userid}

</select>

</mapper>

這裏的xml文件除了擴展分頁查詢，還擴展了一個連接查詢，查詢出用戶擁有的全部權限（菜單）。

在包“com.example.demo.mapper”中再新建一個“RolePermissionMapper”接口，代碼如下：

package com.example.demo.mapper;

import org.apache.ibatis.annotations.Mapper;

import com.baomidou.mybatisplus.mapper.BaseMapper;

import com.example.demo.model.RolePermission;

@Mapper

public interface RolePermissionMapper extends BaseMapper<RolePermission>{

}

該接口只繼承了通用mapper，不做擴展。

1. 1. 權限service類

在包“com.example.demo.service”中新建一個“PermissionService”類，代碼如下：

package com.example.demo.service;

import java.util.ArrayList;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Transactional;

import org.springframework.util.StringUtils;

import com.baomidou.mybatisplus.mapper.EntityWrapper;

import com.baomidou.mybatisplus.plugins.Page;

import com.example.demo.mapper.PermissionMapper;

import com.example.demo.mapper.RolePermissionMapper;

import com.example.demo.model.Permission;

import com.example.demo.model.Role;

import com.example.demo.model.RolePermission;

import com.example.demo.util.Convert;

import com.example.demo.util.SnowflakeIdWorker;

import com.example.demo.vo.DataTableResult;

import com.example.demo.vo.Menu;

import com.example.demo.vo.MenuList;

import com.example.demo.vo.PermissionVO;

@Service

public class PermissionService {

@Autowired

private PermissionMapper permissionMapper;// 注入mapper進行數據操作

@Autowired

private RolePermissionMapper rolePermissionMapper;// 注入mapper進行數據操作

// 對於執行數據修改的方法加上事務處理

@Transactional

public int delete(String ids) {

// ids,逗號隔開的主鍵

List<String> listid = Convert.toListStrArray(ids);

return permissionMapper.deleteBatchIds(listid);

}

public Permission selectById(String id) {

// permissionMapper.selectOne(permission),selectOne可以按照其他字段來查詢一條記錄

return permissionMapper.selectById(id);

}

// 對於執行數據修改的方法加上事務處理

@Transactional

public int updateById(Permission permission) {

return permissionMapper.updateById(permission);

}

// 對於執行數據修改的方法加上事務處理

@Transactional

public int insert(Permission permission) {

// 添加雪花主鍵id

permission.setId(SnowflakeIdWorker.getUUID());

int n = permissionMapper.insert(permission);

// n=1/0; //事務測試

return n;

}

/**

* 採用集成的查詢方法

* @param username

* @return

public List<Permission> selectList() {

EntityWrapper<Permission> wrapper = new EntityWrapper<Permission>();

// wrapper.like("username", username);

return permissionMapper.selectList(wrapper);

}

/**

* 返回角色所有權限

* @param role

* @return

public List<RolePermission> selectRolePermission(Role role) {

EntityWrapper<RolePermission> wrapper = new EntityWrapper<RolePermission>();

wrapper.eq("sys_role_id", role.getId());// 可以多個條件

return rolePermissionMapper.selectList(wrapper);

}

// 對於執行數據修改的方法加上事務處理

@Transactional

public void author(Role role, String ids) {

// 1.清除原有分配

EntityWrapper<RolePermission> wrapper = new EntityWrapper<RolePermission>();

wrapper.eq("sys_role_id", role.getId());// 可以多個條件

rolePermissionMapper.delete(wrapper);

// 2.重新插入權限

if (!StringUtils.isEmpty(ids)) {

List<String> listrid = Convert.toListStrArray(ids);

SnowflakeIdWorker idWorker = new SnowflakeIdWorker(0, 0);

for (String pid : listrid) {

RolePermission rp = new RolePermission();

rp.setId(String.valueOf(idWorker.nextId()));

rp.setSys_role_id(role.getId());

rp.setSys_permission_id(pid);

rolePermissionMapper.insert(rp);

}

/**

* 分頁查詢

* @param permission

* @return

public DataTableResult selectPermissionListPage(PermissionVO permissionVO, int start, int length, String orderField,

String orderDir) {

Page<PermissionVO> page = null;

// 排序

if (!StringUtils.isEmpty(orderDir) && !StringUtils.isEmpty(orderField)) {

if (orderDir.equals("asc")) {

page = new Page<>(start / length + 1, length, orderField, true);// 當前頁，每頁總條數構造 page 對象

} else {

page = new Page<>(start / length + 1, length, orderField, false);// 當前頁，每頁總條數構造 page 對象

}

} else {

page = new Page<>(start / length + 1, length, "id", false);// 默認id降序

}

page.setRecords(permissionMapper.selectPermissionListPage(page, permissionVO));

DataTableResult result = new DataTableResult();

result.setRecordsTotal(page.getTotal());

result.setRecordsFiltered(page.getTotal());

result.setData(page.getRecords());

return result;

}

public List<Permission> getRootMenu() {

EntityWrapper<Permission> wrapper = new EntityWrapper<Permission>();

wrapper.eq("pid", 0);

return permissionMapper.selectList(wrapper);

}

public List<Permission> getSubMenu(String pid) {

EntityWrapper<Permission> wrapper = new EntityWrapper<Permission>();

wrapper.eq("pid", pid);

return permissionMapper.selectList(wrapper);

}

public List<MenuList> getUserMenu(String userid){

List<MenuList> menulist = new ArrayList<MenuList>();

//1.查詢用戶的菜單id

List<PermissionVO> userPermissionList = permissionMapper.selectUserPermissionList(userid);

//2.構造菜單結構

List<Permission> rootMenuList = getRootMenu();

for(Permission p:rootMenuList) {

//判斷是否有權限

boolean flag = false;

for(PermissionVO pv:userPermissionList) {

if(pv.getId().equals(p.getId())) {

flag = true;

break;

}

if(flag) {

//構造菜單

Menu menu=new Menu();

menu.setMenuIcon(p.getIcon());

menu.setMenuText(p.getName());

menu.setMenuUrl(p.getUrl());

//有權限，獲取下級菜單

List<Permission> subMenuList = getSubMenu(p.getId());

List<Menu> menulistsub = new ArrayList<Menu>();//構造下級菜單

for(Permission p2:subMenuList) {

//判斷是否有權限

boolean flag2 = false;

for(PermissionVO pv2:userPermissionList) {

if(pv2.getId().equals(p2.getId())) {

flag2 = true;

break;

}

if(flag2) {

//有權限

//構造二級菜單

Menu menu2=new Menu();

menu2.setMenuIcon(p2.getIcon());

menu2.setMenuText(p2.getName());

menu2.setMenuUrl(p2.getUrl());

menulistsub.add(menu2);

}

MenuList mList =new MenuList();

mList.setMenu(menu);

mList.setSubmenus(menulistsub);

menulist.add(mList);

}

return menulist;

}

這個service是比較複雜的，除了基本的增刪改查和分頁查詢之外，還擴展了角色的授權和菜單的構造，這兩部分有點難，注意理解代碼。

1. 1. 權限controller類

在包“com.example.demo.controller”中新建一個“PermissionController”類，代碼如下：

package com.example.demo.controller;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.util.StringUtils;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.example.demo.model.Permission;

import com.example.demo.model.Role;

import com.example.demo.model.RolePermission;

import com.example.demo.service.PermissionService;

import com.example.demo.vo.DataTableResult;

import com.example.demo.vo.Json;

import com.example.demo.vo.PermissionVO;

import com.example.demo.vo.ZTreeNode;

@Controller

@RequestMapping("/PermissionController")

public class PermissionController {

private final Logger logger = LoggerFactory.getLogger(this.getClass());

private String prefix = "admin/permission";// 頁面的路徑

@Autowired

private PermissionService permissionService;// 注入業務層的service

// 未加入@ResponseBody用來返回數據給頁面

@RequestMapping("view")

public String view(Model model) {

return prefix + "/view";

}

// @ResponseBody，直接通過js異步返回數據給頁面

@RequestMapping("list")

@ResponseBody

public DataTableResult list(HttpServletRequest request, PermissionVO permissionVO) {

// DataTableResult返回給datatables控件的數據格式

DataTableResult result = new DataTableResult();

// 獲取分頁參數

int start = Integer.parseInt(request.getParameter("start"));

int length = Integer.parseInt(request.getParameter("length"));

// 獲取排序字段

String orderIdx = request.getParameter("order[0][column]");

// 獲取排序字段名

String orderField = request.getParameter("columns[" + orderIdx + "][name]");

// 獲取排序方式，降序desc或者升序asc

String orderDir = request.getParameter("order[0][dir]");

result = permissionService.selectPermissionListPage(permissionVO, start, length, orderField, orderDir);

// result.setDraw(permissionVO.getDraw());

return result;

}

// @ResponseBody，直接通過js異步返回數據給頁面

@RequestMapping("insert")

@ResponseBody

public Json insert(Permission permission) {

Json j = new Json();

if (permissionService.insert(permission) > 0) {

j.setSuccess(true);

j.setMsg("添加成功！");

} else {

j.setSuccess(false);

j.setMsg("添加失敗！");

}

return j;

}

// @ResponseBody，直接通過js異步返回數據給頁面

@RequestMapping("update")

@ResponseBody

public Json updateById(Permission permission) {

Json j = new Json();

if (permissionService.updateById(permission) > 0) {

j.setSuccess(true);

j.setMsg("修改成功！");

} else {

j.setSuccess(false);

j.setMsg("修改失敗！");

}

return j;

}

// @ResponseBody，直接通過js異步返回數據給頁面

@RequestMapping("select")

@ResponseBody

public Json selectById(Permission permission) {

Json j = new Json();

j.setSuccess(true);

j.setObj(permissionService.selectById(permission.getId()));

return j;

}

// @ResponseBody，直接通過js異步返回數據給頁面

@RequestMapping("delete")

@ResponseBody

public Json delete(HttpServletRequest request) {

Json j = new Json();

String ids = request.getParameter("ids");

if (!StringUtils.isEmpty(ids)) {

j.setSuccess(true);

j.setObj("成功刪除" + permissionService.delete(ids) + "條記錄");

} else {

j.setSuccess(false);

j.setMsg("沒有需要刪除的記錄！");

}

return j;

}

/**

* 獲取樹形結構

**/

@RequestMapping("tree")

@ResponseBody

public List<ZTreeNode> getTreeList(HttpServletRequest request, Role role) {

List<Permission> permissionList = permissionService.selectList();

List<RolePermission> rolePermissionsList = permissionService.selectRolePermission(role);

List<ZTreeNode> list = new ArrayList<ZTreeNode>();

for (Permission p : permissionList) {

ZTreeNode zt = new ZTreeNode();

zt.setId(p.getId());

zt.setName(p.getName());

zt.setOpen(true);

zt.setpId(p.getPid());

if (p.getPid().equals("0"))

zt.setIsParent(true);

else

zt.setIsParent(false);

zt.setMsg(p.getDescripion() + "");

// 查詢是否已經分配了權限,有的打勾

for (RolePermission rp : rolePermissionsList) {

if (rp.getSys_permission_id().equals(p.getId())) {

zt.setChecked(true);

break;

}

list.add(zt);

}

return list;

}

// @ResponseBody，直接通過js異步返回數據給頁面

@RequestMapping("author")

@ResponseBody

public Json author(HttpServletRequest request, Role role) {

Json j = new Json();

String ids = request.getParameter("ids");

if (!StringUtils.isEmpty(role.getId())) {

permissionService.author(role, ids);

j.setSuccess(true);

j.setObj("分配權限成功！");

} else {

j.setSuccess(false);

j.setMsg("角色id爲空！");

}

return j;

}

這個controller用到了樹形結構數據ZTreeNode，把數據組裝成樹形結構需要的格式返回給前端，author方法利用前端樹形結構返回的選中id值（以逗號隔開進行拼接）進行角色的權限分配。

1. 1. 權限管理界面

添加權限管理界面，在“admin”文件夾中新建一個文件夾“permission”，在“permission”文件夾-> 右鍵->new->file，輸入“view.html”（這裏的路徑主要是由controller的轉發方法決定，保持一致即可），代碼如下：

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

rel="stylesheet">

rel="stylesheet">

<link

th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}"

rel="stylesheet">

</head>

</a>

</a>

</li>

</li>

</ul>

</a>

</div>

</div>

</select>

</div>

</div>

</div>

<thead>

<tr>

</th>

<th>order_num</th>

</tr>

</thead>

</table>

</div>

<span aria-hidden="true">×</span><span class="sr-only">Close</span>

</button>

</div>

<input class="form-control" type="text" name="name" id="name"

placeholder="請輸入權限名稱" >

</div>

<input class="form-control" type="text" name="url" id="url"

placeholder="請輸入url" >

</div>

<input class="form-control" type="text" name="pid" id="pid"

placeholder="請輸入pid" >

</div>

<input class="form-control" type="text" name="icon" id="icon"

placeholder="請輸入icon" >

</div>

<label class="col-sm-3 control-label">order_num：</label>

<input class="form-control" type="number" name="order_num" id="order_num"

placeholder="請輸入order_num" >

</div>

</form>

</div>

<button type="button" class="btn btn-white"

data-dismiss="modal">關閉</button>

</div>

<script

th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>

<!-- 前端直接導出excel有一定的缺陷，使用後臺導出功能更強大

後臺導出：阿里巴巴項目組提供了easyexcel工具類，github地址：https://github.com/alibaba/easyexcel -->

//表格行中的按鈕點擊事件

function edit(id){

//異步獲取數據

$.ajax({

type: "get",

data: {

id:id,//第一個id爲參數名，第二個爲參數值

url: "/PermissionController/select",//後臺處理地址

success: function (data) {

//console.log(data);

if(data.success){

//設置數據

$("#id").val(data.obj.id);//修改數據必須有主鍵值

$("#name").val(data.obj.name);

$("#url").val(data.obj.url);

$("#pid").val(data.obj.pid);

$("#icon").val(data.obj.icon);

$("#order_num").val(data.obj.order_num);

$("#modaltitle").text("修改權限");

$("#modal").modal("show");

}else{

toastr.error(data.msg, '錯誤!');

}

}); // end ajax

}//end edit

$(document).ready(function () {

var datatable= $('#table').DataTable({

"processing": true,

"serverSide": true,

"ajax": {

url: "/PermissionController/list",

type:"post",

data: function (d) {

//把字段名和關鍵詞發送給controller進行查詢，自動映射到vo模型的相應屬性中

d[$('#searchfield').val()]=$('#keyword').val()

}

"language": {

"lengthMenu": "每頁 _MENU_ 行",

"info": "從 _START_ 到 _END_，共 _TOTAL_ 記錄",

"zeroRecords": "沒有找到記錄",

"infoEmpty": "暫無記錄",

"infoFiltered": "(從 _MAX_ 條記錄過濾)",

"paginate": {

"previous": "上一頁",

"next": "下一頁",

"processing": "正在加載..."

"autoWidth": false,

"pageLength": 5,

"lengthChange": false,

"searching": false,

"columns": [

{"data":"id","orderable": false,

"render": function ( data, type, full, meta ) {

return '<input type="checkbox" value="'+data+'" class="input-lg" style="width:20px;height:20px;" />';

}

{"data":"id","name":"id"},

{"data":"name","name":"name"},

{"data":"url","name":"url"},

{"data":"pid","name":"pid"},

{"data":"icon","name":"icon"},

{"data":"order_num","name":"order_num"},

//有排序功能必須指定name爲字段名稱

{"data":"id","orderable": false,

"render": function ( data, type, full, meta ) {

return '<button id="btn_edit" class="btn btn-primary btn-sm" οnclick="edit(\''+data+'\')"><i class="fa fa-edit"></i> 查看修改</button>';

}

"order": [

[1, 'desc']

]//默認排序

});

$("#btn_search").click(function(){

datatable.ajax.reload();//根據關鍵詞重新加載數據

});

//全選

$("#cb_selectAll").click(function(){

if ($("#cb_selectAll").get(0).checked) {

$("#table tbody :checkbox").prop("checked", true);

}else{

$("#table tbody :checkbox").prop("checked", false);

}

});

//toastr選項

toastr.options = {

"positionClass": "toast-bottom-center",

}

//刪除

$("#btn_del").click(function(){

//獲取選中的複選框

var checkboxlist=$("#table tbody :checked");

if(checkboxlist.length>0){

if(!confirm("您確定刪除數據嗎？"))

{

return;

}

}else{

toastr.error("請選擇要刪除的記錄。", '錯誤!');

return;

}

var ids="";

$.each(checkboxlist, function(n, cb) {

ids+=cb.value+",";

});

if(ids.length>0){

ids=ids.substring(0,ids.length-1);

}

//異步刪除數據

$.ajax({

type: "post",

data: {

ids:ids,//第一個ids爲參數名，第二個爲參數值

url: "/PermissionController/delete",//後臺處理地址

success: function (data) {

if(data.success){

toastr.success(data.msg, '刪除成功！');

datatable.ajax.reload(null, false);//刷新當前頁

}else{

toastr.error(data.msg, '錯誤!');

}

});

});//end btn_del

$("#btn_add").click(function(){

//清空數據

$("#name").val("");

$("#url").val("");

$("#pid").val("");

$("#icon").val("");

$("#order_num").val("");

//validator.resetForm();//重置驗證

$("#modaltitle").text("添加權限");

$("#modal").modal("show");

});//end add

//不用改，以下爲修改jQuery Validation插件兼容Bootstrap的方法，沒有直接寫在插件中是爲了便於插件升級

$.validator.setDefaults({

highlight: function (element) {

$(element).closest('.form-group').removeClass('has-success').addClass('has-error');

success: function (element) {

element.closest('.form-group').removeClass('has-error').addClass('has-success');

errorElement: "span",

errorPlacement: function (error, element) {

if (element.is(":radio") || element.is(":checkbox")) {

error.appendTo(element.parent().parent().parent());

} else {

error.appendTo(element.parent());

}

errorClass: "help-block m-b-none",

validClass: "help-block m-b-none"

});

//end setDefaults

// validate form setting

var icon = "<i class='fa fa-times-circle'></i> ";

validator=$("#form").validate({

rules: {

name: {

required: true,

minlength: 1

pid: {

required: true,

messages: {

name: {

required: icon + "請輸入您的權限名",

minlength: icon + "權限名必須1個字符以上"

pid: {

required: icon + "請輸入pid",

}

});//end validate

$("#btn_save").click(function(){

if($("#form").valid()){

//save

if($("#modaltitle").text()=="添加權限"){

//add

//異步添加數據

$.ajax({

type: "post",

data: {

name:$("#name").val(),

url:$("#url").val(),

pid:$("#pid").val(),

icon:$("#icon").val(),

order_num:$("#order_num").val(),

url: "/PermissionController/insert",//後臺處理地址

success: function (data) {

if(data.success){

toastr.success(data.msg, '添加成功！');

$("#modal").modal('hide');

datatable.ajax.reload(null, false);//刷新當前頁

}else{

toastr.error(data.msg, '錯誤!');

}

}); // end ajax

}else{

//update

//異步修改數據

$.ajax({

type: "post",

data: {

id:$("#id").val(),//主鍵，從隱藏input獲取到

name:$("#name").val(),

url:$("#url").val(),

pid:$("#pid").val(),

icon:$("#icon").val(),

order_num:$("#order_num").val(),

url: "/PermissionController/update",//後臺處理地址

success: function (data) {

if(data.success){

toastr.success(data.msg, '修改成功！');

$("#modal").modal('hide');

datatable.ajax.reload(null, false);//刷新當前頁

}else{

toastr.error(data.msg, '錯誤!');

}

}); // end ajax

}

});//end btn_save

});//end ready

</script>

</body>

</html>

點擊權限管理菜單的效果：

六、模塊實現：權限管理模塊（2）

EXCEL中下拉菜單中添加新選項或者刪除選項

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

Python 爬蟲：Spring Boot 反爬蟲的成功案例

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Java中止線程的方式

[轉帖]Oracle Exadata 學習筆記之核心特性Part1

《最新出爐》系列入門篇-Python+Playwright自動化測試-43-分頁測試

HTTP協議相關文檔

Ubuntu16.04下安裝OpenCV3.2.0(轉)

Keras中實現模型加載與測試（以mnist爲例）

spring cloud config---Could not resolve placeholder 'foo' in string value "${foo}"

Depends:libreoffice-base but it is not going to be installed

Ubuntu 16.04 安裝 Anaconda

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結