本文可以当做api来使用

使用方法(Usage Example)

从现有的表单元素创建数据表格,定义在html中的行,列和数据。

<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">Code</th>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>

通过<TABLE>标记创建的DataGrid。嵌套的<TH>标签定义的列的表。

<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>

使用JavaScript创建数据表格。

<table id="dg"></table>  
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});

查询数据填充数据表格。

$('#dg').datagrid('load', {
name: 'easyui',
address: 'ho'
});

数据更改与服务器交互,刷新当前数据。

$('#dg').datagrid('reload');    // reload the current page data  

数据表格属性(DataGrid Properties)

属性继承控制面板,以下是数据表格独有的属性。

名称 类型 描述 默认值
columns array 数据表格列配置对象,查看列属性以获取更多细节。 undefined
frozenColumns array 跟列属性一样,但是这些列固定在左边,不会滚动。 undefined
fitColumns boolean 设置为true将自动使列适应表格宽度以防止出现水平滚动。 false
autoRowHeight boolean 定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。 true
toolbar array,selector 数据表格顶部面板的工具栏。可能的值:
1)数组,每个工具选项和链接按钮相同。
2)选择显示的工具栏。
在一个<div>的标签定义工具栏:

$('#dg').datagrid({
toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

通过数组定义工具栏:

$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('help')}
}]
});
null
striped boolean 设置为true将交替显示行背景。 false
method string 请求远程数据的方法类型。 post
nowrap boolean 设置为true,当数据长度超出列宽时将会自动截取。 true
idField string 表明该列是一个唯一列。 null
url string 一个用以从远程站点请求数据的超链接地址。 null
loadMsg string 当从远程站点载入数据时,显示的一条快捷信息。 Processing, please wait …
pagination boolean 设置true将在数据表格底部显示分页工具栏。 false
rownumbers boolean 设置为true将显示行数。 false
singleSelect boolean 设置为true将只允许选择一行。 false
checkOnSelect boolean 如果为true,该复选框被选中/取消选中,当用户点击某一行上。如果为false,该复选框仅检查/取消选中,当用户点击完全的复选框。
此属性是1.3版本。
true
selectOnCheck boolean 如果设置为true,单击一个复选框,将始终选择行。如果为false,不会选择行选中该复选框。
此属性是1.3版本。
true
pagePosition string  定义的分页栏的位置。可用的值有 'top','bottom','both'。
此属性是可自1.3版本。
bottom
pageNumber number 当设置分页属性时,初始化分页码。 1
pageSize number 当设置分页属性时,初始化每页记录数。 10
pageList array 当设置分页属性时,初始化每页记录数列表。 [10,20,30,40,50]
queryParams object 当请求远程数据时,发送的额外参数。

示例:

$('#dg').datagrid({
queryParams: {
name: 'easyui',
subject: 'datagrid'
}
});
{}
sortName string 当数据表格初始化时以哪一列来排序。 null
sortOrder string 定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。 asc
remoteSort boolean 定义是否通过远程服务器对数据排序。 true
showFooter boolean 定义是否显示行底(如果是做统计表格,这里可以显示总计等)。 false
rowStyler function 返回样式,如:'background:red',function有2个参数:
index:行索引,从0开始.
row:对应于该行记录的对象。

示例:

$('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;';
}
}
});
 
loader function 定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数:
param: 参数对象传递到远程服务器。
success(data): 回调函数将被调用成功检索的数据。
error():回调函数将被调用失败时检索数据。
json loader
loadFilter function 返回过滤的数据显示。该函数需要一个参数'data',表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。

示例:

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});
 
editors object 定义当编辑一行时的编辑模式。 predefined editors
view object 定义数据表格的视图。 default view

列属性(Column Properties)

数据表格的列是一个对象数组,即这个对象中的元素也是一个数组(js中数组是对象)。 对象数组中的每一个元素都是可配置的对象,每个可配置对象定义一个列。

示例:

columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
名称 类型 描述 默认值
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将显示复选框。 undefined
formatter function 格式化单元格函数,有3个参数:
value:字段的值。
rowData:行数据。
rowIndex:行索引。

示例:

$('#dg').datagrid({
columns:[[
{field:'userId',title:'User', width:80,
formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}
}
]]
});
undefined
styler function 单元格样式函数,返回样式字符串装饰表格如'background:red',function有3个参数:
value:字段值。
rowData:行数据。
rowIndex:行索引。

示例:

$('#dg').datagrid({
columns:[[
{field:'listprice',title:'List Price', width:80, align:'right',
styler: function(value,row,index){
if (value < 20){
return 'background-color:#ffee00;color:red;';
}
}
}
]]
});
undefined
sorter function T自定义字段排序函数,有2个参数:
a:该列的第一个值。
b:该列的第二个值。

示例:

