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

随机推荐

QT QPushButton
#include<QApplication> #include<QWidget> #include<QPushButton> #include<QMenu&g ...
Unix/Linux系统管理技术手册学习笔记——shell
创建日期:2016/02/29 更新日期:2016/02/29 shell变量赋值时不能在等号两边留空白,否则shell会把变量名误认为是命令名双引号括起来的变量可以进行替换(用*和?这样的文件名匹 ...
[NOI 2016]优秀的拆分
Description 题库链接给你一个长度为 $n$ 的只含小写字母的字符串 $S$ ,计算其子串有多少优秀的拆分. 如果一个字符串能被表示成 $AABB$ 的形式,其中 \(A,B\ ...
zuul超时及重试配置
配置实例 ##timeout config hystrix: command: default: execution: timeout: enabled: true isolation: thread ...
php json_encode在CI框架中的使用细节
这个错误的造成原因是加载类类库,转换成json格式的时候不熟悉CI框架的规定导致的,CI框架中规定在将数据转换成json格式的时候需要将类库小写,当然了,调用的时候必须保证有这个类库,且可以在对应的文 ...
.NET 简单导出CSV文件
Response.ClearContent(); Response.AddHeader("content-disposition", "attachment; filen ...
PHP语法-该注意的细节
php in_array(mixed $needle, array $haystack[, bool $strict = FALSE] ) 注意: 一.如果$needle 是字符串,则比较是区分大小写 ...
聊聊Java内存模型
一.Java内存模型硬件处理电脑硬件,我们知道有用于计算的cpu.辅助运算的内存.以及硬盘还有进行数据传输的数据总线.在程序执行中很多都是内存计算,cpu为了更快的进行计算会有高速缓存,最后同步至 ...
Shiro眼皮下玩ajax，玩出302 Found
2017/06/14这一天,是我玩Shiro安全框架最刻骨铭心的一天.因为Shiro今天给我深深的补了一刀,在这儿我也给各位补一刀吧,其实问题很简单,解决方式也极其简单,只是给各位分享一下这个错误,纯 ...
Python3.6下的Requests登录及利用Cookies登录
利用Python中的Requests模块可以实现Post,Get等发送功能,我以登录某网站为例,记录使用Post发送用户名.密码及图形验证码,以及通过Cookies直接登录的内容. 1.利用POST发 ...

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

Datagrid(数据表)

依赖的组件

DataGrid Options对象的属性

Columns属性

事件

方法

Pagination属性

Pagination事件

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

随机推荐

热门专题