jqery-easyui的Datagrid的介绍-Pagination事件

误凡尘

于 2019-07-26 09:32:51 发布

阅读量609

点赞数

文章标签： jqery-easyui Datagrid Pagination

本文详细介绍了EasyUI框架中的Datagrid组件，包括其属性、方法、事件及依赖组件。提供了实例代码，展示了如何使用Datagrid进行数据展示、分页、排序等功能，并解释了如何通过工具条和事件处理增强Datagrid的交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Datagrid(数据表)

依赖的组件

resizable

linkbutton

pagination

DataGrid Options对象的属性

名称(Name)	类型(Type)	描述(Description)	默认值(Default)
Titile	string	Datagrid数据表的标题	null
iconCls	string	一个样式类提供作为数据表图标的背景图标	null
border	boolean	是否显示数据表边框,true-显示 false-不显示	true
width	number	设置Datagrid的宽度	auto
height	number	设置Datagrid的高度	auto
columns	array	配置Datagrid列属性的Object对象	null
frozenColumns	array	与columns属性一样，但是该属性设置的列会被冻结在Datagrid的左边	null
striped	boolean	是否显示斑马线	false
Method	string	远程数据的获取类型，可取值为post或get	post
nowrap	oolean	是否把数据显示在一行上，如果设置为false，当数据长度超过列长度时，超过的部分被截掉	true
idField	string	表明哪个字段是一个标识字段	null
url	string	从远程地址请求数据的url	null
loadMsg	string	当从远程站点加载数据时显示的提示消息	Processing, please wait …
pagination	boolean	设置是否有分页功能	false
rownumbers	number	是否显示行号列	false
singleSelect	number	设置是否可只选一行	false
fit	boolean	设置是否可以让表格自动缩放以适应父容器	false
pageNumber	number	当设置pagination属性时，初始化页码	1
pageSize	number	当设置pagination属性时，初始化每一页显示的数量	10
pageList	array	当设置pagination属性时，初始化每页可选的数据大小清单	[10,20,30,40,50]
queryParams	Object	当请求远程数据时，发送的额外的参数	{}
sortName	string	定义哪一列可以排序	null
sortOrder	string	定义列排序的方式，递增（asc）或递减（desc）	asc

Columns属性

Name	Type	Description	Default
title	字符串	列标题文字	undefined
field	字符串	列字段名称	undefined
width	数字	列宽度	undefined
rowspan	数字	该列占几行单元格	undefined
colspan	数字	该列占几列单元格	undefined
align	字符串	数据对其方式，可选值有left,right,center	undefined
sortable	布尔	是否允许该列排序	undefined
checkbox	布尔	是否显示选择框	undefined
formatter	函数	包含三个参数： value: 列字段对应的值 rowData: 行数据对象 rowIndex: 行索引	und
editor	string,object	指示编辑类型，有两个子属性，type和options；type可选的编辑框有:text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree；options指定一个对象，与编辑类型对应，数字框对应的options属性中有precision,表示小数点位数	undefined

事件

Name	Parameters	Description
onLoadSuccess	none	远程数据成功加载时触发
onLoadError	none	远程数据加载发生错误时触发
onClickRow	rowIndex,rowData	用户点击一行时触发，参数包括： rowIndex:被点击行的索引，索引从0开始 rowData:被点击行对应的数据记录
onDblClickRow	rowIndex,rowData	用户双击一行时触发，参数同上
onSortColumn	sort,order	用户对一列进行排序时触发，参数包括： sort:被排序的类字段名称 order:排序的命令，asc 或者 desc
onSelect	rowIndex,rowData	用户选择一行时触发
onUnselect	rowIndex,rowData	当用取消选择一行时触发

方法

Nam	Parameters	Description
options	none	返回一个options对象
resize	none	调整表格大小和布局
reload	none	重新加载行
fixColumnSize	none	固定列的大小
loadData	param	加载本地数据，旧行将被删
getSelected	none	返回被选中的第一行记录或者null
getSelections	none	返回所有被选中的行，当没有一条记录别选中时则返回一个空的数组对象
clearSelections	none	取消所有选中
selectRow	index	选择一行，行索引从0开始
selectRecord	idValue	通过行id值选择一行
unselectRow	index	取消选中某行
beginEdit	index	开始编辑某行
endEdit	index	结束编辑某行
cancelEdit	index	取消编辑某行
refreshRow	index	刷新一行的数据
appendRow	row	添加新行
deleteRow	index	删除一行
getChanges	type	自最后一次数据提交开始获取被改变的行，类型参数指示的是行的改变类型，可能的值是：inserted,deleted,updated等，当类型参数没有指定时将返回所有被改变的行
acceptChanges	none	自数据被加载或者最后一次调用acceptChanges的时间开始，提交所有的数据变化
rejectChanges	none	自所有数据被创建或者最后一次调用accepChanges方法开始回滚所有变化了的数据

注：示例中用到了分页，Datagrid依赖pagination(分页)组件，下面讲解以下pagination组件的属性和事件

Paginagion

Pagination属性

