jquery的flexigrid如何实现静态数据的排序？ 15
我需要做一个静态页面无后台，所以只写了一个json文件提供表格的数据，但是排序的时候点击title无反应，sortable我也设置成true了！我查了一些资料说flexi...
我需要做一个静态页面 无后台，所以只写了一个json文件提供表格的数据，但是排序的时候点击title无反应，sortable我也设置成true了！我查了一些资料说flexigrid的排序是要交到后台server处理的，我现在只有前台，数据也是假的。如何实现客户端排序？也就是onchangesort=true后的处理？？？麻烦各位大大了！！
展开
2个回答
展开全部
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, // 调用自定义的计算函数，基本没用
<%@ 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
}
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 {
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/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
}
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 {
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
前台没法做的，Flexigrid本就是把需排序的字段传送到后台，在数据库中获取数据的时候，使用了order by语句进行排序的，结果传回页面显示的，每次点击排序都是与数据库数据的一次交互，并不是在 前端进行的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
