`
zhurx163
  • 浏览: 608 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

现在JQUERY遇到个问题,就能不能横排显示数据

阅读更多


现在的值是竖排,我想横排,每行显示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
分享到:
评论
1 楼 zhurx163 2009-08-25  
请大家看一下怎么解决,给个办法

相关推荐

    解决JQuery flexigrid在IE下显示问题,以及数据显示问题

    最近项目要用jquery开发,于是打算用flexigrid做表格功能,但是遇到了数据不能显示、IE下显示等问题(在FF下显示正常)。于是花了2个小时时间对flexigrid.pack.js进行调试,经过苦闷的两个小时后,皇天不负有心人,...

    jQuery读取json数据

    关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据,以及这样做带来的优势。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于...

    jQuery自适应横排下拉菜单导航代码

    "jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案,尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现,能够根据屏幕尺寸自动调整布局,确保在各种设备上都能良好地展示。 首先,...

    jQuery+Ajax+PHP+Mysql实现分页显示数据

    总结来说,这个实例通过结合jQuery、Ajax、PHP和Mysql,实现了在不刷新页面的情况下,动态加载和分页显示数据库中的数据。这不仅提高了用户体验,也减轻了服务器的负担,是Web开发中常见的数据加载策略。

    jquery直接显示jsp返回的数据

    使用jQuery发送异步请求给Servlet,Servlet仍然使用JSP渲染结果,最后由JSP返回html给客户端页面,客户端页面通过jQuery直接把数据显示在页面上。这样就可以在JSP页面上继续使用类似JSTL的标签库来完成数据的显示。

    asp.net+jquery显示数据+分页

    5. **分页实现**:jQuery负责监听用户对分页控件的交互,根据用户选择的页码发送新的AJAX请求,更新数据显示。 6. **优化用户体验**:可以使用jQuery创建平滑的动画效果,比如在切换页面时淡入淡出数据列表,提升...

    jquery+echarts数据大屏展示DEMO(十几个).zip

    "jQuery + ECharts 数据大屏展示DEMO"是解决这一问题的一个实例集合,它结合了jQuery的易用性和ECharts的强大图表库,为用户提供了创建引人入胜的数据大屏的解决方案。下面,我们将深入探讨这两个技术及其在大屏展示...

    jquery实现数据分页显示

    本教程将专注于使用JavaScript库jQuery来实现数据分页显示,涵盖了内存分页和数据库分页两种主要方式。 **一、jQuery分页基础** jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。在实现...

    jquery获取后台数据生成下拉框

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery结合Ajax技术从后台获取数据,并动态生成下拉选择框(Dropdown List)。 首先...

    jQuery横排显示带有上下翻页按钮的图像滑动展示效果.zip

    在本项目中,我们主要探讨的是如何利用jQuery库来实现一个横排显示的图像滑动展示效果,并且这个效果还配备了上下翻页按钮,以便用户能够方便地浏览一系列的图片。这种效果在网页设计中非常常见,特别是在产品展示、...

    Jquery实现数据左右移动Demo

    在这个“Jquery实现数据左右移动Demo”中,我们将深入探讨如何利用jQuery来实现动态的数据展示,特别是在一个可能需要数据左右移动的场景,如轮播图或卡片式布局。 首先,我们需要理解jQuery的基本用法。jQuery通过...

    jQuery分页插件设置分页内容显示数量的分页代码

    `onSelectPage` 回调函数会在用户切换页面时被触发,你可以在这个函数中更新显示的数据。 通过这种方式,我们可以轻松地实现jQuery分页插件的分页功能,并灵活控制每页显示的内容数量。值得注意的是,这只是一个...

    Jquery dataTable后台获取数据示例

    **jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为具有高级功能的数据展示工具,如分页、排序、搜索等。结合Struts、Spring和Ibatis框架,我们可以...

    jQuery自适应横排下拉导航代码.zip

    "jQuery自适应横排下拉导航代码"是一个专门用于创建高效、美观且响应式的水平导航栏的解决方案。这个代码库利用了JavaScript库jQuery的强大功能,为用户提供了一种直观的交互方式,特别是对于内容丰富的网站,下拉...

    Jquery数据绑定分页源码

    本文将深入探讨“Jquery数据绑定分页源码”这一主题,这通常涉及到在网页应用中实现数据的动态加载和分页显示。 数据绑定是前端开发中的一个重要概念,它允许开发者将UI元素与数据源进行关联,当数据发生变化时,UI...

    jquery实现的日历日程,日历显示日程条数,鼠标移入移出显示日程,ajax获取数据

    本教程将详细讲解如何使用jQuery实现一个具备日历显示、日程条数统计、鼠标移入移出效果以及通过AJAX获取后台数据的功能。 首先,我们来理解"日历日程"的概念。日历日程是将日期与特定事件相结合的展示方式,它允许...

    jQuery隐藏显示密码插件

    jQuery隐藏显示密码插件就是为了解决这个问题而设计的。它允许用户在输入密码时切换显示状态,即从明文到星号或圆点的隐藏模式,增强用户对密码输入的控制感,同时也增加了安全性。 ### jQuery基础 jQuery是一个...

    基于JQuery实现数据展示方面基本特效

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。本主题聚焦于"基于jQuery实现数据展示方面基本特效",我们将深入探讨如何利用jQuery来提升网页的数据呈现效果。 ...

    jQuery实现将mysql数据库中的数据转化为json数据在前台显示

    本主题聚焦于"jQuery实现将mysql数据库中的数据转化为json数据在前台显示",涉及到的关键技术包括jQuery的$.getJSON()和$.ajax()方法,以及后台的servlet和mysql数据库。 首先,jQuery是一个轻量级的JavaScript库,...

Global site tag (gtag.js) - Google Analytics