属性名	类型	描述	默认值
total	数字	当分页建立时设置记录的总数量	1
pageSize	数字	每一页显示的数量	10
pageNumber	数字	当分页建立时，显示的页数	1
pageList	数组	用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.	[10,20,30,50]
loading	布尔	定义数据是否正在加	false
buttons	数组	定义自定义按钮，每个按钮包含两个属性：iconCls: 显示背景图像的CSS类 handler: 当一个按钮被点击时的处理函数	null
showPageList	布尔	定义是否显示页面列表	true
showRefresh	布尔	定义是否显示刷新按钮	true
beforePageText	字符串	在输入框组件前显示的标签	Page
afterPageText	字符串	在输入框组件后显示的标签	Of {pages}
displayMsg	字符串	显示一个页面的信息。	Displaying {from} {to} of {total} items 注：{param}是固定的参数设置，不能修改

Pagination事件

事件名	参数	描述
onSelectPage	pageNumber, pageSize	当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的大小
onBeforeRefresh	ageNumber, pageSize	刷新按钮被点击之前触发，如果返回false则取消刷新操作
onRefresh	ageNumber, pageSize	刷新以后触发
onChangePageSize	ageSize	改变页面大小时触发

1.实例
(1)代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>EasyUI Datagrid</title>

<link rel="stylesheet" type="text/css"

    href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

    $(function(){

       $('#test').datagrid({

           title:'My Title',

           iconCls:'icon-save',

           width:800,

           height:450,

           nowrap: true,       

           striped: true,

           url:'datagrid_data.json',

           sortName: 'code',

           sortOrder: 'desc',

           idField:'code',

           frozenColumns:[[

{field:'ck',checkbox:true},

                 {title:'code',field:'code',width:80,sortable:true}

           ]],

           columns:[[

{title:'Base Information',colspan:3},

{field:'opt',title:'Operation',width:100,align:'center'

,rowspan:2,formatter:function(value,rec){

                  return '<span style="color:red">Edit Delete</span>';

              }

           }],

[{field:'name',title:'Name',width:120},

                 {field:'addr',title:'Address',width:120,rowspan:2,sortable:true},

           {field:'col4',title:'Col41',width:150,rowspan:2}

           ]],

           pagination:true,

           rownumbers:true,

           singleSelect:true,

           //事件调用的方式

           onLoadSuccess: function (){alert('load data successfully!');}

           toolbar:[{ //设置工具条，该工具条中设置了三个功能按钮

              text:'Add',   //标题为’Add’的工具条按钮

              iconCls:'icon-add',//工具条按钮显示的图标

              handler:function(){//工具条按钮实现的功能函数

                  alert('add')

              }

           },{

              text:'Cut',   //标题为’Cut’的工具条按钮

              iconCls:'icon-cut',

              disabled:true,

              handler:function(){

                  alert('cut')

              }

           },'-',{

              text:'Save',

              iconCls:'icon-save',

              handler:function(){

                  alert('save')

              }

           }]

       });

       //获取页面分页对象

       var p = $('#test').datagrid('getPager');

       if (p){

           $(p).pagination({ //设置分页功能栏

              //分页功能可以通过Pagination的事件调用后台分页功能来实现

              onBeforeRefresh:function(){

                  alert('before refresh');

              }

           });

       }

    });

 

    function resize(){

       $('#test').datagrid({

           title: 'New Title',

           striped: true,

           width: 650,

           queryParams:{

              p:'param test',

              name:'My Name'

           }

       });

    }

    //获取Datagrid Options对象属性的方式

    function getGridProperty(){

       //先获取Options对象，然后通过Options获取其属性

       var optionsObj = $('#test').datagrid('options');

       var queryParams = optionsObj.queryParams;

      

}

 

//以下为调用Datagrid的函数的自定义方法

    function getSelected(){

       var selected = $('#test').datagrid('getSelected');

       alert(selected.code+":"+selected.name);

    }

    function getSelections(){

       var ids = [];

       var rows = $('#test').datagrid('getSelections');

       for(var i=0;i<rows.length;i++){

           ids.push(rows[i].code);

       }

       alert(ids.join(':'))

    }

    function clearSelections(){

       $('#test').datagrid('clearSelections');

    }

    function selectRow(){

       $('#test').datagrid('selectRow',2);

    }

    function selectRecord(){

       $('#test').datagrid('selectRecord','002');

    }

    function unselectRow(){

       $('#test').datagrid('unselectRow',2);

    }

</script>

</head>

<body>

<h1>DataGrid</h1>

<div style="margin-bottom: 10px;">

<a href="#" onclick="resize()">resize</a>

<a href="#" onclick="getSelected()">getSelected</a>

<a href="#" onclick="getSelections()">getSelections</a>

<a href="#" onclick="clearSelections()">clearSelections</a>

<a href="#" onclick="selectRow()">selectRow</a>

<a href="#" onclick="selectRecord()">selectRecord</a>

<a href="#" onclick="unselectRow()">unselectRow</a>

</div>

<table id="test"></table>

</body>

</html>

转自：https://www.cnblogs.com/zhangtianle/p/9023259.html