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	boolean	是否把数据显示在一行上，如果设置为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: 行索引	undefined
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	当用取消选择一行时触发

方法

Name	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	改变页面大小时触发

.实例

()代码

<!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:,

           height:,

           nowrap: true,       

           striped: true,

           url:'datagrid_data.json',

           sortName: 'code',

           sortOrder: 'desc',

           idField:'code',

           frozenColumns:[[

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

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

           ]],

           columns:[[

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

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

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

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

              }

           }],

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

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

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

           ]],

           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: ,

           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=;i<rows.length;i++){

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

       }

       alert(ids.join(':'))

    }

    function clearSelections(){

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

    }

    function selectRow(){

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

    }

    function selectRecord(){

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

    }

    function unselectRow(){

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

    }

</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>

jqery-easyui的Datagrid的介绍-Pagination事件的更多相关文章

easyui datagrid 基础方法和事件
数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称类型描述默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节 ...
EasyUI中datagrid双击事件
EasyUI中datagrid双击事件在jsp文件底部增加代码: <script type="text/javascript"> //数据表双击事件 $('#tabl ...
按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现
//------------------------------------------------------------------------------- // 当然页面文件中还需要引入的文件 ...
easyUI中datagrid的使用
easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...
EasyUI中datagrid的基本用法
EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图
第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件学习要点: 1.加载方式 2.分页功能本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
easyui的datagrid用js插入数据等编辑功能的实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
在EasyUI的DataGrid中嵌入Combobox
在做项目时,须要在EasyUI的DataGrid中嵌入Combobox,花了好几天功夫,在大家的帮助下,最终看到了它的庐山真面: 核心代码例如以下: <html> <head> ...
C#的WebApi 与 EasyUi的DataGrid结合生成的可分页界面
1.从数据库每次取出的数据为当前分页的数据. 2.分页用的是EasyUI 的 Pagination控件,与DataGrid是相对独立的. 3.后台数据获取是通过WebApi去获取. 4.传入参数是:p ...

随机推荐

简易的命令行聊天室程序（Winsock，服务器&客户端）
代码中使用WinSock2函数库,设计并实现了简单的聊天室功能.该程序为命令行程序.对于服务器和客户端,需要: 服务器:创建监听套接字,并按本地主机绑定:主线程监听并接受来自客户端的请求,并为该客户端 ...
QT QPushButton
#include<QApplication> #include<QWidget> #include<QPushButton> #include<QMenu&g ...
Java NIO 进程间通信
转自:http://blog.csdn.net/lingzhm/article/details/45026119 传统的进程间通信的方式有大致如下几种: (1) 管道(PIPE) (2) 命名 ...
[Angularjs]处理页面闪烁的方法
摘要在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让 ...
ASP.NET开发，从二层至三层，至面向对象 (3)
继续上一篇<ASP.NET开发,从二层至三层,至面向对象 (2)>http://www.cnblogs.com/insus/p/3825805.html .我们学会了怎样创建对象,把Biz ...
当DataTable的列名遇上特殊字符"["和"]"时
刚才有看到一个问题http://bbs.csdn.net/topics/390781072.是在DataTable获取某列最小值,但是在动态生生DataTable时,列名有遇上特特殊字符"[ ...
ABB机器人---PCSDK简介
BB机器人为用户提供了大量便捷的二次开发及应用工具,PCSDK就是其中一项. 1) 首先,机器人使用PCSDK,必须要有pc interface选项. 2)此处举例使用C#编写简单界面,实现与机器人数 ...
【代码笔记】iOS-UIAlertView3秒后消失
一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...
X86和X64环境下的基本类型所占用的字节大小
同样的程序代码,使用Visual Studio 进行编译,当目标平台分别为x86或x64环境时,其编译结果是不同的.在x86环境下,指针都是4个字节的:而在x64环境下,指针都是8字节的.测试代码如下 ...
活字格Web应用平台学习笔记4 - 添加记录
今天继续学习活字格基础教程,目标是创建一个页面,增加记录. 开始之前,系统会自动把上一次的工程文件加载进来. 这是做好后的样子. 我点添加员工的超链接: 先后加了2条员工的信息进来. 不错,设计界面是 ...

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

Datagrid(数据表)

依赖的组件

DataGrid Options对象的属性

Columns属性

事件

方法

Pagination属性

Pagination事件

jqery-easyui的Datagrid的介绍-Pagination事件的更多相关文章

随机推荐

热门专题