$('#dg').datagrid({
remoteSort: false,
columns: [[
{field:'date',title:'Date',width:80,sortable:true,align:'center',
sorter:function(a,b){
a = a.split('/');
b = b.split('/');
if (a[2] == b[2]){
if (a[0] == b[0]){
return (a[1]>b[1]?1:-1);
} else {
return (a[0]>b[0]?1:-1);
}
} else {
return (a[2]>b[2]?1:-1);
}
}
}
]]
});
undefined
editor string,object 表明编辑类型。如果属性是字符串类型表示编辑类型,如果是对象则包含2个参数:
type:字符串,编辑类型,可选值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options:对象,对象于编辑类型的编辑器属性。
undefined

   转载: https://www.cnblogs.com/prefect/p/5664513.html

   详细文档:http://www.jeasyui.net/plugins/183.html

easyui datagrid属性和方法的更多相关文章

  1. easyui datagrid 清除缓存方法

    easyui datagrid 清除缓存方法 今天在项目中做了一个添加合同编号页面,添加合同编号了,在datagrid列表上没有显示刚才添加的那个合同编号. 这个问题在IE上特别明显. 原因是添加编号 ...

  2. Easyui Datagrid扩展fixRownumber方法 转载

    $.extend($.fn.datagrid.methods, { fixRownumber : function (jq) { return jq.each(function () { var pa ...

  3. Easyui Datagrid扩展fixRownumber方法

    首先,从datagrid生成的代码,我们可以发现,在rowNumber上都有特定的class标记,datagrid-cell-rownumber,datagrid-header-rownumber. ...

  4. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  5. easyui datagrid 动态添加columns属性

    公司在项目设计的时候,有一个需求,就是查出来的表的字段不唯一,一张表的字段可能是三个,也可能是五个,但是却要把它显示到页面,这个给我做ui的带来一点麻烦.因为以前一般用easyui 的datagrid ...

  6. EasyUI queryParams属性 在请求远程数据同时给action方法传参

    http://www.cnblogs.com/iack/p/3530500.html?utm_source=tuicool EasyUI queryParams属性 在请求远程数据同时给action方 ...

  7. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  8. EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

    带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...

  9. easyUI datagrid中 checkbox 各属性和事件

    DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false  ctrlSelect boolean 在启用多行 ...

随机推荐

  1. 新概念英语(1-43)Hurry up!

    新概念英语(1-43)Hurry up! How do you know Sam doesn't make the tea very often? A:Can you make the tea, Sa ...

  2. Spark入门(1-4)安装、运行Spark

    如何安装Spark 安装和使用Spark有几种不同方式.你可以在自己的电脑上将Spark作为一个独立的框架安装或者从诸如Cloudera,HortonWorks或MapR之类的供应商处获取一个Spar ...

  3. Spring Security 入门(1-4-2)Spring Security - 认证过程之AuthenticationProvider的扩展补充说明

    1.用户信息从数据库获取 通常我们的用户信息都不会向第一节示例中那样简单的写在配置文件中,而是从其它存储位置获取,比如数据库.根据之前的介绍我们知道用户信息是通过 UserDetailsService ...

  4. Spring MVC拦截器的配置

    最近在用SpringMVC,想用它的拦截器,但是配置了几次都不成功了,最后翻阅了不少文章终于成功了,遂记录于此,以方便他人. 首先引入命名空间: xmlns:mvc="http://www. ...

  5. 模板引擎Jade详解

    有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与 ...

  6. SpringMVC(三):@RequestMapping中的URL中设定通配符,可以使用@PathVariable映射URL绑定的占位符

    1)带占位符的URL是Spring3.0新增的功能,该功能在SpringMVC向REST目标挺进发展过程中具有里程碑的意义. 2)通过@PathVariable可以将URL中占位符参数绑定到控制器处理 ...

  7. 微信小程序开发-IP地址查询-例子

    微信小程序开发  小程序搜索框  IP地址查询  搜索查询  样例 微信小程序 开发 参考   https://mp.weixin.qq.com/debug/wxadoc/dev/component/ ...

  8. MIT许可证

    MIT许可证(The MIT License)是许多软件授权条款中,被广泛使用的其中一种.与其他常见的软件授权条款(如GPL.LGPL.BSD)相比,MIT是相对宽松的软件授权条款. MIT 许可证几 ...

  9. Linux OpenGL 实践篇-3 绘制三角形

    本次实践是绘制两个三角形,重点理解顶点数组对象和OpenGL缓存的使用. 顶点数组对象 顶点数组对象负责管理一组顶点属性,顶点属性包括位置.法线.纹理坐标等. OpenGL缓存 OpenGL缓存实质上 ...

  10. [COGS 2877]老m凯的疑惑

    Description Margatroid退役之后沉迷文化课 这天,写完数学作业之后的他脑洞大开,决定出一道比NOIP2017 D1T1<小凯的疑惑math>还要好的题 题面是这样的 $ ...