(转)json+flexgrid+jbox组合运用页面刷新jsp
2024-04-25 13:06:12
插件效果
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 οnfοcus="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 οnfοcus="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" οnfοcus="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='#' οnclick='t_open1(\""53 + un54 + "\")'>修改</a> <a href='#' οnclick='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_open78 } ]79 });80 81 function addFormData() {82 var dt = $('#sform').serializeArray();83 $("#flexgrid").flexOptions({84 params : dt85 });重置表格的某些参数 86 return true;87 }88 89 $('#sform').submit(function() {90 var dt = $('#sform').serializeArray();91 $('#flexgrid').flexOptions({92 params : dt,93 newp : 194 }).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_11079 * @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包
转载于:https://www.cnblogs.com/SummerinShire/p/5182995.html
(转)json+flexgrid+jbox组合运用页面刷新jsp相关推荐
- jsp 页面刷新_如何应用XML+XSLT+AJAX组合技术实现无刷新数据查询
软件项目实训及课程设计指导--如何应用XML +XSLT +AJAX组合技术实现无刷新的数据查询的应用实例 1.在Web应用系统项目中添加一个实现查询的请求页面searchBook.jsp (1)创建 ...
- 最实用的vue刷新当前页面，provide / inject 组合 方式实现vue页面刷新
这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种 方式:provide / inject 组合 方式实现vue页面刷新 1.修改 ...
- 页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. Github地址:https://github.com/xiangwenhu/vbox, 欢迎大家点赞 vuex是vue用于数据存储的,和red ...
- vue 添加完数据后刷新页面_页面刷新vuex数据消失
1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...
- vue：vue页面刷新vuex数据消失问题
vuex中数据刷新页面消失问题: a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失, 可以得解决方法:a页面用的数据a页面的生命周期 ...
- vuex 存储刷新_vuex 存储数据 页面刷新不缓存
html login.vue 这是登录需要储存的 this.$httpPostService("/member/user/doLogin",{username:that.userN ...
- 页面刷新 vuex 数据重新被初始化
1.原因 vuex里用来存储的也只是一个全局变量,当页面刷新,该全局变量自然不存在了. 2.解决 使用localStorage存储一份 (1)storage.js /** * vuex localSt ...
- 工作88：vue实现当前页面刷新
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...
- vue的html自动刷新,Vue页面刷新记住页面状态的实现
环境 vue项目,页面有搜索.筛选项等. 需求 页面跳转,切换或者刷新,希望可以记住用户在页面的筛选状态 方案v1 vue有提供一种缓存组件的解决方案 - keep-alive. 缓存不活动的组件实例 ...
最新文章
- 数据结构--KMP算法总结
- 给妹子讲python-S01E23初识异常处理
- mysql表中的多对多关系表_「一对多」关系型数据库中一对多，多对一，多对多关系（详细） - seo实验室...
- 程序员公司选择：创业公司、中等规模公司、大公司
- 06-广度优先搜索:图、队列
- 【省时查报告】2021四大行业品牌蓝V社媒内容运营观察报告：美妆护肤、食品饮料、汽车、家电.pdf（附下载链接）...
- 亿能bms上位机_BMS上位机 - 源码下载|Windows编程|通讯编程|源代码 - 源码中国
- spring实战笔记6---springMVC的请求过程
- python训练手势分类器_从Scikit Learn中保存的训练分类器进行预测
- java 中文车牌识别_EasyPR-Java开源中文车牌识别系统工程部署
- android 加速度过滤,如何校准Android加速度计并降低噪音，消除重力
- idea 一次启动多服务配置
- 多益网络2018春季校园招聘研发岗笔试经验
- Android开发 无线Wifi+WifiUtil工具类，android开发网格布局
- HTML 樱花飘落界面效果
- 对接百度api之银行卡识别
- Gitee上传代码教程
- 【CG物理模拟】风筝模拟
- 电子信息工程考研专业c语言,2018电子信息工程考研方向有哪些
- 微信购物直播商城渠道定制开发