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, // 调用自定义的计算函数，基本没用
<%@ page language="java" contentType="text/htmlcharset=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/htmlcharset=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=0i<$('.trSelected',grid).lengthi++){
ids+=","+$('.trSelected',grid).find("td:first").eq(i).text()//获取id
}
idsids=ids.substring(1)
$.ajax({
type: "POST",
url: "flexGridServlet.do?actionaction="+${"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?actionaction="+${"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代码：
Java代码
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 {
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）