(转)json+flexgrid+jbox组合运用页面刷新<jsp>
插件效果
1.JSP页面
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <%@ include file="/inc/taglibs.jsp"%>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5 <html>
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8 <title>用户管理</title>
9 <link href="${ctx}/css/common.css" rel="stylesheet" type="text/css"></link>
10 <link href="${ctx}/css/layout.css" rel="stylesheet" type="text/css"></link>
11 <link href="${ctx}/css/forms.css" rel="stylesheet" type="text/css"></link>
12 <link rel="stylesheet" href="${ctx}/css/flexigrid.css" type="text/css"></link>
13 <script src="${ctx}/js/jquery-1.8.3.min.js" type="text/javascript" /></script>
14 <script src="${ctx}/js/flexigrid.js" type="text/javascript" /></script>
15 <script src="${ctx}/js/jBox/jquery.jBox-2.3.min.js"
16 type="text/javascript" /></script>
17 <link href="${ctx}/js/jBox/Skins/Blue/jbox.css" rel="stylesheet"
18 type="text/css">
19
20 </head>
21 <body>
22 <!--选项卡 begin -->
23 <div class="option">
24 <ul class="clearfix">
25 <li id="one1" class="hover"><span><img
26 src="${ctx}/icon/icon01.gif" />用户列表</span></li>
27 </ul>
28 </div>
29 <!--角色列表 begin -->
30 <div id="con_one_1" style="padding: 10px;">
31 <form id="sform">
32 <table width="100%" border="0" cellpadding="0" cellspacing="0"
33 class="tab2">
34 <tbody>
35 <tr>
36 <th width="7%">营销活动：</th>
37 <td width="11%"><select name="mySel" size="1"
38 class="selectText"><option value="1" selected>营销活动a</option>
39 <option value="2">营销活动b</option></select></td>
40 <th width="9%">产品名称：</th>
41 <td width="11%"><select name="mySel" size="1"
42 class="selectText"><option value="1" selected>优惠规则a</option>
43 <option value="2">优惠规则b</option></select>
44 </th>
45 <th width="11%">体验产品数：</th>
46 <td width="11%"><select name="mySel" size="1"
47 class="selectText"><option value="1" selected>绑定产品a</option>
48 <option value="2">绑定产品b</option></select>
49 </th>
50 <th width="6%">卡类型：</th>
51 <td width="8%"><select name="mySel" size="1"
52 class="selectText"><option value="1" selected>新增</option>
53 <option value="2">激活</option></select></td>
54 <th width="11%" rowspan="2" style="text-align: left"><input
55 type="submit" value="生成" class="searchStyle" onClick="open2();" /></th>
56 </tr>
57 <tr>
58 <th width="7%">起始时间：</th>
59 <td width="11%"><input id="d421" class="Wdate" type="text"
60 onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'});"
61 value="2010-3-30" /></td>
62 <th width="9%">终止时间：</th>
63 <td width="11%"><input id="d421" class="Wdate" type="text"
64 onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'});"
65 value="2010-6-30" />
66 </th>
67 <th width="9%">卡数量：</th>
68 <td colspan="3"><input name="UserName" size="11"
69 class="inputText" onfocus="this.className='inputClick'" /></td>
70 </tr>
71 </tbody>
72 </table>
73 </form>
74 <table style="display: none" cellpadding="0" id="flexgrid">
75 </table>
76 </div>
77 </body>
78 </html>
2.script页面 2.1flexgrid插件页面
1 <script>
2 $(function() {
3 $("#flexgrid")
4 .flexigrid(
5 {
6 url : "${ctx}/business/findUsers.jsp",
7 dataType : "json",
8 colModel : [
9 {
10 display : "帐号",
11 name : "username",
12 width : 90,
13 sortable : true,//是否可排序的
14 align : "center"
15 },
16 {
17 display : "姓名",
18 name : "realname",
19 width : 90,
20 sortable : true,
21 align : "center"
22 },
23 {
24 display : "积分",
25 name : "score",
26 minwidth : 90,
27 sortable : true,
28 align : "center"
29 },
30 {
31 display : "年龄",
32 name : "age",
33 width : 90,
34 sortable : true,
35 align : "center"
36 },
37 {
38 display : "出生年月",
39 name : "birthday",
40 minwidth : 120,
41 sortable : true,
42 align : "center"
43 },
44 {
45 display : "操作",
46 name : "username",
47 minwidth : 120,
48 sortable : true,
49 align : "center",
50 process : function(val, id) {
51 var un = $(val).html();
52 return val.innerHTML = "<a href='#' onclick='t_open1(\""
53 + un
54 + "\")'>修改</a> <a href='#' onclick='layout(\""
55 + un + "\")'>删除</a>";
56 }
57 } ],
58 sortname : "username",
59 sortorder : "desc",
60 striped : true, //是否显示斑纹效果
61 usepager : true,
62 idProperty : 'id',//绑定主键ID，列格式化时用到。
63 nowrap : true, //是否不换行 若换行则后台接收数据后面多一个\n字符
64 nomsg : '无相关记录', //无结果的提示信息 在右下角显示
65 autoload : true, //自动加载，即第一次发起ajax请求
66 //title : "用户l",
67 pagestat : "显示记录从{from}到{to}，总数 {total} 条",
68 useRp : true,
69 rp : 10,//每页默认显示的数据条数
70 rpOptions : [ 5, 10, 15, 20, 30, 40, 100 ],
71 resizable : false, //table是否可伸缩
72 procmsg : "加载中, 请稍等 ...",
73 showTableToggleBtn : true,
74 buttons : [ {
75 name : "Add",
76 bclass : "add",
77 onpress : t_open
78 } ]
79 });
80
81 function addFormData() {
82 var dt = $('#sform').serializeArray();
83 $("#flexgrid").flexOptions({
84 params : dt
85 });////重置表格的某些参数
86 return true;
87 }
88
89 $('#sform').submit(function() {
90 var dt = $('#sform').serializeArray();
91 $('#flexgrid').flexOptions({
92 params : dt,
93 newp : 1
94 }).flexReload();
95 return false;
96 });
97 });140 </script>
2.2jbox响应函数区
1 <script>
2 function t_open() {
3 //content属性（共有五个值）：html:、id:、get:、post:、iframe:，
4 jBox.open("iframe:${ctx}/view/user/adduser.jsp", "添加用户", 500, 400, {
5 buttons : {},
6 closed : function() {
7 $("#flexgrid").flexReload();
8 }
9 });
10 }
11 function t_open1(username) {
12 //content属性（共有五个值）：html:、id:、get:、post:、iframe:，
13 jBox.open("iframe:${ctx}/view/user/editor.jsp?username=" + username,
14 "修改用户", 500, 400, {
15 buttons : {},
16 closed : function() {
17 $("#flexgrid").flexReload();
18 }
19 });
20 }
21 function layout(username) {
22 var url = "${ctx}/business/doDelete.jsp?username="+username;
23 var submit = function(v, h, f) {
24 if (v == true) {
25 $.post(url,function(data){
26 window.parent.jBox.close();
27 });
28 }
29 };
30
31 jBox.confirm("你确定要删除" + username + "用户么？", "提示", submit, {
32 id : 'hahaha',
33 showScrolling : false,
34 buttons : {
35 '确定' : true,
36 '取消' : false
37 },
38 //刷新函数，实现页面数据刷新
39 closed : function() {
40 $("#flexgrid").flexReload();
41 }
42 });
43 }
44 </script>
3.json格式插入数据
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <%@ page import="java.io.PrintWriter,com.ifly.ms.utils.PageBean,com.ifly.ms.beans.UserBean"%>
3 <jsp:useBean id="ub" class="com.ifly.ms.beans.UserBean"></jsp:useBean>
4
5 <%
6 //获取插件中page变量的值
7 int count=Integer.parseInt(request.getParameter("page"));
8 //获取插件中rp变量的值
9 int count1=Integer.parseInt(request.getParameter("rp"));
10 PageBean<UserBean> pagebean=new PageBean<UserBean>();
11 pagebean.setPage(count);
12 pagebean.setRp(count1);
13 //pagebean获取List对象
14 pagebean=ub.queryRows(pagebean);
15 //设置输出格式
16 response.setContentType("application/json;charset=UTF-8");
17 response.setCharacterEncoding("UTF-8");
18 PrintWriter writer=response.getWriter();
19 //调用toString将对象转化为json
20 String json=pagebean.toString();
21 //将json写到插件里面
22 writer.write(json);
23 //System.out.println(json);
24 writer.flush();
25 %>
4.对象转化为json的toString方法
public String toString(){
return JSONObject.fromBean(this).toString();
}
注意，PageBean类中参数需要与flexgrid插件一致，故需要定义为以下几个变量
1 package com.ifly.ms.utils;
2
3 import java.util.List;
4
5 import net.sf.json.JSONObject;
6
7 /**
8 * @desc: mySchedule_1107
9 * @author: Administrator
10 * @createTime: 2013年11月7日 下午8:20:11
11 * @history:
12 * @version: v1.0
13 * @param <T>
14 */
15 public class PageBean<T> {
16 /**
17 * 总页数
18 */
19 private int rp;
20 /**
21 * @return the rp
22 */
23 public int getRp() {
24 return rp;
25 }
26 /**
27 * @param rp the rp to set
28 */
29 public void setRp(int rp) {
30 this.rp = rp;
31 }
32 /**
33 * 总页数
34 */
35 private int total;
36 /**
37 * 默认当前页
38 */
39 private int page;
40 /**
41 * 数据集合
42 */
43 private List<T> rows;
44 /**
45 * @return the total
46 */
47
48 public int getTotal() {
49 return total;
50 }
51 /**
52 * @param total the total to set
53 */
54 public void setTotal(int total) {
55 this.total = total;
56 }
57 /**
58 * @return the page
59 */
60 public int getPage() {
61 return page;
62 }
63 /**
64 * @param page the page to set
65 */
66 public void setPage(int page) {
67 this.page = page;
68 }
69
70 /**
71 * @return the rows
72 */
73 public List<T> getRows() {
74 return rows;
75 }
76 /**
77 * @param rows the rows to set
78 */
79 public void setRows(List<T> rows) {
80 this.rows = rows;
81 }
82 public String toString(){
83 return JSONObject.fromBean(this).toString();
84 }
85 }
需要json格式转换需要的jar包
(转)json+flexgrid+jbox组合运用页面刷新<jsp>的更多相关文章
- URL不变的情况下，最实用的vue刷新当前页面，provide / inject 组合 方式实现vue页面刷新
原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...
- layer父页面刷新
$.ajax({ type:"POST", url:"{sh::U('Address/edit')}", data: $("#saveform&quo ...
- 页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...
- 页面刷新vuex数据消失问题解决方案 之 vuex中间件
之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用 store.sub ...
- 2、vuex页面刷新数据不保留，解决方法（转）
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...
- Vuex 页面刷新后store保存的数据会丢失 取cookie值
在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...
- vue：vue页面刷新vuex数据消失问题
vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...
- vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- Vuex数据页面刷新丢失问题解决方案
用Vue做项目开发很久了,对于vuex能用.会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还 ...
随机推荐
- MVC3下的layout页面
1.Layout页基础:如果你有使用MasterPage的经验,你将会记得如下的几个东西 A:<%@ Master %> B:<%@ Page %> C:<asp:Con ...
- Android 4.2蓝牙介绍
蓝牙一词源于公元十世纪丹麦国王HaraldBlatand名字中的Blatand.Blatand的英文之意就是Blue tooth.这是因为这位让丹麦人引以为傲的国王酷爱吃蓝莓以至于牙龈都被染成蓝色.由 ...
- 蓝牙BLE LINK LAYER剖析（一） -- status and channel
一.LINK LAYER STATES 二.PHYSICAL CHANNEL
- [Error Code: 1290. The MySQL server is running with the --secure-file-priv option so it cannot execute this statement]错误解决
1.配置文件中将这行注销“secure-file-priv="C:/ProgramData/MySQL/MySQL Server 5.7/Uploads" ”:很多人添加权限依然不 ...
- 文件批量上传的工具，要实现暂停继续、断点续传等功能（使用QtNetwork和QHttpMultiPart，和定时器检查超时）
最近在做一个文件批量上传的工具,要实现暂停继续.断点续传等功能.利用Qt自带的QtNetwork模块,完成这些需求并没有费多少周章,主要思路就是将文件分块,然后用while循环依次传输.具体实现代码比 ...
- php中的编码问题
转自:http://www.jb51.net/article/22501.htm php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("C ...
- Flash的坑之ExternalInterface.call只返回null值的解决办法
flash坑太多了,要确保能有效的使用ExternalInterface.call调用js的话,需要两个条件: 1.allowScriptAccess="always" 2.id= ...
- JS-面向对象-封装
--参考文献: --http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html --js面 ...
- phpMyAdmin的用户名和密码丢了怎么办？
这破密太经典了. 首先进入DOS,开一个cmdc:\>sc stop mysql进到目录里面 cd C:\xampp\mysql\bin 解释一下 C:\xampp\mysql\bin 路径要改 ...
- iOS: 实现苹果的内购
一.介绍: 在个人开发的app上架到AppStore后,苹果官方允许我们将自己的app在appstore上进行付费使用,也就是所谓的内购.其中,支付方式规定的必须是苹果的支付方式:应用内支付. 二.流 ...