最近公司的后台管理界面要求改成以easyui风格的。要求博主做权限管理模块+角色的增删改。
其实一开始博主也是觉得随随弄出来无压力。结果却花了将近4天的时间才从后端到前端，完成了这个权限管理模块。以及oracle分页。
一.我们先讲一下Fomatter方法操作数据。
首先我们要知道什么是Fomatter属性是干什么的。大家如图所示。
*所谓formatter这里指的是easyui里的formatter属性，大家不要混淆
大家看到这个界面后面的操作一栏了吗，下面每一行的编辑和删除是用formatter实现的<a>标签，通过方法实现当点击某一行的编辑或者删除时。会直接跳出一个dialog~。
我们就可以操作他了。博主个人觉得这种写法和easyui示例里的demo，把“增”“删”“改”都写在表头那种方式，要好滴多啦，尤其是面临这种大数据。会提高客户的体验。不多说了上代码：
<tr>
<th field="roleId" width="18%" align="center">角色ID</th>
<th field="roleName" width="18%" align="center">角色名称</th>
<th field="roleLevel" width="18%" align="center">角色级别</th>
<th field="creator" width="18%" align="center">创建人</th>
<th field="createTime" width="50" align="center">创建时间</th>
<th field="caozuo" width="50" align="center" formatter="formatter">操作</th>
</tr>
function formatter(value,row,index){
// var get = $('#roleLevel');
// if(get.val()==1){
return "<a href='#'οnclick='openUserModifyDialog()' class=\"easyui-linkbutton\" name=\"opera1\" title='修改'>编辑</a>"
+" "+
"<a href='#'οnclick='deleteUser()' class=\"easyui-linkbutton\" name=\"opera3\" title='删除'>删除</a>";
}这样。当然我们可以再写一个js操作角色的权限。当code==1的时候显示这个formatter '编辑'‘删除’按钮。code==0的时候不显示。这里就不作演示了。
大家可能很多人用的mysql分页。直接limit （#，#）用着美滋滋。但是oracle分页貌似和mysql分页有点大相径庭。所以首先用Oracle写分页应当知道Oracles数据库rownum属性,rownum是伪列,是oracle自动添加的,假rownum>2,他会从第一条开始检索,他会查到rownum=1不满足条件,于是被抛弃,然后继续找第二条但是,第一条已经被抛弃,在找第二条时,Oracle会把第二条的rownum设置为1,在判断第二条是否满足条件,同样不满足,于是就发生了死循环一样的判断,最终返回空,所以在伪列的判断中不可以有>,>=,=这些符号存在。
而我们知道easyUI分页组件会给后台传递两个参数,分别是page(当前页)和rows(每页显示的条数)这是我们就要利用这两个参数对我们的sql进行处理。同时因为easyui因为会传固定的json数据格式，所以我们还要写一个方法，来获取总条数，博主这里是getTotal()方法，同时拿到这三个参数以后，就可以在前台显示啦~
所以在后台方法中我们这样处理一下：
public static void list() {
MiniActionHelper.req.get();
Map<String,Object> map=new HashMap<String,Object>();
int total=UserInfoService.getTotal(map);
UserInfo userinfo=new UserInfo();
userinfo.setTotal(total);
int page=getPageNumber();
int rows=getRowsNumber();
map.put("page",(page*rows-rows));
map.put("rows",(page*rows));
map.put("total",userinfo.getTotal());
System.out.println("_+_+_+_+_+_+_+_+_+_+_+_+_+"+userinfo.getRows());
System.out.println("_+_+_+_+_+_+_+_+_+_+_+_+_+:::"+userinfo.getPage());
System.out.println("_+_+_+_+_+_+_+_+_+_+_+_+_+:::"+userinfo.getTotal());
Map<String,Object> map1=new HashMap<String,Object>();
List list=UserInfoService.find(map);
map1.put("rows",list);
map1.put("total",total);
renderJSON(map1);
}
select * from
(select u.*,rownum rn from t_user u
where ......) us
where us.rn>#{page} and us.rn<=#{rows} <select id="find" parameterType="Map" resultType="UserInfo">
select * from (
select nick_name,password,user_name, rownum as rn
from tms_sys_user order by nick_name) us
where us.rn<![CDATA[>=]]>#{page} and us.rn<![CDATA[<=]]>#{rows}
</select>因为mybatis在发送sql时会先进行编译,而< ,>,<=,>=这些符号不能被编译,所以我们应该用转义符号来代替
一些常用的转义符号
< <
> >
<> <>
& &
' '
" "
三.完整代码：
1.前端：
@extends(layout/nested)
<div class="easyui-layout" data-options="fit:true,border:false" style="">
<div data-options="region:'north'" id="starting" style="">
<div class="easyui-panel" data-options="border: false" style="">
<table style="width: 100%" >
<tr>
<br>
<td style="text-align: center">
<label>角色名称：</label>
<input class="easyui-textbox" type="text" id="query_roleName" style="width: 200px" data-options="required: false"/>
</td>
<td style="text-align: center">
<label>角色级别：</label>
<select id='query_xroleLevel' name="mailType" class="easyui-combobox" style="width:200px" data-options="required: true,panelHeight:'auto'" >
<option value="" selected>--</option>
<option value="1" >总部</option>
<option value="0">省</option>
<option value="0">处理中心</option>
<option value="0">揽投部</option>
</select>
</td>
<td id="btnTd">
<input class="easyui-button" type="button" value="查询" οnclick="query()"/>
<input class="easyui-button" type="button" value="重置" οnclick="flush()" />
</td>
</tr>
</tr>
</table>
</div>
</div>
<div data-options="region:'center',border:false">
<div class="easyui-fluid" style="height: 100%">
<table id="dg" title="" class="easyui-datagrid" fitColumns="true"
pagination="true" rownumbers="true" singleSelect="true"pageSize="5"
rownumbers="true"
pageList="[5,10,15,20]"
style="width:auto;height:auto "
url='@ctx/security/role/!queryAllroles' fit="true"
toolbar="#tb">
<thead >
<tr>
<th field="roleId" width="18%" align="center">角色ID</th>
<th field="roleName" width="18%" align="center">角色名称</th>
<th field="roleLevel" width="18%" align="center">角色级别</th>
<th field="creator" width="18%" align="center">创建人</th>
<th field="createTime" width="50" align="center">创建时间</th>
<th field="caozuo" width="50" align="center" formatter="formatter">操作</th>
</tr>
</thead>
</table>
<div id="tb">
<a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
<div id="dlg-buttons">
<a href="javascript:saveUser()" class="easyui-linkbutton"iconCls="icon-ok">保存</a>
<a href="javascript:closeUserDialog()"class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
<div id="dlg" class="easyui-dialog"
style="width: 730px;height:280px;padding:10px 10px; background-color: white" closed="true"
buttons="#dlg-buttons">
<form method="post" id="fm">
<table cellspacing="8px;" style="background-color: white">
<tr>
<td>角色名称：</td>
<td><input type="text" id="roleName" name="roleName"
class="easyui-validatebox" required="true" /> <span
style="color: red">*</span>
</td>
<td> </td>
<td>角色级别：</td>
<td><input type="text" id="roleLevel" name="roleLevel"
class="easyui-validatebox" required="true" /> <span
style="color: red">*</span>
</td>
</tr>
<tr>
<td>备注：</td>
<td><input type="text" id="remark" name="remark"
class="easyui-validatebox" /> <span
style="color: red">*</span>
</td>
<script type="text/javascript">
var url;
function openUserAddDialog() {
$("#dlg").dialog("open").dialog("setTitle", "添加角色信息");
}
function flush() {
$("#dg").datagrid("reload");
}
function saveUser() {
var url='@ctx/security/role/!addrole';
$("#fm").form("submit", {
url : url,
onSubmit : function() {
if ($("#roleName").validator== ""||$("#releName").length>=10) {
$.messager.alert("系统提示", "角色名称输入出错，角色名称不能为空且不能大于10！");
return false;
}
else if($("#roleLevel").validator==""){
$.messager.alert("角色级别不能为空！")
}
else if($("#remark").length>=200){
$.messager.alert("备注不能大于200字！")
}
return $(this).form("validate");
},
success : function(result) {
$.messager.alert("系统提示", "保存成功！");
$("#dlg").window("close");
$("#dg").datagrid("reload");
$("#fm").form('clear');
return;
}
});
}
function formatter(value,row,index){
// var get = $('#roleLevel');
// if(get.val()==1){
return "<a href='#'οnclick='openUserModifyDialog()' class=\"easyui-linkbutton\" name=\"opera1\" title='修改'>编辑</a>"
+" "+
"<a href='#'οnclick='deleteUser()' class=\"easyui-linkbutton\" name=\"opera3\" title='删除'>删除</a>";
}
function doSearch() {
$("#dg").datagrid('load', {
searchName : $("#password").val(),
});
}
function closeUserDialog() {
$("#dlg").window("close");
$("#dg").datagrid("reload");
}
function resetValue() {
$("#nickName").val("");
$("#password").val("");
$("#userName").val("");
}
function deleteUser() {
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('确认','您确定要删除吗？',function(r){
if (r){
$.post('@ctx/security/role/!deleteRole',{roleId:row.roleId},function(result){
console.log(result);
$.messager.alert("系统提示", "数据已成功删除！");
$("#dg").datagrid("reload");
// console.log(result);
},'json');
}
});
}
}
function openUserModifyDialog() {
var selectedRows = $("#dg").datagrid("getSelections");
if (selectedRows.length != 1) {
$.messager.alert("系统提示", "请选择一条要编辑的数据！");
return;
}
var row = selectedRows[0];
$("#dlg").dialog("open").dialog("setTitle", "编辑用户信息");
$("#fm").form("load", row);
url = "@ctx/security/role/!updateById?roleId=" + row.roleId;
}
</script>
</tr></table></form>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
@section("links") {
<style type="text/css">
body{
margin: 0 !important;
background-color: #010815 !important;
}
.panel-body, .layout {
background-color: white;
}
.easyui-panel{
padding-bottom:0 !important;
}
.top{
width: auto;
height:50px;
line-height:50px;
text-align: center;
color: #067dd4;
font-family: "微软雅黑";
font-size: 20px;
background-color: #052f5d;
margin-top:20px;
margin-right:10px;
}
.ulblock{
height: auto;
width: auto;
margin-right:10px;
background-color: #030e24;
border: 1px solid ;
}
.urt{
margin-right:0;
margin-left: auto;
}
.ftitle span{
margin-left:20px;
font-size: 24px;
color: #cecece;
font-family: "微软雅黑";
}
.shu{
margin-top:4px;
width: 5px;
height: 24px;
background-color: #077ed7;
float: left
}
.ulblock ul{
width:auto;
margin-top:60px;
margin-left: 40%;
list-style-type: square;
}
</style>
}
package web.routes.servlet; import com.hollycrm.common.util.Maps; import com.hollycrm.common.web.MiniActionHelper; import com.hollycrm.framework.util.StringUtil; import com.hollycrm.tms.system.security.model.UserInfo; import com.hollycrm.tms.system.security.service.UserInfoService; import java.util.HashMap; import java.util.List; import java.util.Map; import static com.hollycrm.common.web.MiniActionHelper.*; import static com.hollycrm.common.web.MiniActionHelper.renderJSON; public class UserServlet { public static void __() { Map model = Maps.newHashMap(); renderMustache(model); } public static void deleteuser(){ UserInfo userinfo=new UserInfo(); String nickName=StringUtil.killNull(paramStringValue("nickName")); String password=StringUtil.killNull(paramStringValue("password")); String userName=StringUtil.killNull(paramStringValue("userName")); userinfo.setNickName(nickName); userinfo.setPassword(password); userinfo.setUserName(userName); renderJSON(UserInfoService.deleteuser(userinfo)); } public static void updateById(){ UserInfo userinfo=new UserInfo(); String nickName=StringUtil.killNull(paramStringValue("nickName")); String password=StringUtil.killNull(paramStringValue("password")); String userName=StringUtil.killNull(paramStringValue("userName")); userinfo.setNickName(nickName); userinfo.setPassword(password); userinfo.setUserName(userName); renderJSON(UserInfoService.updateById(userinfo)); } public static void adduser(){ UserInfo userinfo=new UserInfo(); String nickName=StringUtil.killNull(paramStringValue("nickName")); String password=StringUtil.killNull(paramStringValue("password")); String userName=StringUtil.killNull(paramStringValue("userName")); userinfo.setNickName(nickName); userinfo.setPassword(password); userinfo.setUserName(userName); renderJSON(UserInfoService.adduser(userinfo)); } public static void getTotal(){ String total=StringUtil.killNull(paramStringValue("total")); Map<String,Object> map=new HashMap<String,Object>(); map.put("total",total); System.out.println("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"+total); renderJSON(UserInfoService.getTotal(map)); } public static void list() { MiniActionHelper.req.get(); Map<String,Object> map=new HashMap<String,Object>(); int total=UserInfoService.getTotal(map); UserInfo userinfo=new UserInfo(); userinfo.setTotal(total); int page=getPageNumber(); int rows=getRowsNumber(); map.put("page",(page*rows-rows)); map.put("rows",(page*rows)); map.put("total",userinfo.getTotal()); System.out.println("_+_+_+_+_+_+_+_+_+_+_+_+_+"+userinfo.getRows()); System.out.println("_+_+_+_+_+_+_+_+_+_+_+_+_+:::"+userinfo.getPage()); System.out.println("_+_+_+_+_+_+_+_+_+_+_+_+_+:::"+userinfo.getTotal()); Map<String,Object> map1=new HashMap<String,Object>(); List list=UserInfoService.find(map); map1.put("rows",list); map1.put("total",total); renderJSON(map1); } }
3.dao层到这里 easyui+oracle分页的增删改就算是做完了。import com.alibaba.dubbo.common.json.JSON; import com.google.gson.Gson; import com.hollycrm.common.ibatis.IBatisConfig; import com.hollycrm.tms.mybatis.plugin.IBatisEnvironment; import com.hollycrm.tms.plan.core.dao.AreaTimeLimitRouteMapper; import com.hollycrm.tms.system.security.dao.UserInfoMapper; import com.hollycrm.tms.system.security.model.UserInfo; import org.apache.ibatis.annotations.ResultMap; import org.apache.ibatis.mapping.ResultMapping; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class UserInfoService { /*查找用户是否存在*/ public static boolean exists(String nick_name) { return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).get(nick_name) != null; } /*删除用户*/ public static boolean deleteuser(UserInfo userInfo){ return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).deleteuser(userInfo); } /*修改用户*/ public static int updateById(UserInfo userInfo){ return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).updateById(userInfo); } /*添加用户*/ public static int adduser(UserInfo userInfo){ return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).adduser(userInfo); } /*查询用户*/ public static Map<String, Object> queryData(UserInfo userinfo) { UserInfoMapper mapper = IBatisConfig.getInstance().openSession(IBatisEnvironment.PLAN_EXECUTE_ENVIRONMENT) .getMapper(UserInfoMapper.class); Map<String, Object> resultMap = new HashMap<String, Object>(); resultMap.put("rows", mapper.queryData(userinfo)); return resultMap; } public static int getTotal(Map<String, Object> map){ return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).getTotal(map); } public static List<UserInfo> find(Map<String, Object> map){ return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).find(map); } public static List<UserInfo> getAllUser(String page,String rows){ return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).getAllUser(page,rows); } public static int getCount(){ return IBatisConfig.getInstance().openSession().getMapper(UserInfoMapper.class).getCount(); }
1471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
