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

随机推荐

Go控制语句
指针 Go虽然保留了指针,但是与其他编程语言不通的是,在Go当中不支持指针运算以及"->"运算符,而是直接采用"."选择符来操作指针目标对象的成员. 操作 ...
Spring-IOC注解
注解主要的目的就是实现零XML配置.一:自动扫描装配Bean. spring为我们引入了组件自动扫描机制,它可以在类路径底下寻找标注了@Component.@Service.@Controller.@ ...
keepalived之单播----k8sHA准备
一.概述 keepalived主要有三个模块,分别是core.check和vrrp.core模块为keepalived的核心,负责主进程的启动.维护以及全局配置文件的加载和解析.check负责健康检查 ...
网络之NSURLSession
NSUrlSession参考的这篇博客,自己也调试了它的代码:http://www.it165.net/pro/html/201406/15223.html ,对NSUrlSession还不太理解,先 ...
.39-浅析webpack源码之parser.parse
因为换了个工作,所以博客停了一段时间. 这是上个月留下来的坑,webpack的源码已经不太想看了,又臭又长,恶心的要死,想去看node的源码……总之先补完这个上一节完成了babel-loader对J ...
Hibernate映射 --- 自身跟自身的一对多关联
自身跟自身的一对多关联什么时候会出现自身一对多关系呢?下面举个例子. 淘宝店里商品分类,一级分类:家用电器,个人化妆,运动户外等家用电器下面二级分类:大家电,生活电器,厨房电器等二级分类大家 ...
胜利大逃亡(续)hdu1429（bfs）
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
BCB 读写Word文档
void __fastcall TForm1::btn1Click(TObject *Sender) { Variant WordApp,WordDocs,WordDoc; Variant word_ ...
linux系统编程：read,write与lseek的综合应用
这个实例根据命令行参数进行相应的读学操作: 用法: usage:./io file {r<length>|R<length>|w<string>|s<offs ...
python学习之老男孩python全栈第九期_day004知识点总结
1. 列表list: 列表转换成字符串: s = 'kidd' s1 = '_'.join(s) # 用_连接字符串转换成列表: split() range(头,尾,步长): [0,1,2,3,4, ...

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

Datagrid(数据表)

依赖的组件

DataGrid Options对象的属性

Columns属性

事件

方法

Pagination属性

Pagination事件

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

随机推荐

热门专题