`

Jquery EasyUI datagrid分页

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
       <table id="people_datagrid"></table>
</body>
</html>

 

//显示人员列表的方法
function peopleList(buildingId, selectFloor, selectRoom, pSex,peopleNameOrIdentity) {
	$('#people_datagrid').datagrid({
		title : '人员列表',
		nowrap : true,// 在数据满行 后是否自动截取
		height : 360,
		rownumbers : true,// 显示行数
		pageSize : 10,// 显示多少条记录
		striped : true,
		// fitColumns:true, //适度列宽
		singleSelect : true,
		collapsible : true,
		// url:ctxPath+'/peopleController/searchFloorPeople.action?id='+buildingId+'&selectFloor='+selectFloor+'&selectRoom='+selectRoom+'&pSex='+pSex+'&peopleNameOrIdentity='+peopleNameOrIdentity,
		url : ctxPath
				+ '/peopleController/searchFloorPeople.action?id='
				+ encodeURI(buildingId) + '&selectFloor='
				+ encodeURI(selectFloor) + '&selectRoom='
				+ encodeURI(selectRoom) + '&pSex='
				+ encodeURI(pSex) + '&peopleNameOrIdentity='
				+ encodeURI(peopleNameOrIdentity),
		remoteSort : false,
		idField : 'id',
		pagination : true,
		striped : true,
		sortName : 'id',
		sortOrder : 'asc',
		onLoadSuccess : function(data) {
			if (data.total == 0) {
				/*
				 * $.messager.show({ title:'信息提示',
				 * msg:'没有找到相应信息!', showType:'show' });
				 */
			}
		},
		columns : [ [
			{
				title : '姓名',
				field : 'NAME',
				width : 48,
				sortable : true,
				align : 'left'
			},
			{
				title : '性别',
				field : 'SEX',
				width : 30,
				sortable : true,
				align : 'left'
			},
			{
				title : '身份证',
				field : 'IDENTITY_CARD',
				width : 120,
				sortable : true,
				align : 'left'
			},
			{
				title : '出生日期',
				field : 'BIRTHDAY',
				width : 67,
				sortable : true,
				align : 'left'
			},
			{
				title : '民族',
				field : 'NATION',
				width : 38,
				sortable : true,
				align : 'left'
			},
			{
				title : '联系电话',
				field : 'LINK_TEL',
				width : 70,
				sortable : true,
				align : 'left'
			},
			{
				title : '定位',
				field : 'ID',
				align : 'center',
				formatter : function(value, rowData,
						rowIndex) {
					return '<span style="color:blue"><a style="text-decoration: none;" href="javascript:peopleloc('
							+ buildingId
							+ ','
							+ value
							+ ');">详细信息</a>';
				},
				width : 60,
				align : 'left'
			} ] ]
	});
}

 

分享到:
评论

相关推荐

    jquery easyui datagrid demo

    Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和操作,支持分页、排序、过滤、编辑等功能。通过阅读这份文档,我们可以了解 Datagrid 的基本配置和高级特性,以及如何与后端数据源进行...

    easyui datagrid 分页查询样例

    EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如表格布局、数据分页、排序、过滤等,常用于Web应用的数据展示。在本项目中,"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    JqueryEasyUI DataGrid例子

    综上所述,这个 JqueryEasyUI DataGrid 示例展示了如何使用前端框架与后端服务器配合,实现一个功能完备的表格应用。在实际开发中,开发者可以根据需求调整 DataGrid 的配置项,以及后台 Servlet 的逻辑,以适应各种...

    jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...

    jquery easyui datagrid 教程

    jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...

    jquery easyui datagrid demo 详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列丰富的组件,使得开发者可以轻松构建用户界面,而 Datagrid 是其中非常重要的一个组件,常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    easyui datagrid 增加鼠标悬停弹窗事件

    EasyUI的Datagrid是一个强大的表格组件,它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中,Datagrid常用于展示结构化的数据,使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**: 在...

    jquery自制分页,控制easyui datagrid分页,集中处理了一下前后台

    本教程将围绕“jQuery 自制分页,控制 EasyUI datagrid 分页”这一主题进行深入讲解。 首先,EasyUI 的 DataGrid 默认的分页功能已经相当强大,它可以自动处理数据请求、显示页码和每页条数等。然而,在某些情况下...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    其中,dataGrid是EasyUI中一个非常重要的组件,用于展示表格数据,支持排序、分页等功能。但在某些情况下,当表格列数过多且没有数据时,可能会出现列显示不全的问题。 #### 二、问题分析 ##### 1. 原因分析 出现...

    EasyUI中datagrid 分页,僧删改查,上下移动数据.net案例

    本文将深入探讨标题中的"EasyUI中datagrid分页,增删改查,上下移动数据"的.NET案例。 **EasyUI的datagrid组件**: EasyUI的datagrid是一个表格控件,它具有数据展示、排序、过滤、分页等功能,非常适合用于数据...

    基于JQuery的datagrid分页数据实现

    本项目"基于JQuery的datagrid分页数据实现"就是针对这一需求提供的一种解决方案。这个小程序利用SSH2(Struts2、Spring、Hibernate)框架,结合Maven构建工具,实现了通过jQuery的datagrid插件进行Ajax分页加载数据...

    jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...

    easyui的datagrid生成合并行,合计计算价格

    EasyUI的DataGrid是一种强大的数据展示工具,它可以用来展示结构化的数据,并提供了分页、排序、过滤等多种功能。DataGrid的使用非常方便,只需要简单的HTML和JavaScript代码就能创建出具有复杂功能的表格。 2. 行...

Global site tag (gtag.js) - Google Analytics