插件效果
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包