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

随机推荐

JDK并发包中ExecutorCompletionService使用
相信大家都知道,jdk中ExecutorService是并发编程时使用很频繁的接口,并且使用很方便,那么想在有这么一个场景: 一批任务使用线程池处理,并且需要获得结果,但是不关心任务执行结束后输出结果 ...
UVa 514 Rails（栈的应用）
题目链接: https://cn.vjudge.net/problem/UVA-514 /* 问题输入猜测出栈顺序,如果可能输出Yes,否则输出No 解题思路貌似没有直接可以判定的方法,紫书上给出 ...
dom操作------创建节点/插入节点
<section> <div id="box" style="position: relative;"> <p id=" ...
用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 热更新Live2D
live2D是一个很强大的2D动画组件.我们可以使用AS3脚本对它进行热更新. live2D在Unity中的使用请看这里: 如何获取Live2D 总得来说,我们可以先去live2D官网下载它的Unit ...
docker 第一次学习（一）--安装以及相关命令
转自:https://www.jianshu.com/p/c69a2a3b4c7a https://docs.docker.com/ http://www.dockerinfo.net/documen ...
java基础-面向对象的思想
一.什么是面向对象面向对象是一种思想,在java中通常我们会说一句话一切事物即对象.而面向对象到底是怎么回事呢?这里我从人们对问题的思考来阐述,人在思考的一个问题的时候比如在解决一个数学问题的时候我 ...
C++基于范围的for循环性能测试（针对std::vector）
1.代码如下: void output1(int x){ if (x == 10000000) { std::cout << x << std::endl; } }const ...
百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...
python正则表达式贪婪与非贪婪模式
之前做程序的时候看到过正则表达式的贪婪与非贪婪模式,今天用的时候就想不起来了,现在这里总结一下,以备自己以后用到注意. 1.什么是正则表达式的贪婪与非贪婪匹配如:String str="a ...
高德地图 JS API - 根据经纬度获取周边建筑地标
像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...

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

Datagrid(数据表)

依赖的组件

DataGrid Options对象的属性

Columns属性

事件

方法

Pagination属性

Pagination事件

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

随机推荐

热门专题