(
以jQuery/ajax为基础，来搭建客户端UI系统。
UI：jQuery UI /jQuery EasyUI /Ext /DWZ
<a href="<%=path%>/easyui_panel.jsp">1：面板</a>
<a href="<%=path%>/easyui_layout.jsp">2：布局</a>
<a href="<%=path%>/easyui_datagrid.jsp">3：网格组件</a>
UI：jQuery UI /jQuery EasyUI /Ext /DWZ
<a href="<%=path%>/easyui_panel.jsp">1：面板</a>
<a href="<%=path%>/easyui_layout.jsp">2：布局</a>
<a href="<%=path%>/easyui_datagrid.jsp">3：网格组件</a>
其中网格布局中有用到分页插件
)
1、jquery-easyui-1.3.6.zip里有很多demo，如果要看的话，可以把它放到D:\MyEclipseProtect\.metadata\.me_tcat7\webapps，其中
MyEclipseProtect 是我们放工程的文件夹，然后在myeclipse中启动tomcat，还得在他的conf--->web.xml目录下改servlet里的init-param里的param-name的值为listings的param-value的值为true（表示会显示tomcat下面的列表）。
<servlet>
<servlet-name>default</servlet-name>
<servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>0</param-value>
</init-param>
<init-param>
<param-name>listings</param-name>
<param-value>
true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
最后去访问这个地址就可以了。http://localhost:8080/jquery-easyui-1.3.6/demo
2、当把
jquery-easyui-1.3.6.zip引入到自己的工程时，XXX.jsp的头要改下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
改为<!DOCTYPE HTML>因为不同的头，css会有不同的显示效果。
还可以把demo的文件夹删除了。
3、easyUI中的面板panel
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="This is my page"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">
jQuery(function(){
jQuery("#panel_2").panel({
//属性的设置
title: "通过javascript渲染的面板",
iconCls:"icon-help",
collapsible:true,
maximizable:true,
width: "500px",
height: "200px",
//监听事件
onMaximize: function(){
window.alert("面板被最大化了");
}
});
jQuery("#button_2").click(function(){
jQuery("#panel_2").panel("setTitle","标题被改了");
})
});
</script>
</head>
<body>
<Pre>
1：通过Div+Class来进行渲染相应的组件 class = "eayui-组件的名称",组件的属性设置通过data-options来设置。
</Pre>
<div id="p" class="easyui-panel" data-options="iconCls:'icon-help',collapsible:true,maximizable:true"
title="Basic Panel" style="width:700px;height:200px;padding:10px;">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<br/><br/><br/>
2：通过javascript来控制。
<div id="panel_2"></div>
<Input type="button" id="button_2" value="更改标题"/>;
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="This is my page"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script language="javascript">
jQuery(function(){
});
</script>
</head>
<body >
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:false,collapsible:false" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
再嵌套一个布局。
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',collapsed:false,split:true" style="width:80px">嵌套的西边</div>
<div data-options="region:'center'">嵌套的中间</div>
</div>
</div>
</div>
</body>
</html>
EasyUI_DataGrid.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="This is my page"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/script/easyui_1.4.5/themes/icon.css">
<script type="text/javascript" src="<%=path%>/script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/script/easyui_1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script language="javascript">
jQuery(function(){
jQuery("#grid_div").datagrid({
"title": "角色列表",
url: "<%=path%>/roleAction!listGridForUI?date="+new Date()+"",
columns:[[
{field:"ck", checkbox:true, width:100},
{field:"role_id", title:"角色编码", width:100, align:"center"},
{field:'role_name', title:'角色名称', width:100},
{field:'role_remark', title:'角色备注', width:100, halign:"center",align:'left'}
]],
rownumbers: true,
fit: true, //自动适应父容器
pagination: true,
pageList: [3,5,7],
pageSize: 5,
toolbar: [
{id:"search", text:"查询角色", iconCls:"icon-search"},
{id:"save", text:"添加角色", iconCls:"icon-add"},
{id:"edit", text:"修改角色", iconCls:"icon-edit"},
{id:"delete", text:"删除角色", iconCls:"icon-remove", handler:function(){
//获取选中的记录。
var idArray = new Array();
var checkArray = jQuery("#grid_div").datagrid("getChecked");
if (checkArray == null || checkArray.length == 0){
$.messager.alert("提示","您还未选择记录,不能执行删除操作","info",function(){
return;
});
}else{
for(var i = 0;i<checkArray.length;i++){
var roleObj = checkArray[i];
var role_id = roleObj.role_id;
idArray.push(role_id);
}
var total_roleid = idArray.join(",");//通过,把数组拼接成字符串
//发起ajax请求
var deleteURL = "<%=path%>/roleAction!deleteRole?total_roleid="+total_roleid+"&date="+new Date()+"";
jQuery.get(deleteURL,function(jsonData){
var flag = jsonData.flag;
if (flag == true){
$.messager.alert("提示","删除成功，点击确定后刷新数据","info",function(){
jQuery("#grid_div").datagrid("reload");
});
}else{
var message = jsonData.message;
$.messager.alert("提示","删除失败，错误原因 = " + message,"error",function(){
return;
});
}
},"json");
}
}},
{id:"import", text:"导入", iconCls:"icon-undo"},
{id:"export", text:"导出", iconCls:"icon-redo"},
{id:"reload", text:"刷新数据", iconCls:"icon-reload{"},
]
});
});
</script>
</head>
<body class="easyui-layout">
<div id="div_center" data-options="region:'center'">
<div id="grid_div"></div>
</div>
</body>
</html>
public String listGridForUI() throws Exception {
Map<String, Object> dataMap = new HashMap<String, Object>();
List<RoleBean> roleList = this.roleService.getRoleList(request);
long rsCount = this.roleService.getRoleCount(request);
//这两个参数可以从存储数据的xxx.json里看到
dataMap.put("total", rsCount);//总记录数
dataMap.put("rows", roleList);//是一个 集合
/**
* 转成json字符串
*/
Gson json = new Gson();
String dataStr = json.toJson(dataMap);
PrintWriter out = response.getWriter();
out.print(dataStr);
out.flush();
out.close();
return NONE;
} public String deleteRole() throws Exception {
String total_roleid = request.getParameter("total_roleid");
JsonInfo jsonInfo = new JsonInfo();
if (total_roleid == null || total_roleid.equals("")) {
jsonInfo.setFlag(false);
jsonInfo.setMessage("参数值为空");
} else {
try {
this.roleService.deleteRole(total_roleid);
jsonInfo.setFlag(true);
} catch (Exception e) {
e.printStackTrace();
jsonInfo.setFlag(false);
jsonInfo.setMessage(e.getMessage());
}
}
Gson gson = new Gson();
String jsonStr = gson.toJson(jsonInfo);
PrintWriter out = response.getWriter();
out.print(jsonStr);
out.flush();
return NONE;
} public long getRoleCount(HttpServletRequest request) {
long rsCount = 0;
Session session = null;
Query query = null;
String hql = "Select count(role_id) From RoleBean";
try {
session = HibernateUtil.getSession();
query = session.createQuery(hql);
rsCount = (Long) query.uniqueResult();
} catch (Exception e) {
e.printStackTrace();
} finally {
HibernateUtil.closeSession();
}
return rsCount;
}
public List<RoleBean> getRoleList(HttpServletRequest request) {
/**
* 获取分页的参数
*/
//post提交时，因为有分页插件，所以有请求参数page和rows
String page = request.getParameter("page");//当前页
String rows = request.getParameter("rows");//每页显示的条数
if (StringUtils.isEmpty(page)) {
page = "1";
}
if (StringUtils.isEmpty(rows)) {
rows = "5";
}
int pageSize = Integer.parseInt(rows);
int currentPage = Integer.parseInt(page);
List<RoleBean> roleList = roleDao.getRoleList(pageSize, currentPage);
return roleList;
} public void deleteRole(String total_roleid) {
Connection conn = null;
Statement stmt = null;
String delete_1 = "";
String delete_2 = "";
try {
conn = JdbcUtil.getConn();
stmt = conn.createStatement();
conn.setAutoCommit(false);
String[] role_idArray = total_roleid.split(",");
for (String role_id : role_idArray) {
delete_1 = "Delete From T_Sys_Role where role_id = '" + role_id
+ "'";
delete_2 = "Delete From T_Sys_Role_Menu where roleid = '"
+ role_id + "'";
stmt.executeUpdate(delete_1);
stmt.executeUpdate(delete_2);
//int i = 1 / 0;
}
conn.commit();
} catch (Exception e) {
try {
conn.rollback();
} catch (SQLException e1) {
e1.printStackTrace();
}
throw new RuntimeException(e);
} finally {
DbUtils.closeQuietly(stmt);
DbUtils.closeQuietly(conn);
}
}
public List<RoleBean> getRoleList(int pageSize, int currentPage) {
List<RoleBean> roleList = null;
Session session = null;
Query query = null;
String hql = "Select a From RoleBean a order by cast(role_id as int) desc";
try {
session = HibernateUtil.getSession();
query = session.createQuery(hql);
query.setFirstResult((currentPage - 1) * pageSize);//从0开始
query.setMaxResults(pageSize);
roleList = query.list();
} catch (Exception e) {
e.printStackTrace();
} finally {
HibernateUtil.closeSession();
}
return roleList;
}package com.util;
public class JsonInfo {
private boolean flag;
private String message;
public boolean isFlag() {
return flag;
}
public void setFlag(boolean flag) {
this.flag = flag;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public JsonInfo(boolean flag, String message) {
super();
this.flag = flag;
this.message = message;
}
public JsonInfo() {
super();
}
}
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
