`
chenhua_1984
  • 浏览: 1252320 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

Jquery Ingrid 表格插件的使用

阅读更多

demo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <!--base href="<%=basePath%>"-->

    <link rel="stylesheet" type="text/css" href="css/ingrid.css">

   

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script type="text/javascript" src="js/jquery.ingrid.js"></script>

<script type="text/javascript">

$(document).ready(

         function() {

                   $("#table1").ingrid({

                            url: 'remote.jsp',

                            type:'POST',

                            height: 200,

                            minColWidth: 30,

                            initialLoad: false,

                            rowClasses: ['grid-row-style1','grid-row-style1','grid-row-style2','grid-row-style1','grid-row-style1','grid-row-style3'],

                            sorting: false,

                            resizableCols: false,

                            paging: true,

                            recordsPerPage: 5,

                            totalRecords: 60,

                            extraParams: {test : 'Hello,tang',name:'test'}                          

                   });

         }

);

</script>

        

</head>

<body>

<table id="table1">

<thead>

    <tr>

      <th>日期</th>

      <th>地址</th>

      <th>姓名</th>

      <th>Artist</th>

    </tr>

</thead>

<tbody>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

<tr><td>static col 1</td><td>static col 2</td><td>static col 3</td><td>static col 4</td></tr>

</tbody>

</table>

</body>

</html>

 remote.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <base href="<%=basePath%>">

   

    <title>My JSP 'remote.jsp' starting page</title>

   

         <meta http-equiv="pragma" content="no-cache">

         <meta http-equiv="cache-control" content="no-cache">

         <meta http-equiv="expires" content="0">   

         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

         <meta http-equiv="description" content="This is my page">

         <!--

         <link rel="stylesheet" type="text/css" href="styles.css">

         -->

</head>

<body>

         <%

         //测试传递两个参数 (前面extraParams中列出的,值中文乱码)

         String str=request.getParameter("test");

         String name=request.getParameter("name");

         //控件本身的参数,用来获取当前页码 (通过页面再调用数据库相关的内容)

         String pagenumber=request.getParameter("page");

         System.out.println(str+"\t"+name+"\t"+pagenumber+"\t");

         %>

<table>

   <tbody>

         <%

         for(int i=0;i<5;i++){

         %>

                   <tr>

                            <td><%=pagenumber+(i+1)%></td>

                            <td>static col 2</td>

                            <td>static col 3</td>

                            <td>static col 4</td>

                   </tr>        

         <%

         }

         %>

    </tbody>

   </table>

</body>

</html>
 
分享到:
评论

相关推荐

    jquery ingrid示例代码(asp.net)

    在Web开发中,jQuery Ingrid 是一个非常实用的库,它允许开发者创建动态、交互式的表格,而无需编写大量的JavaScript代码。结合ASP.NET,我们可以构建出功能强大的数据展示和管理界面。在这个示例中,我们将深入探讨...

    ingrid表格插件

    Ingrid表格插件是一款强大的数据展示工具,专为前端开发者设计,用于构建具有高度交互性和定制性的表格。这款插件以其灵活的列宽调整、高效的分页功能以及丰富的行和列样式设定,深受用户喜爱。在本文中,我们将深入...

    JQuery.ingrid

    jQuery.inGrid是一款基于jQuery库的表格插件,它为网页开发者提供了一种简单、高效的方式来展示和操作表格数据。这款插件旨在简化复杂的表格布局,增强数据可视化,并提供了多种自定义选项,使得在网页上创建交互式...

    JQUERY INGRID

    该代码js文件讲解了jquery并排显示的问题,专门针对列标题的对应展示

    再次分享18个非常棒的jQuery表格插件

    对于数据展示,特别是大型或复杂的数据集,使用jQuery表格插件可以提高用户体验,提供排序、过滤、分页等功能。以下是根据标题和描述中提到的一些jQuery表格插件的详细说明: 1. DataTables:DataTables是一个功能...

    jquery.ingrid.js

    jquery plugin ingrid.js

    jQuery 表格工具集

    jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin –...

    jQuery 表格插件整理

    3. Ingrid - 这是一个jQuery Datagrid插件,增加了HTML表格的列宽调整、分页、排序和行列样式等功能,使得HTML表格具备了更多高级功能。 4. JQTreeTable - 该插件允许在表格中嵌入树形结构,这对于展示层次化数据...

    Jquery datagrid Ingrid 的jsp 实例

    网上搜了很久没发现 Jquery datagrid Ingrid 的jsp 实例 而是很多php的实例,发邮件给了写 plugin的作者, 研究很长时间解决几个问题才有的实例。可以参考我空间 http://hi.baidu.com/tangxiucai2

    jquery插件示例(autocomplete+ingrid+dataTables)(asp.net)

    这个是我在学习jquery过程中积累下来的一点东西.有些示例在我前面上传的资源中已经有了.里面都是一些入门性的示例.数据库采用的SQLServer2000的northwind数据库.数据访问用了Enterprise library DAAB;虽然只是简单的...

    jq-ingrid-0.9.3.zip

    jq-ingrid-0.9.3.zip 是一个包含jQuery插件的压缩包,主要用于数据网格展示和管理。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务。jq-ingrid是基于jQuery的一...

    JS 工具 资源

    11. **Ingrid**:Ingrid是一个jQuery插件,用于增强表格的行为,包括排序、分页、调整大小等功能,使得数据管理更加直观。 12. **jQuery Checkbox 图片画矩形**:ImgAreaSelect允许用户在图片上选择矩形区域并获取...

    Ingrid Darling

    《Ingrid Darling:一款独特的字体设计解析》 字体设计,作为视觉传达的重要组成部分,对于信息的呈现具有举足轻重的作用。"Ingrid Darling",这个名称或许在字体世界里并不常见,但它却代表着一种独特而富有个性的...

    ingrid:很小的静态站点生成器,态度非常大

    这使得Ingrid具有广泛的社区支持,开发者可以找到大量的教程、插件和资源来扩展其功能。 在压缩包文件“ingrid-main”中,很可能包含了Ingrid的源代码、示例项目、文档和其他必要的文件。用户可以通过解压这个文件...

    ingrid:流畅CSS布局系统

    在查看正在使用的Ingrid。 或在的普通演示页面 先前的Ingrid 1.0将保留在其ingrid_1.0分支中。 介绍 因此,基本思想... +-------------------[c]-------------------+ | +-------+ +-------+ +-------+ +-------+ ...

    ingridblix:艺术家Ingrid Blix的作品集网站

    在JavaScript的使用上,Ingrid Blix可能会运用到一些常见的库和框架,如jQuery用于简化DOM操作,或者Three.js这样的3D库来创建立体的艺术效果。此外,她可能还会使用ES6的语法特性,如箭头函数和模板字符串,提升...

    ingrid-profile.github.io

    ingrid-profile.github.io

Global site tag (gtag.js) - Google Analytics