`

最简单的FlexiGrid使用(静态的)

阅读更多

<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
         $('.flexme1').flexigrid({
	    //height:'auto',
	    //striped:false
        });
    });
</script>

<table class="flexme1">
	<thead>
    		<tr>
            	<th width="100">Col 1</th>
            	<th width="100">Col 2</th>
            	<th width="100">Col 3 is a long header name</th>
            	<th width="300">Col 4</th>
            </tr>
    </thead>
    <tbody>
    		<tr>
            	<td>This is data 1 with overflowing content</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>This is data 4</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>This is data 4</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>This is data 4</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>This is data 4</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>This is data 4</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>This is data 4</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>This is data 4</td>
            </tr>
    </tbody>
</table>
分享到:
评论

相关推荐

    FlexiGrid配置与使用

    在项目中使用FlexiGrid,你需要在Web项目中创建一个新目录,例如`WebRoot/`,并将`flexigrid`文件夹中的所有内容复制到这里。接着,在JSP页面中,你需要设置一个HTML表格作为FlexiGrid的容器,例如`...

    flexigrid使用实例

    使用JavaScript来初始化Flexigrid,设置其配置项,例如分页、列定义等。例如: ```javascript $("#flex1").flexigrid({ url: 'server.php', // 数据来源 colModel: [ // 列定义 {display: 'ID', name: 'id', ...

    FlexiGrid插件使用例子

    在Java环境中,FlexiGrid通常与Servlets结合使用,以服务器端的数据作为数据源,通过JSON格式进行数据传输。 首先,让我们深入了解一下FlexiGrid的核心特性: 1. **数据绑定**:FlexiGrid可以绑定到不同的数据源,...

    jQuery插件flexigrid使用总结--进一步优化

    《jQuery插件flexigrid使用总结与进一步优化》 在Web开发中,数据展示和交互是不可或缺的一部分。jQuery插件flexigrid是一款轻量级、功能强大的表格插件,能够帮助开发者快速构建具有分页、排序、搜索等功能的动态...

    Flexigrid使用实例

    本篇文章将深入探讨Flexigrid的使用方法,通过实例帮助读者更好地理解和应用。 1. **安装与引入** 在开始使用Flexigrid之前,需要将其库文件下载到项目中。在`Flexigrid`压缩包内,通常会包含`flexigrid.js`(核心...

    FlexiGrid使用教程

    综上所述,FlexiGrid 不仅是一个简单的数据表格插件,更是开发者手中灵活多变的工具,能够满足不同场景下的数据展示需求。通过深入理解和灵活运用 FlexiGrid 的各项功能,可以帮助开发者构建出更加美观、实用的用户...

    FlexiGrid使用手册

    这个使用手册将详细介绍如何使用FlexiGrid以及其主要属性。 一、FlexiGrid概述 FlexiGrid是一个轻量级的JavaScript插件,类似于Ext Grid,它允许用户通过Ajax动态加载数据,并可从HTML表格直接转化。FlexiGrid支持...

    Jquery flexigrid使用

    ### Jquery Flexigrid 使用详解 #### 技术栈概览 本文档旨在介绍如何结合Struts2.1.6、Spring、Hibernate、jQuery、Flexigrid、Thickbox及MySQL来实现一个功能完整的Web应用。该应用的核心是通过Flexigrid在前端...

    FlexiGrid 插件简单应用

    在本教程中,我们将深入探讨FlexiGrid的简单应用,以及如何将其从英文版本转换为简体中文。 首先,让我们了解FlexiGrid的基本结构。一个基本的FlexiGrid配置通常包括HTML结构、CSS样式和JavaScript代码。HTML部分...

    flexigrid.js flexigrid.js flexigrid.js

    2. **数据源**:Flexigrid.js可以与各种数据源配合使用,包括JSON、XML、CSV等,只需提供正确的数据格式和URL,就能动态加载和展示数据。 3. **功能丰富**:它内置了多项功能,如排序(asc/desc)、分页、搜索、...

    flexigrid相关

    `jquery+flexigrid使用方法.doc`文档很可能是介绍如何将jQuery与Flexigrid结合使用的指南。在实际应用中,首先需要引入jQuery库和Flexigrid的JS及CSS文件,然后通过jQuery选择器找到需要转换为数据网格的HTML元素,...

    flexiGrid列表ajax操作

    此外,使用缓存策略能减少不必要的请求,提高响应速度。 通过上述内容,我们可以理解FlexiGrid列表如何利用AJAX进行动态数据操作,以及如何结合服务器端接口实现高效的数据交互。对于Web开发者来说,掌握这些技能能...

    flexigrid的json格式使用说明

    对于flexigrid的使用,各个参数的意义应该不用解释,网上资料很多。插件接收的数据格式对于刚接触的人来说是个麻烦,这是一位兄台的整理,不尽完美但会告诉你如何封装格式。

    Flexigrid与struts2的整合使用说明

    一个简单的例子可能是从数据库查询用户列表并显示在Flexigrid中。首先,创建一个Struts2 Action,获取用户数据并转化为JSON格式: ```java public class UserAction extends ActionSupport { private List&lt;User&gt; ...

    JQuery_插件FlexiGrid_之完全配置与使用

    ### JQuery插件FlexiGrid之完全配置与使用 #### 一、引言 FlexiGrid是一款基于jQuery的轻量级表格插件,它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能,如排序、分页、筛选等,非常...

    flexigrid使用教程

    flexigrid使用介绍

    jquery插件之flexigrid篇

    jQuery简化了DOM操作、事件处理和动画效果,使得flexigrid的使用更加简单便捷。通过jQuery,开发者可以快速实现诸如行选择、分页、排序和搜索等功能。 在flexigrid中,一些关键功能包括: 1. **数据分页**:...

    jquery+flexigrid使用方法.pdf

    jQuery与Flexigrid的结合使用在Web开发中常用于创建动态、交互性强的数据表格。Flexigrid是一款基于jQuery的插件,它提供了一种轻量级的方式来展示和操作网格数据,具有分页、排序、搜索等功能,特别适用于数据密集...

    jquery插件之flexigrid学习实例-jar包

    对于开发者来说,Flexigrid的配置简单,只需要通过设置一些基本属性和方法,就可以实现复杂的数据展示。 然后,Struts2是一个强大的MVC框架,广泛用于Java Web开发。它提供了一套完整的请求处理机制和丰富的插件...

    Flexigrid demo

    Flexigrid demo

Global site tag (gtag.js) - Google Analytics