jquery插件FlexiGrid的使用（已更新）
卫博雅
已不推荐下载，如要下载去这个连接下载最新的
http://gundumw100.iteye.com/blog/545610
更新于2009-11-30
先看一下FlexiGrid的参数
先下载FlexiGrid api
[url]http://www.flexigrid.info/ [/url]
怎么导入就不说了，只要注意路径就没问题
新建index.jsp文件：
servlet代码：
web.xml配置：
主要步骤就上面那些，其他还有个数据库操作类&JSON操作类，
例外数据库文件我也生成好了，怎么使用我不用说了吧。
我把工程全部放上来，该工程绝对可以跑。
http://gundumw100.iteye.com/blog/545610
更新于2009-11-30
先看一下FlexiGrid的参数
height: 200, //flexigrid插件的高度，单位为px
width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false,//没用过这个属性
minwidth: 30, //列的最小宽度
minheight: 80, //列的最小高度
resizable: false, //resizable table是否可伸缩
url: false, //ajax url,ajax方式对应的url地址
method: 'POST', // data sending method,数据发送方式
dataType: 'json', // type of data loaded,数据加载的类型，xml,json
errormsg: '发生错误', //错误提升信息
usepager: false, //是否分页
nowrap: true, //是否不换行
page: 1, //current page,默认当前页
total: 1, //total pages,总页面数
useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数
rp: 25, // results per page,每页默认的结果数
rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数
title: false, //是否包含标题
pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式
procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息
query: '', //搜索查询的条件
qtype: '', //搜索查询的类别
qop: "Eq", //搜索的操作符
nomsg: '没有符合条件的记录存在', //无结果的提示信息
minColToggle: 1, //允许显示的最小列数
showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。
hideOnSubmit: true, //是否在回调时显示遮盖
showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮
autoload: true, //自动加载，即第一次发起ajax请求
blockOpacity: 0.5, //透明度设置
onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用
onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序
onSuccess: false, //成功后执行
onSubmit: false, // 调用自定义的计算函数，基本没用
先下载FlexiGrid api
[url]http://www.flexigrid.info/ [/url]
怎么导入就不说了，只要注意路径就没问题
新建index.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>FlexiGrid</title>
<link rel="stylesheet" href="css/flexigrid/flexigrid.css" type="text/css"></link>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maiheight = document.documentElement.clientHeight;
var w = $("#ptable").width() - 3;
var gapTop = 30;
var otherpm = 150; //GridHead，toolbar，footer,gridmargin
var h = maiheight - gapTop - otherpm;
var grid=$("#flex1").flexigrid({
width: w,
height: h,
url: 'flexGridServlet.do',
dataType: 'json',
colModel : [
//{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false},
{display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false},
{display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'},
{display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'},
{display: '工资', name : 'salary', width : 60, sortable : true, align: 'right',process:formatMoney},
{display: '日期', name : 'date', width : 120, sortable : true, align: 'center'},
{display: '语言', name : 'language', width : 80, sortable : true, align: 'center'}
],
buttons : [
{name: '添加', bclass: 'add', onpress : toolbar},
{name: '删除', bclass: 'delete', onpress : toolbar},
{name: '修改', bclass: 'modify', onpress : toolbar},
{separator: true}
],
searchitems : [
{display: '编号', name : 'id', isdefault: true},
{display: '工作名称', name : 'job_name'},
{display: '工作地址', name : 'work_address'},
{display: '语言', name : 'language'}
],
errormsg: '发生异常',
sortname: "id",
sortorder: "desc",
usepager: true,
title: '信息发布管理',
pagestat: '显示记录从{from}到{to}，总数 {total} 条',
useRp: true,
rp: 10,
rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数
nomsg: '没有符合条件的记录存在',
minColToggle: 1, //允许显示的最小列数
showTableToggleBtn: true,
autoload: true, //自动加载，即第一次发起ajax请求
resizable: false, //table是否可伸缩
procmsg: '加载中, 请稍等 ...',
hideOnSubmit: true, //是否在回调时显示遮盖
blockOpacity: 0.5,//透明度设置
rowbinddata: true,
showcheckbox: true
//gridClass: "bbit-grid"//样式
});
//$('.trSelected',grid).parent().removeClass("trSelected");
function toolbar(com,grid){
if (com=='删除'){
${"action"}.value="delete";
if($('.trSelected',grid).length==0){
alert("请选择要删除的数据");
}else{
if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')){
var ids ="";
for(var i=0;i<$('.trSelected',grid).length;i++){
ids+=","+$('.trSelected',grid).find("td:first").eq(i).text();//获取id
}
ids=ids.substring(1);
$.ajax({
type: "POST",
url: "flexGridServlet.do?action="+${"action"}.value,
data: "id="+ids,
dataType:"text",
success: function(msg){
if(msg=="success"){
$("#flex1").flexReload();
}else{
alert("有错误发生,msg="+msg);
}
},
error: function(msg){
alert(msg);
}
});
}
}
}else if (com=='添加'){
${"action"}.value="add";
alert("flexGridServlet.do?action="+${"action"}.value);
window.location.href="flexGridServlet.do?action="+${"action"}.value;
}else if (com=='修改'){
${"action"}.value="modify";
if($(".trSelected").length==1){
alert("flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text());
window.location.href="flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();
}else if($(".trSelected").length>1){
alert("请选择一个修改,不能同时修改多个");
}else if($(".trSelected").length==0){
alert("请选择一个您要修改的记录")
}
//$("#flex1").flexReload({});
}
}
function formatMoney(value, pid) {
return "￥" + parseFloat(value).toFixed(2);
}
});
</script>
<style>
.flexigrid div.fbutton .add
{
background: url(css/images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete
{
background: url(css/images/close.png) no-repeat center left;
}
.flexigrid div.fbutton .modify
{
background: url(css/images/modify.png) no-repeat center left;
}
</style>
</head>
<body>
<div id="ptable" style="margin:10px">
<table id="flex1" style="display:none"></table>
</div>
<input id="action" type="hidden" name="action" value="null" />
<script>
</script>
</body>
</html>
servlet代码：
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class FlexiGridServlet extends HttpServlet {
private DBConnection db;
public void init() throws ServletException {
System.out.println("--------------开始链接---------------------");
db = new DBConnection();// 打开链接
try {
db.getCurrentConnection();
} catch (SQLException e1) {
}
System.out.println("--------------打开链接成功---------------------");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// response相关处理
response.setContentType("html/txt");
response.setCharacterEncoding("utf-8");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setHeader("Pragma", "no-cache");
String action = request.getParameter("action");
System.out.println("action=" + action);
String tableName = "job_info1";
if ("add".equals(action)) {
System.out.println("--------------------add--------------------");
return;
} else if ("delete".equals(action)) {
System.out.println("--------------------delete------------------");
String ids=request.getParameter("id");
System.out.println("ids="+ids);
// String[] id=ids.split(",");
String sql = "delete from "+tableName+" where id in ("+ids+")";
System.out.println("sql="+sql);
try {
db.executeUpdate(sql, null);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println("delete success!!!");
response.getWriter().write("success");
response.getWriter().flush();
response.getWriter().close();
return;
} else if ("modify".equals(action)) {
System.out.println("--------------------modify-------------------");
return;
} else {
}
System.out.println("--------------------下来了-------------------");
// 获得当前页数
String pageIndex = request.getParameter("page");
System.out.println("pageIndex=" + pageIndex);
// 获得每页数据最大量
String pageSize = request.getParameter("rp");
System.out.println("pageSize=" + pageSize);
// 获得模糊查询文本输入框的值
String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8");
System.out.println("query=" + query);
// 获得模糊查询条件
String qtype = request.getParameter("qtype");
System.out.println("qtype=" + qtype);
// 排序的字段
String sortname = request.getParameter("sortname");
System.out.println("sortname=" + sortname);
// desc or asc
String sortorder = request.getParameter("sortorder");
System.out.println("sortorder=" + sortorder);
int count = 0;
String sql = "";
List list = null;
try {
sql = "select count(*) from " + tableName;
if (!query.equals("")) {
sql += " where " + qtype + "='" + query + "'";
}
System.out.println("sql=" + sql);
count = db.executeQuery(sql);
System.out.println("count=" + count);
sql = "select * from " + tableName;
if (!query.equals("")) {
sql += " where " + qtype + "='" + query + "'";
}
sql += " order by " + sortname + " " + sortorder;
sql += " limit "
+ ((Integer.parseInt(pageIndex) - 1) * Integer
.parseInt(pageSize)) + "," + pageSize;
System.out.println("sql=" + sql);
list = db.executeQueryList(sql);
System.out.println("list.size=" + list.size());
if (list == null) {
System.out.println("======出错啦======");
return;
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Map map = new HashMap();
map.put("page", pageIndex);
map.put("total", count + "");
// 数据JSON格式化
String json = toJSON(list, map);
response.getWriter().write(json);
response.getWriter().flush();
response.getWriter().close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
public void destroy() {
System.out.println("--------------关闭链接---------------------");
db.closeCurrentConnection();
}
/**
* 数据JSON格式化
*
* @param list
* @param pageInfo
* @return
*/
private String toJSON(List list, Map map) {
List mapList = new ArrayList();
for (int i = 0; i < list.size(); i++) {
Map cellMap = new HashMap();
cellMap.put("id", ((Map) list.get(i)).get("id").toString());
cellMap.put("cell", new Object[] {
//"<input type='checkbox'/>",
((Map) list.get(i)).get("id"),
((Map) list.get(i)).get("job_name"),
((Map) list.get(i)).get("work_address"),
((Map) list.get(i)).get("salary"),
((Map) list.get(i)).get("date"),
((Map) list.get(i)).get("language") });
mapList.add(cellMap);
}
map.put("rows", mapList);
JSONObject object = new JSONObject(map);
return object.toString();
}
}
web.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>flexGridServlet</servlet-name>
<servlet-class>FlexiGridServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>flexGridServlet</servlet-name>
<url-pattern>/flexGridServlet.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
主要步骤就上面那些，其他还有个数据库操作类&JSON操作类，
例外数据库文件我也生成好了，怎么使用我不用说了吧。
我把工程全部放上来，该工程绝对可以跑。
类似资料：