现在的值是竖排,我想横排,每行显示2条信息,请问怎么弄
<%@page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flexigrid测试</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css"
href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
</head>
<body>
<table id="flex1" style="display: none"></table>
<script type="text/javascript">
$("#flex1").flexigrid
(
{
url: 'http://localhost:8080/Flexigrid/DBServlet',
dataType: 'json',
colModel : [
{display: '职位名称', name : 'job_name', width : 180, sortable : true, align: 'left'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: '职位名称', name : 'jobtitle'},
{display: '地点', name : 'workplace', isdefault: true}
],
usepager: true,
title: '最新职位',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200 ,
procmsg: '正在获取数据,请稍候 ...'
}
);
function test(com,grid)
{
if (com=='Delete')
{
confirm('Delete ' + $('.trSelected',grid).length + ' items?')
}
else if (com=='Add')
{
alert('Add New Item');
}
}
</script>
</body>
java代码
public String getJsonString(List list, Map pageInfo) {
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"));
cellMap.put("cell", new Object[] {((Map)list.get(i)).get("job_name")});
mapList.add(cellMap);
}
pageInfo.put("rows", mapList);
JSONObject object = new JSONObject(pageInfo);
return object.toString();
}
- 大小: 2.5 KB
分享到:
- 2009-08-25 15:57
- 浏览 608
- 评论(1)
- 论坛回复 / 浏览 (1 / 1314)
- 查看更多
相关推荐
最近项目要用jquery开发,于是打算用flexigrid做表格功能,但是遇到了数据不能显示、IE下显示等问题(在FF下显示正常)。于是花了2个小时时间对flexigrid.pack.js进行调试,经过苦闷的两个小时后,皇天不负有心人,...
关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据,以及这样做带来的优势。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于...
"jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案,尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现,能够根据屏幕尺寸自动调整布局,确保在各种设备上都能良好地展示。 首先,...
总结来说,这个实例通过结合jQuery、Ajax、PHP和Mysql,实现了在不刷新页面的情况下,动态加载和分页显示数据库中的数据。这不仅提高了用户体验,也减轻了服务器的负担,是Web开发中常见的数据加载策略。
使用jQuery发送异步请求给Servlet,Servlet仍然使用JSP渲染结果,最后由JSP返回html给客户端页面,客户端页面通过jQuery直接把数据显示在页面上。这样就可以在JSP页面上继续使用类似JSTL的标签库来完成数据的显示。
5. **分页实现**:jQuery负责监听用户对分页控件的交互,根据用户选择的页码发送新的AJAX请求,更新数据显示。 6. **优化用户体验**:可以使用jQuery创建平滑的动画效果,比如在切换页面时淡入淡出数据列表,提升...
"jQuery + ECharts 数据大屏展示DEMO"是解决这一问题的一个实例集合,它结合了jQuery的易用性和ECharts的强大图表库,为用户提供了创建引人入胜的数据大屏的解决方案。下面,我们将深入探讨这两个技术及其在大屏展示...
本教程将专注于使用JavaScript库jQuery来实现数据分页显示,涵盖了内存分页和数据库分页两种主要方式。 **一、jQuery分页基础** jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。在实现...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery结合Ajax技术从后台获取数据,并动态生成下拉选择框(Dropdown List)。 首先...
在本项目中,我们主要探讨的是如何利用jQuery库来实现一个横排显示的图像滑动展示效果,并且这个效果还配备了上下翻页按钮,以便用户能够方便地浏览一系列的图片。这种效果在网页设计中非常常见,特别是在产品展示、...
在这个“Jquery实现数据左右移动Demo”中,我们将深入探讨如何利用jQuery来实现动态的数据展示,特别是在一个可能需要数据左右移动的场景,如轮播图或卡片式布局。 首先,我们需要理解jQuery的基本用法。jQuery通过...
`onSelectPage` 回调函数会在用户切换页面时被触发,你可以在这个函数中更新显示的数据。 通过这种方式,我们可以轻松地实现jQuery分页插件的分页功能,并灵活控制每页显示的内容数量。值得注意的是,这只是一个...
**jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为具有高级功能的数据展示工具,如分页、排序、搜索等。结合Struts、Spring和Ibatis框架,我们可以...
"jQuery自适应横排下拉导航代码"是一个专门用于创建高效、美观且响应式的水平导航栏的解决方案。这个代码库利用了JavaScript库jQuery的强大功能,为用户提供了一种直观的交互方式,特别是对于内容丰富的网站,下拉...
本文将深入探讨“Jquery数据绑定分页源码”这一主题,这通常涉及到在网页应用中实现数据的动态加载和分页显示。 数据绑定是前端开发中的一个重要概念,它允许开发者将UI元素与数据源进行关联,当数据发生变化时,UI...
本教程将详细讲解如何使用jQuery实现一个具备日历显示、日程条数统计、鼠标移入移出效果以及通过AJAX获取后台数据的功能。 首先,我们来理解"日历日程"的概念。日历日程是将日期与特定事件相结合的展示方式,它允许...
jQuery隐藏显示密码插件就是为了解决这个问题而设计的。它允许用户在输入密码时切换显示状态,即从明文到星号或圆点的隐藏模式,增强用户对密码输入的控制感,同时也增加了安全性。 ### jQuery基础 jQuery是一个...
在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。本主题聚焦于"基于jQuery实现数据展示方面基本特效",我们将深入探讨如何利用jQuery来提升网页的数据呈现效果。 ...
本主题聚焦于"jQuery实现将mysql数据库中的数据转化为json数据在前台显示",涉及到的关键技术包括jQuery的$.getJSON()和$.ajax()方法,以及后台的servlet和mysql数据库。 首先,jQuery是一个轻量级的JavaScript库,...