这是一个用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>
2、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();
- 大小: 21.5 KB
分享到:
相关推荐
在本项目“测试Grid组件的程序”中,我们聚焦于一个基于JQuery的Grid实现,它展示了这个组件的强大功能。 JQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画效果以及Ajax交互。将Grid组件与JQuery...
3. **客户端分页**:对于小数据集,可以选择在客户端进行分页,即一次性获取所有数据并在前端进行处理。然而,这不适合大数据集,因为它可能导致页面加载速度变慢。 ### 四、自定义分页行为 jQuery DataGrid允许...
常见的Grid组件有jQuery UI的Grid、AngularJS的UI Grid、React的Ant Design Table等。它们提供了分页、排序、过滤和编辑等功能,便于用户交互。 提取Grid中的数据,我们可以采用以下几种方法: 1. **API调用**:...
**极品 jQuery Grid——jqGrid 3.8 与 mleibman-SlickGrid 深度解析** 在Web开发中,数据展示和管理是至关重要的环节。jQuery Grid(jqGrid)和mleibman-SlickGrid是两个强大的JavaScript库,它们提供了一种高效且...
9. **性能优化**:jqGrid支持服务器分页和客户端分页,以及延迟加载,对于大数据量的场景,这些特性能够显著提升性能。 总之,jqGrid 3.5.3作为一个成熟的表格插件,提供了全方位的数据网格解决方案,无论是在数据...
这个插件允许开发者在不进行后端查询的情况下,仅在客户端对表格数据进行分页显示,减少了服务器的压力。 使用`paginathing.js`的步骤大致如下: 1. **引入依赖**:首先确保你的页面已经包含了jQuery库。你可以...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了大量的预定义的组件,帮助开发者快速构建具有专业外观和功能的Web应用。版本1.2.4是该框架的一个稳定版本,其核心在于简化前端开发,提供丰富的用户界面元素,...
jsGrid是一种基于HTML5的客户端数据网格解决方案,适用于创建动态、交互式的表格,支持数据的插入、编辑、删除和排序功能。它具有高度定制性,可以方便地适应各种数据源,如JSON、AJAX、本地数据等。jsGrid的设计...
jsGrid轻量级网格jQuery插件 项目站点 jsGrid是基于jQuery的轻量级客户端数据网格控件。 它支持基本的网格操作,如插入,过滤,编辑,删除,分页,排序和验证。 jsGrid是可调的,并允许自定义外观和组件。目录演示版...
- **动态表格和分页**:Struts2 jQuery插件包含了一些实用组件,如`sj:grid`用于创建动态表格,`sj:pager`实现分页,使得数据展示更加灵活。 **3. 示例应用** 在这个名为`StrutsJqueryDemo`的项目中,开发者创建了...
jQuery.jqGrid 是一个基于 jQuery 的开源JavaScript库,专为创建交互式、功能丰富的数据网格而设计。在版本4.4.0中,jqGrid 提供了丰富的特性和优化,使得在网页上展示和操作大量数据变得更加便捷。这个压缩包...
2. **分页组件**:前端分页通常需要一个分页组件,它可以是自定义的JavaScript代码,也可以使用现成的库,如Bootstrap的Pagination、jQuery UI的Pager等。这些组件提供了页码显示、页数跳转、每页显示条数选择等功能...
`jQuery MVC Grid 453` 是基于 jQuery 和 ASP.NET MVC 框架的一个组件,它主要用于在 Web 应用程序中展示数据,提供了丰富的功能和自定义选项。该组件是 JQSuite 的一部分,JQSuite 是一个集合了多种用于构建富...
JavaScript是一种强大的客户端脚本语言,它允许开发者在不刷新整个页面的情况下动态更新内容,非常适合用于实现分页功能。下面我们将详细介绍几种JavaScript实现分页样式的常见方法和关键技术点。 1. 基础分页实现...
**AjaxGrid**是一个基于JavaScript的组件,主要用于在Web应用程序中实现数据的动态加载和交互。这个组件利用了AJAX(Asynchronous JavaScript and XML)技术,能够实现无刷新的数据网格展示,提升用户体验,使得用户...
2. **表格(Grid)**:展示大量数据的组件,支持排序、筛选、分页、编辑等功能,可以与后台数据库无缝对接。 3. **表单(Form)**:用于收集用户输入,支持验证和提交,可以与EasyUI的其他组件如日期选择器、下拉框...
**jqGrid**是一款基于jQuery的开源表格插件,它提供了丰富的功能,用于创建交互式的网格视图。在网页中,jqGrid可用于展示大量结构化的数据,支持数据分页、排序、搜索、编辑以及多种自定义功能。这个压缩包包含了一...
2. **Flexigrid**:Flexigrid是一款基于jQuery的网格插件,它提供了可伸缩的列宽、排序、分页、搜索等功能。特别适合于处理大量数据的展示。Flexigrid还允许用户自定义列头,提供了简单的API来控制表格行为。 3. **...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,可以帮助开发者快速构建具有专业界面和交互的Web应用程序。这个"jQuery EasyUI Demo 官方实例"包含的资源是EasyUI 1.14.2版本的官方...
- **Vue**:`vuetify`或`element-ui`等UI库提供了分页组件。 - **Angular**:`ng-bootstrap`或`ngx-pagination`等库可用于Angular应用。 7. **响应式设计**:确保分页在不同设备和屏幕尺寸上都能良好展示,可以...