初识 easyui datagrid
首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载。
首先要引入datagrid所引入的js和css。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
在这里引入的顺序不能有错啊,如果jquery.min.js和jquery.easyui.min.js引入的顺序不对可能就不能运行了啊easyui。
下面开始进行生成。
<body>
<div>
<table id="datagrid"></table>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#datagrid").datagrid({
rowNumbers:true,//是否显示行号
method:'post',//选择请求的方法
loadMsg:"正在请求,请等待",//设置等待时的信息
url:"datagrid",//请求的地址
columns:[[
{field:"field1",
title:"title1"},
{field:"field2",
title:"title2"},
{field:"field3",
title:"title3"}
]]
onLoadSuccess:function(data){
}
onLoadError:function(){
}
})
})
</script>
这样这个datagrid就显示出来了啊 。但是后台传过来的json很重要啊。
更多的属性请看下面:
数据表格(DataGrid)的特性
其特性扩展自 panel,下列是为 datagrid 增加的特性。
名称 |
类型 |
说明 |
默认值 |
columns |
array |
datagrid 的 column 的配置对象,更多详细请参见 column 的特性。 |
null |
frozenColumns |
array |
和列的特性一样,但是这些列将被冻结在左边。 |
null |
fitColumns |
boolean |
True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 |
false |
striped |
boolean |
True 就把行条纹化。(即奇偶行使用不同背景色) |
false |
method |
string |
请求远程数据的 method 类型。 |
post |
nowrap |
boolean |
True 就会把数据显示在一行里。 |
true |
idField |
string |
标识字段。 |
null |
url |
string |
从远程站点请求数据的 URL。 |
null |
loadMsg |
string |
当从远程站点加载数据时,显示的提示信息。 |
Processing, please wait … |
pagination |
boolean |
True 就会在 datagrid 的底部显示分页栏。 |
false |
rownumbers |
boolean |
True 就会显示行号的列。 |
false |
singleSelect |
boolean |
True 就会只允许选中一行。 |
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 |
remoteSort |
boolean |
定义是否从服务器给数据排序。 |
true |
showFooter |
boolean |
定义是否显示一行页脚。 |
false |
rowStyler |
function |
返回例如 'background:red' 的样式,该函数需要两个参数: |
|
loadFilter |
function |
返回过滤的数据去显示。这个函数需要一个参数 'data' ,表示原始数据。 你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有 'total' 和 'rows' 特性。 |
|
editors |
object |
定义编辑行时的 editor 。 |
预定义的 editor |
view |
object |
定义 datagrid 的 view 。 |
默认的 view |
列(Column)的特性
名称 |
类型 |
说明 |
默认值 |
title |
string |
列的标题文字。 |
undefined |
field |
string |
列的字段名。 |
undefined |
width |
number |
列的宽度。 |
undefined |
rowspan |
number |
指一个单元格占据多少行。 |
undefined |
colspan |
number |
指一个单元格占据多少列。 |
undefined |
align |
string |
指如何对齐此列的数据,可以用 'left'、'right'、'center'。 |
undefined |
sortable |
boolean |
True 就允许此列被排序。 |
undefined |
resizable |
boolean |
True 就允许此列被调整尺寸。 |
undefined |
hidden |
boolean |
True 就隐藏此列。 |
undefined |
checkbox |
boolean |
True 就显示 checkbox。 |
undefined |
formatter |
function |
单元格的格式化函数,需要三个参数: |
undefined |
styler |
function |
单元格的样式函数,返回样式字符串来自定义此单元格的样式,例如 'background:red' 。此函数需要三个参数: |
undefined |
sorter |
function |
自定义字段的排序函数,需要两个参数: |
undefined |
editor |
string,object |
指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性: text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 |
undefined |
编辑器(Editor)
用 $.fn.datagrid.defaults.editors 重写了 defaults。
每个编辑器有下列行为:
名称 |
参数 |
说明 |
init |
container, options |
初始化编辑器并且返回目标对象。 |
destroy |
target |
如果必要就销毁编辑器。 |
getValue |
target |
从编辑器的文本返回值。 |
setValue |
target , value |
给编辑器设置值。 |
resize |
target , width |
如果必要就调整编辑器的尺寸。 |
数据表格视图(DataGrid View)
用 $.fn.datagrid.defaults.view 重写了 defaults。
view 是一个对象,它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。
名称 |
参数 |
说明 |
render |
target, container, frozen |
当数据加载时调用。 |
renderFooter |
target, container, frozen |
这是呈现行脚选项的函数。 |
renderRow |
target, fields, frozen, rowIndex, rowData |
这是选项的函数,将会被 render 函数调用。 |
refreshRow |
target, rowIndex |
定义如何刷新指定的行。 |
onBeforeRender |
target, rows |
视图被呈现前触发。 |
onAfterRender |
target |
视图被呈现后触发。 |
事件
其事件扩展自 panel,下列是为 datagrid 增加的事件。
名称 |
参数 |
说明 |
onLoadSuccess |
data |
当数据加载成功时触发。 |
onLoadError |
none |
加载远程数据发生某些错误时触发。 |
onBeforeLoad |
param |
发送加载数据的请求前触发,如果返回 false加载动作就会取消。 |
onClickRow |
rowIndex, rowData |
当用户点击一行时触发,参数包括: |
onDblClickRow |
rowIndex, rowData |
当用户双击一行时触发,参数包括: |
onClickCell |
rowIndex, field, value |
当用户单击一个单元格时触发。 |
onDblClickCell |
rowIndex, field, value |
当用户双击一个单元格时触发。 |
onSortColumn |
sort, order |
当用户对一列进行排序时触发,参数包括: |
onResizeColumn |
field, width |
当用户调整列的尺寸时触发。 |
onSelect |
rowIndex, rowData |
当用户选中一行时触发,参数包括: |
onUnselect |
rowIndex, rowData |
当用户取消选择一行时触发,参数包括: |
onSelectAll |
rows |
当用户选中全部行时触发。 |
onUnselectAll |
rows |
当用户取消选中全部行时触发。 |
onBeforeEdit |
rowIndex, rowData |
当用户开始编辑一行时触发,参数包括: |
onAfterEdit |
rowIndex, rowData, changes |
当用户完成编辑一行时触发,参数包括: |
onCancelEdit |
rowIndex, rowData |
当用户取消编辑一行时触发,参数包括: |
onHeaderContextMenu |
e, field |
当 datagrid 的头部被右键单击时触发。 |
onRowContextMenu |
e, rowIndex, rowData |
当右键点击行时触发。 |
方法
名称 |
参数 |
说明 |
options |
none |
返回 options 对象。 |
getPager |
none |
返回 pager 对象。 |
getPanel |
none |
返回 panel 对象。 |
getColumnFields |
frozen |
返回列的字段,如果 frozen 设定为 true,冻结列的字段被返回。 |
getColumnOption |
field |
返回指定列的选项。 |
resize |
param |
调整尺寸和布局。 |
load |
param |
加载并显示第一页的行,如果指定 param 参数,它将替换 queryParams 特性。 |
reload |
param |
重新加载行,就像 load 方法一样,但是保持在当前页。 |
reloadFooter |
footer |
重新加载脚部的行。 |
loading |
none |
显示正在加载状态。 |
loaded |
none |
隐藏正在加载状态。 |
fitColumns |
none |
使列自动展开/折叠以适应 datagrid 的宽度。 |
fixColumnSize |
none |
固定列的尺寸。 |
fixRowHeight |
index |
固定指定行的高度。 |
loadData |
data |
加载本地数据,旧的行会被移除。 |
getData |
none |
返回加载的数据。 |
getRows |
none |
返回当前页的行。 |
getFooterRows |
none |
返回脚部的行。 |
getRowIndex |
row |
返回指定行的索引,row 参数可以是一个行记录或者一个 id 字段的值。 |
getSelected |
none |
返回第一个选中的行或者 null。 |
getSelections |
none |
返回所有选中的行,当没有选中的记录时,将返回空数组。 |
clearSelections |
none |
清除所有的选择。 |
selectAll |
none |
选中当前页所有的行。 |
unselectAll |
none |
取消选中当前页所有的行。 |
selectRow |
index |
选中一行,行索引从 0 开始。 |
selectRecord |
idValue |
通过 id 的值做参数选中一行。 |
unselectRow |
index |
取消选中一行。 |
beginEdit |
index |
开始对一行进行编辑。 |
endEdit |
index |
结束对一行进行编辑。 |
cancelEdit |
index |
取消对一行进行编辑。 |
getEditors |
index |
获取指定行的编辑器们。每个编辑器有下列特性: |
getEditor |
options |
获取指定的编辑器, options 参数包含两个特性: |
refreshRow |
index |
刷新一行。 |
validateRow |
index |
验证指定的行,有效时返回 true。 |
updateRow |
param |
更新指定的行, param 参数包含下列特性: |
appendRow |
row |
追加一个新行。 |
insertRow |
param |
插入一个新行, param 参数包括下列特性: |
deleteRow |
index |
删除一行。 |
getChanges |
type |
获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。 当 type 参数没有分配时,返回所有改变的行。 |
acceptChanges |
none |
提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。 |
rejectChanges |
none |
回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。 |
mergeCells |
options |
把一些单元格合并为一个单元格,options 参数包括下列特性: |
showColumn |
field |
显示指定的列。 |
hideColumn |
field |
隐藏指定的列。 |
初识 easyui datagrid的更多相关文章
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- 控制EasyUI DataGrid高度
这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下: <table ...
- EasyUI datagrid 日期时间格式化
EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- jquery easyui datagrid翻页后再查询始终从第一页开始
在查询之前将datagrid的属性pageNumber重新设置为1 var opts = grid.datagrid('options'); opts.pageNumber = 1; easyui d ...
- 让easyui datagrid支持bootstrap的tooltip
让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- VS2012 easyui datagrid url访问之坑
VS2012 easyui datagrid url访问之坑 url属性放的是地址的话 返回的json格式必须有 total 和 rows,如下: {"total":2," ...
随机推荐
- 使用BAT批处理执行sql语句的代码
使用BAT批处理执行sql语句的代码 有时候需要执行一些Sql语句时,不想开企业管理器,或者是发给客户执行但那边又不懂代码,这时就可以用下面方法 1.把待执行Sql保存在一个文件,这里为2011022 ...
- Spring Boot 之 HelloWorld详解
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “以前是人放狗看家,现在是狗牵着人散步” — 随笔 一.Spring Boot 自述 世界上最好 ...
- C primer plus 练习题 第一章
1. #include <stdio.h> int main() { //将英寸转换为厘米 1英寸=2.54厘米 int inch; printf("请输入英寸:"); ...
- asp.net添加验证码
1.新建一个aspx页面生成验证码图像 using System; using System.Data; using System.Configuration; using System.Collec ...
- C++ Low level performance optimize 2
C++ Low level performance optimize 2 上一篇 文章讨论了一些底层代码的优化技巧,本文继续讨论一些相关的内容. 首先,上一篇文章讨论cache missing的重要性 ...
- WebApp MVC,“不一样”的轻量级互联网应用程序开发框架
WebApp MVC 这是一个专门开发互联网程序的开发框架,跟之前的<EFW框架>使用情况不一样,EFW主要用于开发行业软件的快速开发:而WebApp又区别与别的MVC框架,比如AspNe ...
- android.support.v4包中的LruCache源码简读
package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...
- java--实现将文字生成二维码图片,并在中间附上logo,下方附上文字
前段时间因为工作需要,要实现将一段文字或者url生成二维码,然后中间附上logo,下方正中间附上文字的功能. 上网找了几篇教程学习了下,由于没有保存借鉴的博文链接,所以就没po上参考文章的链接啦,感谢 ...
- 关于Expression表达式树的拼接
最近在做项目中遇到一个问题,需求是这样的: 我要对已经存在的用户进行检索,可以根据用户的id 或者用户名其中的一部分字符来检索出来,这样就出现了三种情况 只有id,只有用户名中一部字符,或者全部都有. ...
- Java异常(一) Java异常简介及其架构
概要 本章对Java中的异常进行介绍.内容包括:Java异常简介Java异常框架 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3544168.html ...