1 SSM权限管理系统-项目环境搭建 在创建Maven项目时,添加archetypeCatalog=internal 配置pom.xml的mvean依赖,添加逆向生成工具. 创建需要的目录domain,mapper,service,web,resources 替换web.xml,修改为3.0的约束 <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0" metadata-complete="false"> <absolute-ordering/> <display-name>web</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <!--配置前端控制器--> <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>CharacterEncoding</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>CharacterEncoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app> 2. SSM权限管理-EasyUI主页框架 EasyUI主页 1.在目录当中引入EasyUI相关JS与css 2.在首页当中引入所需要的js与css <link type="text/css" href="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/uimaker/easyui.css"> <link type="text/css" href="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/uimaker/icon.css"> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/js/index.js"></script> 3.编写body所首页框架格式 <body> <%--顶部--%> <div data-options="region:\'north\'"> <img src="http://www.likecs.com/static/images/main_logo.png" alt=""> </div> <%--底部--%> <div data-options="region:\'south\'"> <p>撩课学院</p> </div> <%--左侧菜单--%> <div data-options="region:\'west\',split:true"> <div data-options="fit:true"> <div title="菜单" data-options="iconCls:\'icon-save\',selected:true"> <!--tree--> <ul></ul> </div> <div title="公告" data-options="iconCls:\'icon-reload\'"> </div> </div> </div> <%--右侧主区域--%> <div data-options="region:\'center\'"> <!--标签--> <div ></div> </div> </body> 4.创建首页index.js引入 $(function () { $("#tabs").tabs({ fit:true }) $(\'#tree\').tree({ url:\'/getTreeData\', lines:true, onSelect: function(node){ /*在添加之前, 做判断 判断这个标签是否存在 */ var exists = $("#tabs").tabs("exists",node.text); if(exists){ /*存在,就让它选中*/ $("#tabs").tabs("select",node.text); }else { if (node.url !=\'\'&& node.url !=null){ /*如果不存在 ,添加新标签*/ $("#tabs").tabs("add",{ title:node.text, /*href:node.attributes.url,*/ /*href 引入的是body当中*/ content:"<iframe src="http://www.likecs.com/+node.url+" frameborder=\'0\' width=\'100%\' height=\'100%\'></iframe>", closable:true }) } } }, onLoadSuccess: function (node, data) { console.log(data[0].children[0].id); if (data.length > 0) { //找到第一个元素 var n = $(\'#tree\').tree(\'find\', data[0].children[0].id); //调用选中事件 $(\'#tree\').tree(\'select\', n.target); } } }); }); 3. 菜单标签跳转 创建3个controller EmployeeController MenuController RoleController 控制拦截url为employee,role,menu 跳转到相应的页面,比如EmployeeController @Controller public class EmployeeController { @RequestMapping("/employee") public String employee(){ return "employee"; } } index.js上面的 onLoadSuccess: function (node, data) { console.log(data[0].children[0].id); if (data.length > 0) { //找到第一个元素 var n = $(\'#tree\').tree(\'find\', data[0].children[0].id); //调用选中事件 $(\'#tree\').tree(\'select\', n.target); } } }); 表示在页面初始时调用一个元素.让页面初始时右侧不为空. 注意需要清空缓存. 4. 主页数据表格添加 将共用的scrpit和link抽成一个包. common.jsp <link type="text/css" href="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/uimaker/easyui.css"> <link type="text/css" href="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/uimaker/icon.css"> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/plugins/easyui/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/js/base.js"></script> 在index.jsp中引用 <head> <title>权限管理系统</title> <%@include file="/static/common/common.jsp"%> <script type="text/javascript" src="http://www.likecs.com/${pageContext.request.contextPath}/static/js/index.js"></script> </head> index.js属于index.jsp独有的. 在employee.jsp中引用 <head> <title>Title</title> <%@include file="/static/common/common.jsp"%> </head> 给employee页面添加employee.js $(function(){ $("#dg").datagrid({ url:"/employeeList", columns:[[ {field:\'username\',title:\'姓名\',width:100,align:\'center\'}, {field:\'inputtime\',title:\'入职时间\',width:100,align:\'center\'}, {field:\'tel\',title:\'电话\',width:100,align:\'center\'}, {field:\'email\',title:\'邮箱\',width:100,align:\'center\'}, {field:\'department\',title:\'部门\',width:100,align:\'center\'}, {field:\'state\',title:\'状态\',width:100,align:\'center\'}, {field:\'admin\',title:\'管理员\',width:100,align:\'center\'}, ]], fit:true, /*是否需要填满*/ fitColumns:true, /*是否自动伸缩*/ rownumbers:true, /*是否需要显示行号*/ pagination:true /*是否需要分页*/ }) }); 5. 员工表建立 设计数据库的表. 建立新的数据库promission 修改逆向工程的generatorConfig.xml,修改配置中的数据库名和表名. 逆向生成Employee,EmployeeMapper,EmployeeMapper.xml 注意把EmployeeMapper.xml需要放在resources下面新建的com.itlike.mapper. 6. 员工列表查询 创建一个业务接口service,employeeService.实现类employeeServiceImpl. 将其标记为@Service public class employeeServiceImpl implements employeeService { @Autowired private EmployeeMapper employeeMapper; @Override public void getEmployee() { System.out.println("来到业务层"); /*调用mapper查询员工*/ employeeMapper.selectAll(); } } 修改controller层,注入service,添加@RequestMapping("/employeeList") EmployeeController @Controller public class EmployeeController { /*注入业务层*/ @Autowired private employeeService employeeService; @RequestMapping("/employee") public String employee(){ return "employee"; } @RequestMapping("/employeeList") public void employeeList(){ /*调用业务层查询员工*/ employeeService.getEmployee(); } } 注意修改db.properties下面的数据库名jdbc.url=jdbc:mysql://localhost:3306/promission?characterEncoding=utf-8 新建一个PageListRes的domain类. 由于easyUI的datagrid需要有total分页和rows数组类型的json PageListRes类. @Getter@Setter public class PageListRes { private Long total; private List<?> rows=new ArrayList<>(); } 修改employeeServiceImpl,使用pageHelper来进行分页 @Service public class employeeServiceImpl implements employeeService { @Autowired private EmployeeMapper employeeMapper; @Override public PageListRes getEmployee() { /*调用mapper查询员工*/ /*设置分页total*/ Page<Object> page = PageHelper.startPage(1, 5); List<Employee> employees = employeeMapper.selectAll(); /*封装成pageList*/ PageListRes pageListRes = new PageListRes(); pageListRes.setTotal(page.getTotal()); pageListRes.setRows(employees); return pageListRes; } } 修改接口employeeService,将返回值类型改为PageListRes 前端控制器修改EmployeeController @Controller public class EmployeeController { /*注入业务层*/ @Autowired private employeeService employeeService; @RequestMapping("/employeeList") @ResponseBody public PageListRes employeeList(){ /*调用业务层查询员工*/ PageListRes pageListRes = employeeService.getEmployee(); return pageListRes; } 使用@ResponseBody获取json数据 7. 日期格式化 由于上一节已经可以取到数据,并且显示在前端页面,但是日期格式不对,需要格式化日期数据 在employee.js做数据格式化 $(function(){ $("#dg").datagrid({ url:"/employeeList", columns:[[ {field:\'username\',title:\'姓名\',width:100,align:\'center\'}, {field:\'inputtime\',title:\'入职时间\',width:100,align:\'center\'}, {field:\'tel\',title:\'电话\',width:100,align:\'center\'}, {field:\'email\',title:\'邮箱\',width:100,align:\'center\'}, {field:\'department\',title:\'部门\',width:100,align:\'center\'}, {field:\'state\',title:\'状态\',width:100,align:\'center\',formatter:function (value,row,index) { if (row.state){ return "在职"; }else { return "<font style=\'color:red\'>离职</font>" } }}, {field:\'admin\',title:\'管理员\',width:100,align:\'center\',formatter:function (value,row,index) { if (row.admin){ return "是"; }else { return "否"; } }}, ]], fit:true, /*是否需要填满*/ fitColumns:true, /*是否自动伸缩*/ rownumbers:true, /*是否需要显示行号*/ pagination:true /*是否需要分页*/ }) }); 添加管理员和状态的判断,true为在职和是,false为离职和否. 在domain的实体类中添加注解 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") private Date inputtime; 设置时间格式为GMT+8小时. 或者使用 @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") 8. 部门表创建 包含id和name,在employee表建立外键dep_id 参考表department参考字段id. 逆向生成domain和mapper,mapper.xml. 将xml放在resources下面. 9. 员工部门关联查询. 修改Employee的部门字段,需要修改为和employee.js的字段相同. private Department department; 修改数据库查询语句,使用左连接当两个表id相等时. <select resultMap="BaseResultMap" > select e.id, e.username, e.inputtime, e.tel, e.email, e.state, e.admin , d.id as d_id, d.`name` as d_name from employee as e LEFT JOIN department as d ON e.dep_id=d.id; </select> 修改 <result column="dep_id" property="dep_id" jdbcType="bigint" />为下面的 注意columnPrefix="d_",因为上面使用了as修改了别名,所有要加上d_,不然无法映射 <association property="department" javaType="com.itlike.domain.Department" columnPrefix="d_"> <result property="id" column="id"/> <result property="name" column="name"/> </association> 实现了查询部门名称,接下来再在前端去使用数据. 注意需要删除上面查询语句中的dep_id 注意SQL语句结尾不能添加; 否则sql语句不会执行. 修改前端的js,如果有部门则显示名字,注意使用value. {field:\'department\',title:\'部门\',width:100,align:\'center\',formatter:function (value,row,index) { if(value.name){ return value.name; }else { return "无部门"; } }}, 在多表查询有字段名相同时,起一个别名,在封装时注意使用columnPrefix. 10. 添加对话框搭建 列表添加工具栏目 employee.jsp <body> <div> <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-add\',plain:true">添加</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-edit\',plain:true">编辑</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-remove\',plain:true">删除</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-reload\',plain:true">刷新</a> </div> <table></table> </body> 修改前端样式,添加对话框 <%--对话框--%> <div> <table> <tr> <td>用户名:</td> <td><input type="text" class="easyui-validatebox" data-options="required:true"></td> </tr> <tr> <td>密码:</td> <td><input type="password" class="easyui-validatebox" data-options="required:true"></td> </tr> <tr> <td>手机:</td> <td><input type="text" class="easyui-validatebox" ></td> </tr> <tr> <td>邮箱:</td> <td><input type="text" class="easyui-validatebox" ></td> </tr> <tr> <td>入职日期:</td> <td><input type="text" class="easyui-datebox"></td> </tr> <tr> <td>部门:</td> <td><select></select></td> </tr> <tr> <td>是否管理员:</td> <td><select></select></td> </tr> </table> </div> 添加增删编辑刷新按钮. employee.js 监听添加按钮点击 /*对话框*/ $("#dialog").dialog({ width:350, height:350, closed:true //初始默认为隐藏 }); /*监听添加按钮点击*/ $("#add").click(function () { $("#dialog").dialog("open"); //监听点击时open }) 11. 下拉列表placeholder处理 修改jsp中的页面,将select改为input,添加placeholder属性 <tr> <td>部门:</td> <td><input placeholder="请选择部门"/></td> </tr> <tr> <td>是否管理员:</td> <td><input placeholder="是否为管理员"/></td> </tr> 在js中添加下拉列表,选中id为state和department的行 /*部门选择 下拉列表*/ $("#department").combobox({ width:150, panelHeight:\'auto\' }); /*是否为管理员 下拉列表*/ $("#state").combobox({ width:150, panelHeight: \'auto\', textField:\'label\', valueField:\'value\', editable:false, //editable 是否可以输入 data:[{ label:\'是\', value:\'true\' },{ label:\'否\', value:\'false\' }], onLoadSuccess:function () {/*数据加载完毕后回调显示提示*/ $("#state").each(function(i){ var span =$(this).siblings("span")[i]; var targetInput = $(span).find("input:first"); if(targetInput) { $(targetInput).attr("placeholder", $(this).attr("placeholder")); } }) } }); 12. 下拉列表部门数据加载 先建立一个controller DepartmentController @Controller public class DepartmentController { /*注入DepartmentService业务层*/ @Autowired private DepartmentService departmentService; //部门下拉查询部门 @RequestMapping("/departList") @ResponseBody public List<Department> departList(){ List<Department> departmentList = departmentService.getDepartmentList(); return departmentList; } } 创建它依赖的业务层接口DepartmentService 创建业务层DepartmentServiceImpl @Service public class DepartmentServiceImpl implements DepartmentService { /*注入mapper*/ @Autowired private DepartmentMapper departmentMapper; @Override public List<Department> getDepartmentList() { List<Department> departments = departmentMapper.selectAll(); return departments; } } 修改employee.jsp /*部门选择 下拉列表*/ $("#department").combobox({ width:150, panelHeight:\'auto\', editable:false, url:\'departList\', textField:\'name\', valueField:\'id\', onLoadSuccess:function () {/*数据加载完毕后回调显示提示*/ $("#department").each(function(i){ var span =$(this).siblings("span")[i]; var targetInput = $(span).find("input:first"); if(targetInput) { $(targetInput).attr("placeholder", $(this).attr("placeholder")); } }) } }); 13. 添加表单提交 修改对话框,添加两个按钮 /*对话框*/ $("#dialog").dialog({ width:350, height:350, closed:true, buttons:[{ /*提交表单*/ $("#employeeForm").form("submit",{ url:"saveEmployee", success:function(data){ console.log(data); } }); } },{ text:\'关闭\', handler:function() { } }] }); 给.jsp的对话框添加form表单属性 <%--对话框--%> <div> <form> </form> </div> 给对话框内的所有参数添加name属性 <td><input type="text" class="easyui-validatebox" data-options="required:true"></td> <td><input type="text" class="easyui-validatebox" data-options="required:true"></td> 在EmployeeController层添加接收表单 /*接收员工添加表单*/ @RequestMapping("/saveEmployee") public void saveEmployee(Employee employee){ System.out.println("提交表单成功"); System.out.println(employee); } 让后台可以接收到属性 14. 添加表单提交 由于前面设计表时没有添加密码,需要在数据库添加password字段 在controller层 /*接收员工添加表单*/ @RequestMapping("/saveEmployee") public void saveEmployee(Employee employee){ /*调用业务层,保存用户*/ employeeService.saveEmployee(employee); } service层 @Transactional /*保存员工*/ @Override public void saveEmployee(Employee employee) { employeeMapper.insert(employee); } 注意是添加,所以需要添加事务的注释. 修改mapper <!--添加员工--> <insert parameterType="com.itlike.domain.Employee" > insert into employee (id, username, password, inputtime, tel, email, state, admin, dep_id) values (#{id}, #{username},#{password}, #{inputtime}, #{tel}, #{email}, #{state}, #{admin}, #{department.id}) </insert> 由于dep_id是从department.id获取的值,所以修改values.并且添加password字段. state还未设置,需要添加设置在service层 /*接收员工添加表单*/ @RequestMapping("/saveEmployee") public void saveEmployee(Employee employee){ /*调用业务层,保存用户*/ employee.setState(true); employeeService.saveEmployee(employee); } 添加一个domain类AjaxRes,用来接收参数. 用来表明接收失败还是成功,还有message. .parseJSON()函数 用于将格式完好的JSON字符串转为与之对应的JavaScript对象。 AjaxRes @Component @Getter@Setter@ToString public class AjaxRes { private boolean success; private String msg; } EmployeeController @Autowired private AjaxRes ajaxRes; /*接收员工添加表单*/ @RequestMapping("/saveEmployee") @ResponseBody public AjaxRes saveEmployee(Employee employee){ try { /*调用业务层,保存用户*/ employee.setState(true); employeeService.saveEmployee(employee); ajaxRes.setMsg("保存成功"); ajaxRes.setSuccess(true); }catch (Exception e){ ajaxRes.setSuccess(false); ajaxRes.setMsg("保存失败"); } return ajaxRes; } 修改employee.js success:function(data){ data = $.parseJSON(data); if(data.success){ $.messager.alert("温馨提示",data.msg); /*关闭对话框*/ $("#dialog").dialog("close"); /*重新加载数据表格*/ $("#dg").datagrid("reload"); }else { $.messager.alert("温馨提示",data.msg); } } 15. 编辑数据回显. 先添加关闭按钮的响应 text:\'关闭\', handler:function() { $("#dialog").dialog("close"); } 然后添加按钮的打开时清空. /*监听添加按钮点击*/ $("#add").click(function () { $("#employeeForm").form("clear"); 使用.form(clear) $("#dialog").dialog("open"); }); ----------------------------------------------------------------------- /*监听添加按钮点击*/ $("#add").click(function () { $("#dialog").dialog("setTitle","编辑员工"); /*清空对话框中的数据*/ $("#employeeForm").form("clear"); /*打开对话框*/ $("#dialog").dialog("open"); }); /*员工数据列表*/ $("#dg").datagrid({ singleSelect:true, /*只能选择一行*/ striped:true, /*斑马线显示,隔行变色*/} 如果需求是不能编辑密码,那么选择编辑时隐藏密码选项 在jsp页面给tr添加id为password <tr> <td>密码:</td> <td><input type="text" class="easyui-validatebox" data-options="required:true"></td> </tr> /*监听编辑按钮点击*/ $("#edit").click(function () { /*获取当前选中的行*/ var rowData = $("#dg").datagrid("getSelected"); console.log(rowData); if(!rowData){ $.messager.alert("提示","请选择一行数据进行编辑"); return; } /*隐藏密码选项*/ $("#password").hide(); /*弹出对话框*/ $("#dialog").dialog("setTitle","编辑员工"); $("#dialog").dialog("open"); /*设置部门,由于部门是department.id,所以需要设置,不能直接回调*/ rowData["department.id"] = rowData["department"].id; /*设置管理员回显*/ rowData["admin"]=rowData["admin"]+""; /*选中数据的回显*/ $("#employeeForm").form("load",rowData); }) 16. 编辑提交 由于是使用的同一个对话框dialog,所以在提交表单之前,需要判断是新增还是添加. 在jsp页面的form标签下添加一个隐藏域 jsp页面 <form> <%--添加一个隐藏域用于区分添加和编辑--%> <input type="hidden"> employee.js handler:function(){ /*判断当前是新增还是编辑*/ var id = $("[name=\'id\']").val(); /*由于要区分新增和编辑,下面url不能写死.*/ var url; if(id){ /*如果有id则为编辑操作*/ url = "updateEmployee" }else{ /*如果没有则为添加*/ url = "saveEmployee" } /*提交表单*/ $("#employeeForm").form("submit",{ url:url, 由于采用的对话框编辑和添加时同一个,而编辑没有密码的选项,但是密码属于data-options="required:true" 是必填项,所以需要取消密码校验. 在employee.js /*监听编辑按钮点击*/下添加 /*取消密码的验证*/ $("[name= \'password\']").validatebox({required:false}); //validatebox验证盒设置必需为否 /*隐藏密码选项*/ $("#password").hide(); 然后在添加时需要去增加密码验证 /*监听添加按钮点击*/ $("#add").click(function () { /*添加密码验证*/ $("[name=\'password\']").validatebox({required: true}); 在EmployeeController添加 @RequestMapping("/updateEmployee") /*编辑员工数据*/ @RequestMapping("/updateEmployee") public void updateEmployee(){ System.out.println("编辑员工数据"); } 17. 更新员工 EmployeeController /*编辑员工数据*/ @RequestMapping("/updateEmployee") @ResponseBody public AjaxRes updateEmployee(Employee employee){ try { employeeService.updateEmployee(employee); ajaxRes.setMsg("编辑成功"); ajaxRes.setSuccess(true); }catch (Exception e){ ajaxRes.setSuccess(false); ajaxRes.setMsg("编辑失败"); } return ajaxRes; } employeeService /*编辑员工*/ public void updateEmployee(Employee employee); employeeServiceImpl @Override public void updateEmployee(Employee employee) { /*调用业务层更新员工*/ employeeMapper.updateByPrimaryKey(employee); } 18. 设置离职状态 先监听按钮的点击 /*设置离职按钮的点击*/ $("#delete").click(function () { /*获取当前选中的行*/ var rowData =$("#dg").datagrid("getSelected"); console.log(rowData); if(!rowData){ $.messager.alert("请选择一行数据进行删除"); return; } /*提醒用户是否做离职操作*/ $.messager.confirm("确认","是否做离职操作",function (res) { if(res){ /*点击确认,返回值为true,点击取消返回值为false,做离职的操作*/ $.get("/updateState?id="+rowData.id,function (data) { /* data = $.parseJSON(data);由于前面时使用get方式提交,所有不再需要转换json格式*/ if(data.success){ $.messager.alert("温馨提示",data.msg); /*重新加载数据表格*/ $("#dg").datagrid("reload"); }else { $.messager.alert("温馨提示",data.msg); } }) } }) }); EmployeeController /*离职操作请求*/ @RequestMapping("/updateState") @ResponseBody public AjaxRes updateState(Long id){ try { /*设置员工离职状态*/ employeeService.updateState(id); ajaxRes.setMsg("删除成功"); ajaxRes.setSuccess(true); }catch (Exception e){ ajaxRes.setSuccess(false); ajaxRes.setMsg("删除失败"); } return ajaxRes; } employeeService /*离职员工*/ public void updateState(Long id); employeeServiceImpl @Override public void updateState(Long id) { /*员工离职状态*/ employeeMapper.updateState(id); } EmployeeMapper void updateState(Long id); EmployeeMapper.xml <!--设置员工离职状态--> <update> update employee set state=false where id=#{id} </update> 19. 离职按钮状态设置 需求,状态设置为离职后,选择该条数据不能再点击离职. employee.js/*员工数据列表*/下面最后添加 onClickRow:function (rowIndex,rowData) { /*判断当前行是否是离职状态*/ if(!rowData.state){ /*是离职,把离职按钮禁用*/ $("#delete").linkbutton("disable"); }else{ /*未离职,启用*/ $("#delete").linkbutton("enable"); } } 但是disable还是可以点击,esayUI的bug. 添加一个base.js覆盖重写linkbutton方法扩展 把base.js放在js目录下. 20. 分页添加 添加一个domain QueryVo接收页面的两个参数 由于前端页面设定的form data 有两个参数page:1 rows:10. QueryVo @Getter@Setter@ToString public class QueryVo { private int page; private int rows; } 在EmployeeController层 @RequestMapping("/employeeList") @ResponseBody public PageListRes employeeList(QueryVo vo){ /*调用业务层查询员工*/ PageListRes pageListRes = employeeService.getEmployee(vo); return pageListRes; } 传入一个vo参数. employeeService /*查询员工*/ public PageListRes getEmployee(QueryVo vo); employeeServiceImpl @Override public PageListRes getEmployee(QueryVo vo) { /*调用mapper查询员工*/ /*设置分页total*/ Page<Object> page = PageHelper.startPage(vo.getPage(), vo.getRows()); 就可以通过页面设置每页的数据条数,自动分页. pageList:[10,20,30,50], /*设置每页显示行数*/ 21. 搜索操作 在工具栏添加一个查询框 <input type="text"> <a class="easyui-linkbutton" iconCls="icon-search">查询</a> 监听按钮点击employee.js /*监听搜索按钮点击*/ $("#searchbtn").click(function () { /*获取搜索框内容*/ var keyword = $("[name=\'keyword\']").val(); /*重新加载列表 把参数传过去*/ $("#dg").datagrid("load",{keyword:keyword}); }) QueryVo中添加 private String keyword; employeeServiceImpl在查询中传入参数vo List<Employee> employees = employeeMapper.selectAll(vo); EmployeeMapper添加参数vo List<Employee> selectAll(QueryVo vo); EmployeeMapper.xml改写sql语句,引用sql片段 添加sql片段 <sql > <where> <if test="keyword !=null and keyword!=\'\'"> and e.username like concat(\'%\',#{keyword},\'%\') or e.tel like concat(\'%\',#{keyword},\'%\') or e.email like concat(\'%\',#{keyword},\'%\') </if> </where> </sql> <!--员工关联部门查询--> <select resultMap="BaseResultMap" > select e.id, e.username, e.inputtime, e.tel, e.email, e.state, e.admin, d.id as d_id, d.`name` as d_name from employee as e LEFT JOIN department as d ON e.dep_id=d.id <include refid="where_sql"/> //引用sql片段 order by e.id //根据id排序 </select> 22. 刷新操作 直接在js上添加一个刷新按钮的监控就行了,然后清空搜索框内容,再重载一下. /*监听刷新点击*/ $("#reload").click(function () { /*清空搜索内容*/ var keyword = $("[name=\'keyword\']").val(\'\'); /*重新加载数据*/ $("#dg").datagrid("load",{}); }) 23 角色权限关系表建立