当点击一级菜单，异步请求二级菜单联动显示。
- 创建Menu2ListByMenu1Servlet类。
- 点击admin_menu_list.jsp ⻚⾯中的一级菜单，触发AJax请求，请求Menu2ListByMenu1Servlet。
- 在Menu2ListByMenu1Servlet类中接收ajax请求，并且根据一级菜单查询二级菜单，然后以JSON格式响应ajax请求。
- 将ajax得到的响应数据，二级菜单显示出来。
1.Druid.properties文件
#���ݿ�������Ϣ
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/db_mtl?characterEncoding=utf-8
username=root
password=123456
#���ӳز�������
#1���ӳس�ʼ������
initialSize=10
#2���ӳ����������
maxActive=50
#3���ӳ���С������
minIdle=5
#4���ȴ�ʱ��,��λ����
maxWait=50002.DruidUtils类
package com.it.untils;
import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import org.junit.Test;
import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
//数据库连接池工具类
public class DruidUtils {
//定义数据库连接池数据源
private static DruidDataSource druidDataSource;
// 初始化数据库连接池
static {
try {
InputStream resourceAsStream = DruidUtils.class.getResourceAsStream("Druid.properties");
// 实例化properties集合，它是一个映射集合
Properties properties = new Properties();
// 把流中的数据全部加载到properties集合中
properties.load(resourceAsStream);
//通过properties集合中的数据来创建连接池
druidDataSource= (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
//返回DataSource对象
public static DataSource getDataSource(){
return druidDataSource;
}
// 从连接池中获取数据库连接
public static Connection getConnection() throws SQLException {
Connection connection=null;
connection=druidDataSource.getConnection();
return connection;
}
}
3.MenuDao类
package com.it.dao;
import com.it.entity.Menu1;
import com.it.entity.Menu2;
import com.it.untils.DruidUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import javax.sql.DataSource;
import java.sql.Array;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
//实现菜单的查询
public class MenuDAO {
//根据管理员ID查询对应的一级菜单
public List<Menu1> selectFirstLevelMenusById(String mgrId) throws SQLException {
List<Menu1> menu1List = new ArrayList<>();
String str="SELECT c.menu_id menuId,menu_code menuCode,menu_name menuName,menu_order menuOrder,menu_level menuLevel,menu_icon menuIcon FROM tb_mgr_role a " +
"INNER JOIN tb_role_menu b INNER JOIN tb_menus c ON a.role_id=b.role_id AND b.menu_id=c.menu_id WHERE a.mgr_id=? AND menu_level=1 ORDER BY c.menu_order";
QueryRunner queryRunner = new QueryRunner(DruidUtils.getDataSource());
menu1List= queryRunner.query(str, new BeanListHandler<Menu1>(Menu1.class), mgrId);
return menu1List;
}
//根据管理员ID和一级菜单ID，查询当前一级菜单所拥有的二级菜单
public List<Menu2> selectSecondLevelMenusByIdAndParentCode(String mgrId,String parentCode) throws SQLException {
List<Menu2> menu2List = new ArrayList<>();
String sql="SELECT c.menu_id menuId,menu_code menuCode,menu_name menuName,menu_order menuOrder,menu_level menuLevel,parent_menu_code parentMenuCode,menu_url menuUrl FROM tb_mgr_role a " +
"INNER JOIN tb_role_menu b INNER JOIN tb_menus c ON a.role_id=b.role_id AND b.menu_id=c.menu_id WHERE a.mgr_id=? AND menu_level=2 AND parent_menu_code=? ORDER BY c.menu_order";
QueryRunner queryRunner = new QueryRunner(DruidUtils.getDataSource());
menu2List=queryRunner.query(sql,new BeanListHandler<Menu2>(Menu2.class),mgrId,parentCode);
return menu2List;
}
//查询所有的一级菜单
public List<Menu1> selectMenu1() throws SQLException {
List<Menu1> menu1List = new ArrayList<>();
String sql="SELECT menu_id menuId,menu_code menuCode,menu_name menuName,menu_order menuOrder,menu_level menuLevel,menu_icon menuIcon FROM tb_menus WHERE menu_level=1 ORDER BY menu_order";
QueryRunner queryRunner=new QueryRunner(DruidUtils.getDataSource());
menu1List= queryRunner.query(sql, new BeanListHandler<Menu1>(Menu1.class));
return menu1List;
}
//查询所有的二级菜单
public List<Menu2> selectMenu2() throws SQLException {
List<Menu2> menu2List=new ArrayList<>();
String sql="SELECT menu_id menuId,menu_code menuCode,menu_name menuName,menu_order menuOrder,menu_level menuLevel,parent_menu_code parentMenuCode,menu_url menuUrl FROM tb_menus WHERE menu_level=2 ORDER BY menu_code ";
QueryRunner queryRunner = new QueryRunner(DruidUtils.getDataSource());
menu2List = queryRunner.query(sql, new BeanListHandler<Menu2>(Menu2.class));
return menu2List;
}
//查询某一级菜单所拥有的二级菜单
public List<Menu2> selectMenu2ByMenu1Code(String parentMenuCode) throws SQLException {
List<Menu2> menu2List=new ArrayList<>();
String sql="SELECT menu_id menuId,menu_code menuCode,menu_name menuName,menu_order menuOrder,menu_level menuLevel,parent_menu_code parentMenuCode,menu_url menuUrl FROM tb_menus " +
"WHERE parent_menu_code=? AND menu_level=2 ORDER BY menu_code;";
QueryRunner queryRunner = new QueryRunner(DruidUtils.getDataSource());
menu2List= queryRunner.query(sql, new BeanListHandler<Menu2>(Menu2.class), parentMenuCode);
return menu2List;
}
}
4.MenuService类
package com.it.service;
import com.it.dao.MenuDAO;
import com.it.entity.Menu1;
import com.it.entity.Menu2;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MenuService {
public List<Menu1> selectMenuByMgrId(String mgrId) throws SQLException {
MenuDAO menuDAO = new MenuDAO();
//根据管理员ID查询该管理员的一级菜单
List<Menu1> menu1List = menuDAO.selectFirstLevelMenusById(mgrId);
//查询每一个一级菜单中的二级菜单
for (int i = 0; i < menu1List.size(); i++) {
Menu1 menu1 = menu1List.get(i);
List<Menu2> menu2s = menuDAO.selectSecondLevelMenusByIdAndParentCode(mgrId, menu1.getMenuCode());
menu1.setChildMenus(menu2s);
}
return menu1List;
}
//查询所有的一级二级菜单
public Map<String,List> listMenus() throws SQLException {
Map<String, List> mapMenus = new HashMap<>();
MenuDAO menuDAO = new MenuDAO();
List<Menu1> menu1List = menuDAO.selectMenu1();
List<Menu2> menu2List = menuDAO.selectMenu2();
mapMenus.put("menu1List",menu1List);
mapMenus.put("menu2List",menu2List);
return mapMenus;
}
//查询某个一级菜单所拥有的二级菜单
public List<Menu2> selectMenu2ByMenu1Code(String menu1Code) throws SQLException {
List<Menu2> menu2List = new ArrayList<>();
MenuDAO menuDAO = new MenuDAO();
menu2List = menuDAO.selectMenu2ByMenu1Code(menu1Code);
return menu2List;
}
}
5.Menu2ListByMenu1Servlet类
package com.it.servlets;
import com.google.gson.Gson;
import com.it.entity.Menu2;
import com.it.service.MenuService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;
@WebServlet("/Menu2ListByMenu1Servlet")
public class Menu2ListByMenu1Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String parentCode = req.getParameter("parentCode");
MenuService menuService = new MenuService();
try {
List<Menu2> menu2List = menuService.selectMenu2ByMenu1Code(parentCode);
//将menu2List集合，以JSON的格式响应给页面（添加JSON的jar包）
Gson gson = new Gson();
String s = gson.toJson(menu2List);//集合变成了JSON格式的字符串
//在servlet类中通过输出流响应ajax请求
resp.setContentType("application/json;charset=utf-8");
resp.setContentType("utf-8");
PrintWriter out=resp.getWriter();
out.println(s);
out.flush();
out.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
6.admin_menu_list.jsp ⻚⾯ajax请求核心代码
<div class="table_menu_list" id="testIframe">
<table class="table table-striped table-bordered table-hover" id="sample_table">
<thead>
<tr>
<th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
<th width="80px">菜单编号</th>
<th width="250px">菜单名称</th>
<th width="100px">菜单排序</th>
<th width="100px">菜单级别</th>
<th width="100px">菜单编号</th>
<th width="180px">菜单URL</th>
<th width="70px">状态</th>
<th width="200px">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${menu2List}" var="menu2">
<tr>
<td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
<td>${menu2.menuCode}</td>
<td>${menu2.menuName}</td>
<td>${menu2.menuOrder}</td>
<td>${menu2.menuLevel}</td>
<td>${menu2.parentMenuCode}</td>
<td>${menu2.menuUrl}</td>
<td class="td-status"><span class="label label-success radius">已启用</span></td>
<td class="td-manage">
<a onClick="member_stop(this,'10001')" href="javascript:;" title="停用" class="btn btn-xs btn-success"><i class="fa fa-check bigger-120"></i></a>
<a title="编辑" onclick="member_edit('编辑','member-add.html','4','','510')" href="javascript:;" class="btn btn-xs btn-info" ><i class="fa fa-edit bigger-120"></i></a>
<a title="删除" href="javascript:;" onclick="member_del(this,'1')" class="btn btn-xs btn-warning" ><i class="fa fa-trash bigger-120"></i></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script type="text/javascript">
function requestMenu2List(menu1Code) {
//发送ajax请求，获取当前一级菜单下的二级菜单,res是一级菜单的集合
$.post("Menu2ListByMenu1Servlet",{parentCode:menu1Code},function (res) {
//将二级菜单通过DOM操作显示到表格中
//a.将id=testIframe中原有的表格进行清除，同时重新加载一个table(id="testIframe")
$("#testIframe").html("<table class=\"table table-striped table-bordered table-hover\" id=\"sample_table1\">\n" +
"<thead>\n" +
"<tr>\n" +
"<th width=\"25px\"><label><input type=\"checkbox\" class=\"ace\"><span class=\"lbl\"></span></label></th>\n" +
"<th width=\"80px\">菜单编号</th>\n" +
"<th width=\"250px\">菜单名称</th>\n" +
"<th width=\"100px\">菜单排序</th>\n" +
"<th width=\"100px\">菜单级别</th>\n" +
"<th width=\"100px\">菜单编号</th>\n" +
"<th width=\"180px\">菜单URL</th>\n" +
"<th width=\"70px\">状态</th>\n" +
"<th width=\"200px\">操作</th>\n" +
"</tr>\n" +
"</thead>\n" +
"<tbody></tbody></table>");
//b.显示二级菜单
for (var i = 0; i <res.length ; i++) {
var menu2=res[i];
var trTag=" <tr>\n" +
"<td><label><input type=\"checkbox\" class=\"ace\"><span class=\"lbl\"></span></label></td>\n" +
"<td>"+menu2.menuCode+"</td>\n" +
"<td>"+menu2.menuName+"</td>\n" +
"<td>"+menu2.menuOrder+"</td>\n" +
"<td>"+menu2.menuLevel+"</td>\n" +
"<td>"+menu2.parentMenuCode+"</td>\n" +
"<td>"+menu2.menuUrl+"</td>\n" +
"<td class=\"td-status\"><span class=\"label label-success radius\">已启用</span></td>\n" +
"<td class=\"td-manage\">\n" +
"<a onClick=\"member_stop(this,'10001')\" href=\"javascript:;\" title=\"停用\" class=\"btn btn-xs btn-success\"><i class=\"fa fa-check bigger-120\"></i></a>\n" +
"<a title=\"编辑\" onclick=\"member_edit('编辑','member-add.html','4','','510')\" href=\"javascript:;\" class=\"btn btn-xs btn-info\" ><i class=\"fa fa-edit bigger-120\"></i></a>\n" +
"<a title=\"删除\" href=\"javascript:;\" onclick=\"member_del(this,'1')\" class=\"btn btn-xs btn-warning\" ><i class=\"fa fa-trash bigger-120\"></i></a>\n" +
"</td>\n" +
"</tr>";
$("#sample_table1 tbody").append(trTag);
}
//表格中的数据重新渲染了，分页效果也需要重新初始化
//分页显示
//将id=“sample_table”的表格进行初始化为数据表格（数据表格可排序，可分页）
$('#sample_table1').dataTable( {
"aaSorting": [[ 1, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"aoColumnDefs": [
{"orderable":false,"aTargets":[0,2,3,4,5,7,8,]}// 制定列不参与排序
] } );
},"json")
return false;
}
</script>7.admin_menu_list.jsp ⻚⾯全部代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css"/>
<link href="assets/css/codemirror.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="font/css/font-awesome.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="Widget/Validform/5.3.2/Validform.min.js"></script>
<script src="assets/js/typeahead-bs2.min.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
<script src="assets/layer/layer.js" type="text/javascript" ></script>
<script src="js/lrtk.js" type="text/javascript" ></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script src="assets/laydate/laydate.js" type="text/javascript"></script>
<title>管理员</title>
</head>
<body>
<div class="page-content clearfix">
<div class="administrator">
<div class="d_Confirm_Order_style">
<!--管理员列表-->
<div class="clearfix administrator_style" id="administrator">
<div class="left_style">
<div id="scrollsidebar" class="left_Treeview">
<div class="show_btn" id="rightArrow"><span></span></div>
<div class="widget-box side_content" >
<div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
<div class="side_list"><div class="widget-header header-color-green2"><h4 class="lighter smaller">一级菜单列表</h4></div>
<div class="widget-body">
<ul class="b_P_Sort_list">
<li><i class="fa fa-users green"></i> <a href="#">全部管理员（13）</a></li>
<%-- 遍历一级菜单--%>
<c:forEach items="${menu1List}" var="menu1">
<li><i class="fa fa-users orange"></i>
<a href="#" onclick="return requestMenu2List('${menu1.menuCode}')">${menu1.menuName}</a>
</li>
</c:forEach>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="table_menu_list" id="testIframe">
<table class="table table-striped table-bordered table-hover" id="sample_table">
<thead>
<tr>
<th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
<th width="80px">菜单编号</th>
<th width="250px">菜单名称</th>
<th width="100px">菜单排序</th>
<th width="100px">菜单级别</th>
<th width="100px">菜单编号</th>
<th width="180px">菜单URL</th>
<th width="70px">状态</th>
<th width="200px">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${menu2List}" var="menu2">
<tr>
<td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
<td>${menu2.menuCode}</td>
<td>${menu2.menuName}</td>
<td>${menu2.menuOrder}</td>
<td>${menu2.menuLevel}</td>
<td>${menu2.parentMenuCode}</td>
<td>${menu2.menuUrl}</td>
<td class="td-status"><span class="label label-success radius">已启用</span></td>
<td class="td-manage">
<a onClick="member_stop(this,'10001')" href="javascript:;" title="停用" class="btn btn-xs btn-success"><i class="fa fa-check bigger-120"></i></a>
<a title="编辑" onclick="member_edit('编辑','member-add.html','4','','510')" href="javascript:;" class="btn btn-xs btn-info" ><i class="fa fa-edit bigger-120"></i></a>
<a title="删除" href="javascript:;" onclick="member_del(this,'1')" class="btn btn-xs btn-warning" ><i class="fa fa-trash bigger-120"></i></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--添加管理员-->
<div id="add_administrator_style" class="add_menber" style="display:none">
<form action="" method="post" id="form-admin-add">
<div class="form-group">
<label class="form-label"><span class="c-red">*</span>管理员：</label>
<div class="formControls">
<input type="text" class="input-text" value="" placeholder="" id="user-name" name="user-name" datatype="*2-16" nullmsg="用户名不能为空">
</div>
<div class="col-4"> <span class="Validform_checktip"></span></div>
</div>
<div class="form-group">
<label class="form-label"><span class="c-red">*</span>初始密码：</label>
<div class="formControls">
<input type="password" placeholder="密码" name="userpassword" autocomplete="off" value="" class="input-text" datatype="*6-20" nullmsg="密码不能为空">
</div>
<div class="col-4"> <span class="Validform_checktip"></span></div>
</div>
<div class="form-group">
<label class="form-label "><span class="c-red">*</span>确认密码：</label>
<div class="formControls ">
<input type="password" placeholder="确认新密码" autocomplete="off" class="input-text Validform_error" errormsg="您两次输入的新密码不一致！" datatype="*" nullmsg="请再输入一次新密码！" recheck="userpassword" id="newpassword2" name="newpassword2">
</div>
<div class="col-4"> <span class="Validform_checktip"></span></div>
</div>
<div class="form-group">
<label class="form-label "><span class="c-red">*</span>性别：</label>
<div class="formControls skin-minimal">
<label><input name="form-field-radio" type="radio" class="ace" checked="checked"><span class="lbl">保密</span></label>
<label><input name="form-field-radio" type="radio" class="ace"><span class="lbl">男</span></label>
<label><input name="form-field-radio" type="radio" class="ace"><span class="lbl">女</span></label>
</div>
<div class="col-4"> <span class="Validform_checktip"></span></div>
</div>
<div class="form-group">
<label class="form-label "><span class="c-red">*</span>手机：</label>
<div class="formControls ">
<input type="text" class="input-text" value="" placeholder="" id="user-tel" name="user-tel" datatype="m" nullmsg="手机不能为空">
</div>
<div class="col-4"> <span class="Validform_checktip"></span></div>
</div>
<div class="form-group">
<label class="form-label"><span class="c-red">*</span>邮箱：</label>
<div class="formControls ">
<input type="text" class="input-text" placeholder="@" name="email" id="email" datatype="e" nullmsg="请输入邮箱！">
</div>
<div class="col-4"> <span class="Validform_checktip"></span></div>
</div>
<div class="form-group">
<label class="form-label">角色：</label>
<div class="formControls "> <span class="select-box" style="width:150px;">
<select class="select" name="admin-role" size="1">
<option value="0">超级管理员</option>
<option value="1">管理员</option>
<option value="2">栏目主辑</option>
<option value="3">栏目编辑</option>
</select>
</span> </div>
</div>
<div class="form-group">
<label class="form-label">备注：</label>
<div class="formControls">
<textarea name="" cols="" rows="" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true" onkeyup="checkLength(this);"></textarea>
<span class="wordage">剩余字数：<span id="sy" style="color:Red;">100</span>字</span>
</div>
<div class="col-4"> </div>
</div>
<div>
<input class="btn btn-primary radius" type="submit" id="Add_Administrator" value=" 提交 ">
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function requestMenu2List(menu1Code) {
//发送ajax请求，获取当前一级菜单下的二级菜单,res是一级菜单的集合
$.post("Menu2ListByMenu1Servlet",{parentCode:menu1Code},function (res) {
//将二级菜单通过DOM操作显示到表格中
//a.将id=testIframe中原有的表格进行清除，同时重新加载一个table(id="testIframe")
$("#testIframe").html("<table class=\"table table-striped table-bordered table-hover\" id=\"sample_table1\">\n" +
"<thead>\n" +
"<tr>\n" +
"<th width=\"25px\"><label><input type=\"checkbox\" class=\"ace\"><span class=\"lbl\"></span></label></th>\n" +
"<th width=\"80px\">菜单编号</th>\n" +
"<th width=\"250px\">菜单名称</th>\n" +
"<th width=\"100px\">菜单排序</th>\n" +
"<th width=\"100px\">菜单级别</th>\n" +
"<th width=\"100px\">菜单编号</th>\n" +
"<th width=\"180px\">菜单URL</th>\n" +
"<th width=\"70px\">状态</th>\n" +
"<th width=\"200px\">操作</th>\n" +
"</tr>\n" +
"</thead>\n" +
"<tbody></tbody></table>");
//b.显示二级菜单
for (var i = 0; i <res.length ; i++) {
var menu2=res[i];
var trTag=" <tr>\n" +
"<td><label><input type=\"checkbox\" class=\"ace\"><span class=\"lbl\"></span></label></td>\n" +
"<td>"+menu2.menuCode+"</td>\n" +
"<td>"+menu2.menuName+"</td>\n" +
"<td>"+menu2.menuOrder+"</td>\n" +
"<td>"+menu2.menuLevel+"</td>\n" +
"<td>"+menu2.parentMenuCode+"</td>\n" +
"<td>"+menu2.menuUrl+"</td>\n" +
"<td class=\"td-status\"><span class=\"label label-success radius\">已启用</span></td>\n" +
"<td class=\"td-manage\">\n" +
"<a onClick=\"member_stop(this,'10001')\" href=\"javascript:;\" title=\"停用\" class=\"btn btn-xs btn-success\"><i class=\"fa fa-check bigger-120\"></i></a>\n" +
"<a title=\"编辑\" onclick=\"member_edit('编辑','member-add.html','4','','510')\" href=\"javascript:;\" class=\"btn btn-xs btn-info\" ><i class=\"fa fa-edit bigger-120\"></i></a>\n" +
"<a title=\"删除\" href=\"javascript:;\" onclick=\"member_del(this,'1')\" class=\"btn btn-xs btn-warning\" ><i class=\"fa fa-trash bigger-120\"></i></a>\n" +
"</td>\n" +
"</tr>";
$("#sample_table1 tbody").append(trTag);
}
//表格中的数据重新渲染了，分页效果也需要重新初始化
//分页显示
//将id=“sample_table”的表格进行初始化为数据表格（数据表格可排序，可分页）
$('#sample_table1').dataTable( {
"aaSorting": [[ 1, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"aoColumnDefs": [
{"orderable":false,"aTargets":[0,2,3,4,5,7,8,]}// 制定列不参与排序
] } );
},"json")
return false;
}
</script>
<script type="text/javascript">
//分页显示
jQuery(function($) {
//将id=“sample_table”的表格进行初始化为数据表格（数据表格可排序，可分页）
var oTable1 = $('#sample_table').dataTable( {
"aaSorting": [[ 1, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
{"orderable":false,"aTargets":[0,2,3,4,5,7,8,]}// 制定列不参与排序
] } );
$('table th input:checkbox').on('click' , function(){
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function(){
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
var $source = $(source);
var $parent = $source.closest('table')
var off1 = $parent.offset();
var w1 = $parent.width();
var off2 = $source.offset();
var w2 = $source.width();
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
return 'left';
}
});
</script>
<script type="text/javascript">
$(function() {
$("#administrator").fix({
float : 'left',
//minStatue : true,
skin : 'green',
durationTime :false,
spacingw:50,//设置隐藏时的距离
spacingh:270,//设置显示时间距
});
});
//字数限制
function checkLength(which) {
var maxChars = 100; //
if(which.value.length > maxChars){
layer.open({
icon:2,
title:'提示框',
content:'您输入的字数超过限制!',
});
// 超过限制的字数了就将 文本框中的内容按规定的字数 截取
which.value = which.value.substring(0,maxChars);
return false;
}else{
var curr = maxChars - which.value.length; //250 减去 当前输入的
document.getElementById("sy").innerHTML = curr.toString();
return true;
}
};
//初始化宽度、高度
$(".widget-box").height($(window).height()-215);
$(".table_menu_list").width($(window).width()-260);
$(".table_menu_list").height($(window).height()-15);
//当文档窗口发生改变时 触发
$(window).resize(function(){
$(".widget-box").height($(window).height()-215);
$(".table_menu_list").width($(window).width()-260);
$(".table_menu_list").height($(window).height()-215);
})
laydate({
elem: '#start',
event: 'focus'
});
/*用户-停用*/
function member_stop(obj,id){
layer.confirm('确认要停用吗？',function(index){
$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="fa fa-close bigger-120"></i></a>');
$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
$(obj).remove();
layer.msg('已停用!',{icon: 5,time:1000});
});
}
/*用户-启用*/
function member_start(obj,id){
layer.confirm('确认要启用吗？',function(index){
$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="fa fa-check bigger-120"></i></a>');
$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
$(obj).remove();
layer.msg('已启用!',{icon: 6,time:1000});
});
}
/*产品-编辑*/
function member_edit(title,url,id,w,h){
layer_show(title,url,w,h);
}
/*产品-删除*/
function member_del(obj,id){
layer.confirm('确认要删除吗？',function(index){
$(obj).parents("tr").remove();
layer.msg('已删除!',{icon:1,time:1000});
});
}
/*添加管理员*/
$('#administrator_add').on('click', function(){
layer.open({
type: 1,
title:'添加管理员',
area: ['700px',''],
shadeClose: false,
content: $('#add_administrator_style'),
});
})
//表单验证提交
$("#form-admin-add").Validform({
tiptype:2,
callback:function(data){
//form[0].submit();
if(data.status==1){
layer.msg(data.info, {icon: data.status,time: 1000}, function(){
location.reload();//刷新页面
});
}
else{
layer.msg(data.info, {icon: data.status,time: 3000});
}
var index =parent.$("#iframe").attr("src");
parent.layer.close(index);
//
}
});
</script>
功能效果展示
1.当进入页面自动显示所有的二级菜单列表
2.当点击某一个一级菜单项时，表格中的数据全部清空，并重新添加表格，表格中显示对应的二级菜单，分页统计也重新统计。如点击商品管理。
点击评估管理
扫一扫
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
