这是一个用jquery实现的Grid组件,支持在客户端进行分页。
一、组件使用约定如下:
1、组件用到的数据需要存放到客户端的一个DIV标签内,每一行数据是一个自定义的名为row的标签,代码范例如下:
<div id="__DATASET" style="display:none;">
<row id="18" title="测试主题列表刷新" board="1" creator="GFADMIN1" createDate="2011-07-26 00:00" mainId="" lastedReplier="" lastedReplyDate="" agent="" branch="广公司"/>
<row id="83" title="ffffffffffff" board="1" creator="LSDLRJS1" createDate="2011-07-28 17:29" mainId="" lastedReplier="" lastedReplyDate="" agent="测试公司0" branch="广公司"/>
<row id="80" title="测试新主题" board="1" creator="LSDLRJS1" createDate="2011-07-28 17:02" mainId="" lastedReplier="管理员1" lastedReplyDate="2011-07-28 17:52" agent="测试公司0" branch="广公司"/>
<row id="65" title="111111111111111" board="1" creator="LSDLRJS1" createDate="2011-07-28 15:15" mainId="" lastedReplier="梁用广代理人" lastedReplyDate="2011-07-28 15:16" agent="测试公司0" branch="广公司"/>
<row id="39" title="测试测试测试测试测试测试测试测试测试测试测试测试" board="1" creator="GFADMIN1" createDate="2011-07-27 12:07" mainId="" lastedReplier="管理员1" lastedReplyDate="2011-07-27 14:52" agent="" branch="广公司"/>
</div>
- Grid组件需要显示在一个DIV标签内, 代码范例如下:
<div id="__DATAFORM"></div>
二、组件参数详解
1、Grid组件参数
id:组件ID,必须
datasetId:组件数据存放的DIV的ID值,必须
renderTo:用于显示组件的DIV的ID值,必须
columns:用于描述组件数据列的数组,必须
pageSize:组件每页显示的记录条数,可选,默认为20条
代码范例如下:
var gridConfig = {
id: "grid1",
datasetId: "__DATASET",
renderTo: "__DATAFORM",
columns: columns,
pageSize: 2
};
2、数据列参数
headerText:栏头的标题
headerAlign:栏头的对齐方式
headerCss:栏头的样式
dataField:栏数据对应的字段名
dataAlign:栏数据的对齐方式
dataCss:栏数据的样式
width:栏的宽度
handler:自定义栏数据显示效果的事件方法名
代码范例如下:
//数据控件
var columns = [
{dataField: "title", headerText: "主题", width: "55%", handler: "titleHandler"},
{dataField: "branch", headerText: "分支机构", dataAlign: "center", width: "15%"},
{dataField: "createDate", headerText: "发表时间", dataAlign: "center", width: "15%"},
{dataField: "lastedReplyDate", headerText: "最后回复时间", dataAlign: "center", width: "15%"}
];
//自定义的列渲染事件
function titleHandler(col, row){
var s = "<a href='./marketInfo.do?method=viewForum&forumId=" + eval("row.id") + "' target='_blank'>" + row.title + "</a>";
return s;
}
3、组件类
构造函数:PagingGrid(config);
config:json格式的数据,组件所需要的参数值通过该变量提供。
组件方法:show();
显示组件 代码范例如下:
var grid1 = new PagingGrid(gridConfig);
grid1.show();
分享到:
相关推荐
本篇文章将深入探讨如何基于jQuery实现一个功能丰富的鼠标事件插件,包括左键、中键、右键的单击、双击、拖拽事件,以及滚轮事件。 首先,我们来看标题提及的"基于jquery实现的鼠标左中右键单双击及拖拽和滚轮事件...
2. **丰富的功能**:GT-GIRD提供了多种实用的功能,如排序、过滤、分页、拖放列调整、自定义列宽等,这些功能使得在网页上管理复杂表格变得轻松易行。同时,它还支持数据的编辑,用户可以直接在表格内进行增删改操作...
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
原生JS分页插件的优势在于其灵活性和轻量级,不需要依赖任何外部库如jQuery,这使得它可以在各种环境下良好运行,尤其是对于性能要求较高或者需要控制加载大小的项目。此外,这个插件的代码已经进行了注释,方便...
jQuery Grid 是一个强大的数据展示和管理工具,它基于 jQuery 库,提供了丰富的功能,包括数据的排序、查询、分页等,使得开发者能够快速构建交互式的表格应用。在本篇文章中,我们将深入探讨 jQuery Grid 的核心...
随着技术的发展,新版Grid组件不仅支持远程数据处理,还能实现直观的分页及远程排序等功能。通过本文,我们将详细介绍如何利用这些新功能来优化用户界面和提升用户体验。 #### 新特性介绍 新版Grid组件引入了...
首先,Dojo的加载机制基于模块化系统(AMD,Asynchronous Module Definition),它依赖于`dojo.js`核心库来解析和加载依赖。在给定的代码中,Dojo的加载配置设置为`parseOnLoad: true`,意味着在页面加载完成后,...
新组件Gird包含了许多的类和继承方法。如果读者不是太熟悉的面向对象开发的话,可能会对一个变量如何从某个类得到继承的方法感到困惑,用起GIRD来感到困难。在YAHOO.ext.gird包中,大多数类是设计成为“即插即用plug...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
jQuery Grid,简称jqGrid,是一款基于jQuery的开源数据网格插件,用于展示和管理大量结构化的数据。它提供了丰富的功能,如分页、排序、筛选、编辑、添加、删除以及自定义操作等,使得在Web应用中处理表格数据变得...
在"**Echarts参数属性学习Gird演示案例**"中,我们将重点探讨如何使用ECharts的Gird组件来在同一DOM元素内同时展示多种图表,以实现高效的数据呈现和API接口的优化对接。 **Gird组件**是ECharts中用于定义图表区域...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
在本文中,我们将深入探讨由MFC(Microsoft Foundation Classes)编写的GIRD源码,以及在C++编程环境中如何利用这些源码实现基于对话框和Doc/View结构的应用。MFC是一个C++类库,它提供了对Windows API的封装,使得...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
原文在这里 文章日期:2006-9-2 代码在这里 Q:unknown { content: ” } Q:unknown { content: ” } .ygrid-cell-text { PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px;... BO
ExtJS 2.0是一款基于JavaScript的开源框架,用于构建富客户端Web应用程序。在这个例子中,我们将探讨如何在ExtJS 2.0中实现动态加载的Grid组件,这是一个非常实用的功能,尤其对于处理大量数据时,可以显著提高用户...
【标题】"VC-MS-GIRD.rar" 是一个基于Visual C++(简称VC)开发的电子表格应用程序,它模仿了MS OFFICE中的表格处理软件,如Microsoft Excel的风格。这个项目名为"CellDemo _MS GIRD_gird_表格 excel vc_表格 vc",...
在给出的标签中,"jquer gird"可能是指jQuery Grid。注意正确拼写为"jQuery Grid",以便于搜索和获取相关资源。 综上所述,jQuery Grid是实现动态数据管理的强大工具,其动态增行、编辑和删除功能极大地提升了Web...