json+flexgrid+jbox组合运用页面刷新<jsp>
2013-11-08 20:55
357 查看
插件效果
1.JSP页面
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/inc/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<link href="${ctx}/css/common.css" rel="stylesheet" type="text/css"></link>
<link href="${ctx}/css/layout.css" rel="stylesheet" type="text/css"></link>
<link href="${ctx}/css/forms.css" rel="stylesheet" type="text/css"></link>
<link rel="stylesheet" href="${ctx}/css/flexigrid.css" type="text/css"></link>
<script src="${ctx}/js/jquery-1.8.3.min.js" type="text/javascript" /></script>
<script src="${ctx}/js/flexigrid.js" type="text/javascript" /></script>
<script src="${ctx}/js/jBox/jquery.jBox-2.3.min.js"
type="text/javascript" /></script>
<link href="${ctx}/js/jBox/Skins/Blue/jbox.css" rel="stylesheet"
type="text/css">
</head>
<body>
<!--选项卡 begin -->
<div class="option">
<ul class="clearfix">
<li id="one1" class="hover"><span><img
src="${ctx}/icon/icon01.gif" />用户列表</span></li>
</ul>
</div>
<!--角色列表 begin -->
<div id="con_one_1" style="padding: 10px;">
<form id="sform">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="tab2">
<tbody>
<tr>
<th width="7%">营销活动：</th>
<td width="11%"><select name="mySel" size="1"
class="selectText"><option value="1" selected>营销活动a</option>
<option value="2">营销活动b</option></select></td>
<th width="9%">产品名称：</th>
<td width="11%"><select name="mySel" size="1"
class="selectText"><option value="1" selected>优惠规则a</option>
<option value="2">优惠规则b</option></select>
</th>
<th width="11%">体验产品数：</th>
<td width="11%"><select name="mySel" size="1"
class="selectText"><option value="1" selected>绑定产品a</option>
<option value="2">绑定产品b</option></select>
</th>
<th width="6%">卡类型：</th>
<td width="8%"><select name="mySel" size="1"
class="selectText"><option value="1" selected>新增</option>
<option value="2">激活</option></select></td>
<th width="11%" rowspan="2" style="text-align: left"><input
type="submit" value="生成" class="searchStyle" onClick="open2();" /></th>
</tr>
<tr>
<th width="7%">起始时间：</th>
<td width="11%"><input id="d421" class="Wdate" type="text"
onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'});"
value="2010-3-30" /></td>
<th width="9%">终止时间：</th>
<td width="11%"><input id="d421" class="Wdate" type="text"
onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'});"
value="2010-6-30" />
</th>
<th width="9%">卡数量：</th>
<td colspan="3"><input name="UserName" size="11"
class="inputText" onfocus="this.className='inputClick'" /></td>
</tr>
</tbody>
</table>
</form>
<table style="display: none" cellpadding="0" id="flexgrid">
</table>
</div>
</body>
</html>
2.script页面
2.1flexgrid插件页面<script>
$(function() {
$("#flexgrid")
.flexigrid(
{
url : "${ctx}/business/findUsers.jsp",
dataType : "json",
colModel : [
{
display : "帐号",
name : "username",
width : 90,
sortable : true,//是否可排序的
align : "center"
},
{
display : "姓名",
name : "realname",
width : 90,
sortable : true,
align : "center"
},
{
display : "积分",
name : "score",
minwidth : 90,
sortable : true,
align : "center"
},
{
display : "年龄",
name : "age",
width : 90,
sortable : true,
align : "center"
},
{
display : "出生年月",
name : "birthday",
minwidth : 120,
sortable : true,
align : "center"
},
{
display : "操作",
name : "username",
minwidth : 120,
sortable : true,
align : "center",
process : function(val, id) {
var un = $(val).html();
return val.innerHTML = "<a href='#' onclick='t_open1(\""
+ un
+ "\")'>修改</a> <a href='#' onclick='layout(\""
+ un + "\")'>删除</a>";
}
} ],
sortname : "username",
sortorder : "desc",
striped : true, //是否显示斑纹效果
usepager : true,
idProperty : 'id',//绑定主键ID，列格式化时用到。
nowrap : true, //是否不换行 若换行则后台接收数据后面多一个\n字符
nomsg : '无相关记录', //无结果的提示信息 在右下角显示
autoload : true, //自动加载，即第一次发起ajax请求
//title : "用户l",
pagestat : "显示记录从{from}到{to}，总数 {total} 条",
useRp : true,
rp : 10,//每页默认显示的数据条数
rpOptions : [ 5, 10, 15, 20, 30, 40, 100 ],
resizable : false, //table是否可伸缩
procmsg : "加载中, 请稍等 ...",
showTableToggleBtn : true,
buttons : [ {
name : "Add",
bclass : "add",
onpress : t_open
} ]
});
function addFormData() {
var dt = $('#sform').serializeArray();
$("#flexgrid").flexOptions({
params : dt
});////重置表格的某些参数
return true;
}
$('#sform').submit(function() {
var dt = $('#sform').serializeArray();
$('#flexgrid').flexOptions({
params : dt,
newp : 1
}).flexReload();
return false;
});
}); </script>2.2jbox响应函数区<script>
function t_open() {
//content属性（共有五个值）：html:、id:、get:、post:、iframe:，
jBox.open("iframe:${ctx}/view/user/adduser.jsp", "添加用户", 500, 400, {
buttons : {},
closed : function() {
$("#flexgrid").flexReload();
}
});
}
function t_open1(username) {
//content属性（共有五个值）：html:、id:、get:、post:、iframe:，
jBox.open("iframe:${ctx}/view/user/editor.jsp?username=" + username,
"修改用户", 500, 400, {
buttons : {},
closed : function() {
$("#flexgrid").flexReload();
}
});
}
function layout(username) {
var url = "${ctx}/business/doDelete.jsp?username="+username;
var submit = function(v, h, f) {
if (v == true) {
$.post(url,function(data){
window.parent.jBox.close();
});
}
};
jBox.confirm("你确定要删除" + username + "用户么？", "提示", submit, {
id : 'hahaha',
showScrolling : false,
buttons : {
'确定' : true,
'取消' : false
},
//刷新函数，实现页面数据刷新
closed : function() {
$("#flexgrid").flexReload();
}
});
}
</script>3.json格式插入数据<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter,com.ifly.ms.utils.PageBean,com.ifly.ms.beans.UserBean"%>
<jsp:useBean id="ub" class="com.ifly.ms.beans.UserBean"></jsp:useBean>
<%
//获取插件中page变量的值
int count=Integer.parseInt(request.getParameter("page"));
//获取插件中rp变量的值
int count1=Integer.parseInt(request.getParameter("rp"));
PageBean<UserBean> pagebean=new PageBean<UserBean>();
pagebean.setPage(count);
pagebean.setRp(count1);
//pagebean获取List对象
pagebean=ub.queryRows(pagebean);
//设置输出格式
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter writer=response.getWriter();
//调用toString将对象转化为json
String json=pagebean.toString();
//将json写到插件里面
writer.write(json);
//System.out.println(json);
writer.flush();
%>4.对象转化为json的toString方法public String toString(){
return JSONObject.fromBean(this).toString();
}
注意，PageBean类中参数需要与flexgrid插件一致，故需要定义为以下几个变量package com.ifly.ms.utils;
import java.util.List;
import net.sf.json.JSONObject;
/**
* @desc: mySchedule_1107
* @author: Administrator
* @createTime: 2013年11月7日 下午8:20:11
* @history:
* @version: v1.0
* @param <T>
*/
public class PageBean<T> {
/**
* 总页数
*/
private int rp;
/**
* @return the rp
*/
public int getRp() {
return rp;
}
/**
* @param rp the rp to set
*/
public void setRp(int rp) {
this.rp = rp;
}
/**
* 总页数
*/
private int total;
/**
* 默认当前页
*/
private int page;
/**
* 数据集合
*/
private List<T> rows;
/**
* @return the total
*/
public int getTotal() {
return total;
}
/**
* @param total the total to set
*/
public void setTotal(int total) {
this.total = total;
}
/**
* @return the page
*/
public int getPage() {
return page;
}
/**
* @param page the page to set
*/
public void setPage(int page) {
this.page = page;
}
/**
* @return the rows
*/
public List<T> getRows() {
return rows;
}
/**
* @param rows the rows to set
*/
public void setRows(List<T> rows) {
this.rows = rows;
}
public String toString(){
return JSONObject.fromBean(this).toString();
}
}需要json格式转换需要的jar包
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- (转)json+flexgrid+jbox组合运用页面刷新<jsp>
- 提交表单时，固定jsp页面<select>标签下option的值不刷新
- JSP用到一个下拉框<select> 页面刷新后，保持选中的值
- jsp页面<c:foeEach> 与 <c:forToken>综合运用
- jsp页面中 <%%> <%! %>, <%=%> <%-- --%>有什么区别
- 系统jsp<%@ include file=""%>头页面常用参数
- <!--注释-->和<%--注释--%>有什么区别 （jsp页面与其相同）
- JSTL标签库中<c:choose></c:choose>不能放JSP页面<!-- -->注释
- JSP页面中<%! %>和<% %>的区别
- jsp页面<input value=<%= %>标签获取数据库值的问题
- JSP页面中注释<!-- --> 和 <%-- --%>的区别
- 转载：如何理解jsp页面中的“<base href="<%=basePath%>">”？
- JSP页面<% ...%>中各种符号的区别
- <iframe>引用页面在父类页面调用函数只刷新子页面方法
- Jsp页面关于BootStrap模态框和<a href onclick>事件不能同时使用，以及传参的问题
- <s:property>标签从后台读取Date类型年份为两位在jsp页面显示的解决方法
- 如何在jsp页面中利用el表达式的<p>${error }</p>取值？
- <jsp:include page=""/>和<%@include file=""%>-----JSP中两种页面引入方式的区别
- ASP.NET母版页使用 按下回车刷新页面 去掉 <form></form>标签
- servlet查询所有消息"List<Message>",并跳转到页面"messageList.jsp"进行显示