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

Jquery Ingrid 表格插件的使用

jQueryCSSJavaScriptJSPCache 
阅读更多

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>
 
分享到：
| 关于从shell给Java传参数的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery.ingrid

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

    15款提高表格操作的jQuery插件

    **Ingrid** - jQuery表格插件 - **功能简介**：支持列调整尺寸、排序、行样式等多种功能。 - **特色亮点**：文档完善，易于使用，适合初学者快速上手。 - **适用场景**：适用于需要灵活调整表格布局和样式的项目。...

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

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

    jQuery 表格工具集

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

    jQuery 表格插件整理

    以下是一些重要的jQuery表格插件及其主要功能： 1. Flexigrid - 这是一个Web 2.0风格的JavaScript表格，它具有可变列宽、自动适应表头宽度的能力，并可以通过Ajax连接XML数据源。它的设计灵感来源于Ext Grid，但...

    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允许用户在图片上选择矩形区域并获取...

Magicbox
Global site tag (gtag.js) - Google Analytics