​easyui datagrid 参数详解​

已于 2022-10-25 14:28:35 修改
阅读量3.6k 收藏 13
点赞数 3
分类专栏： easyui 文章标签： easyui 前端 javascript
于 2022-10-25 14:27:48 首次发布
原文链接：https://blog.csdn.net/rookie_0/article/details/107385933
版权

目录

一.数据表格属性（DataGrid Properties）

二.列属性（Column Properties）

三.事件（Events）

四.方法（Methods）

easyui datagrid 部分参数

一.数据表格属性（DataGrid Properties）

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

名称类型描述默认值
columnsarray数据表格列配置对象，查看列属性以获取更多细节。undefined
frozenColumnsarray跟列属性一样，但是这些列固定在左边，不会滚动。undefined
fitColumnsboolean设置为true将自动使列适应表格宽度以防止出现水平滚动。false
autoRowHeightboolean定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。true
toolbararray,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
stripedboolean设置为true将交替显示行背景。false
methodstring请求远程数据的方法类型。post
nowrapboolean设置为true，当数据长度超出列宽时将会自动截取。true
idFieldstring表明该列是一个唯一列。null
urlstring一个用以从远程站点请求数据的超链接地址。null
loadMsgstring当从远程站点载入数据时，显示的一条快捷信息。Processing, please wait …
paginationboolean设置true将在数据表格底部显示分页工具栏。false
rownumbersboolean设置为true将显示行数。false
singleSelectboolean设置为true将只允许选择一行。false
checkOnSelectboolean如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。
此属性是1.3版本。		true
selectOnCheckboolean如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。
此属性是1.3版本。		true
pagePositionstring 定义的分页栏的位置。可用的值有 
'top','bottom','both'。
此属性是可自1.3版本。		bottom
pageNumbernumber当设置分页属性时，初始化分页码。1
pageSizenumber当设置分页属性时，初始化每页记录数。10
pageListarray当设置分页属性时，初始化每页记录数列表。[10,20,30,40,50]
queryParamsobject当请求远程数据时，发送的额外参数。

示例:

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

示例:

  
$('#dg').datagrid({
    rowStyler: function(index,row){
        if (row.listprice>80){
            return 'background-color:#6293BB;color:#fff;';
        }
    }
});
loaderfunction定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数：
param:
参数对象传递到远程服务器。
success(data):
回调函数将被调用成功检索的数据。
error():回调函数将被调用失败时检索数据。		json loader
loadFilterfunction返回过滤的数据显示。该函数需要一个参数'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;
        }
    }
});
editorsobject定义当编辑一行时的编辑模式。predefined editors
viewobject定义数据表格的视图。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}

  ]]  

名称类型描述默认值
titlestring列标题。undefined
fieldstring列字段。undefined
widthnumber列宽。undefined
rowspannumber表明一个单元格跨几行。undefined
colspannumber表明一个单元格跨几列。undefined
alignstring表明如何对其列数据，可选值：'left'，'right'，'center'。undefined
sortableboolean设置为true允许对该列排序。undefined
resizableboolean设置为true允许该列被缩放。undefined
hiddenboolean设置为true将隐藏列。undefined
checkboxboolean设置为true将显示复选框。undefined
formatterfunction格式化单元格函数，有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
stylerfunction单元格样式函数，返回样式字符串装饰表格如'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
sorterfunctionT自定义字段排序函数，有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
editorstring,object表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数：
type：字符串，编辑类型，可选值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。
options：对象，对象于编辑类型的编辑器属性。		undefined

三.事件（Events）

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

名称属性描述
onLoadSuccessdata当数据载入成功时触发。
onLoadErrornone当载入远程数据发生错误时触发。
onBeforeLoadparam在请求载入数据之前触发，如果返回false将取消载入。
onClickRowrowIndex, rowData当用户点击行时触发，参数如下：
rowIndex：被点击的行索引，从0开始。
rowData：对应于被点击的行的记录。
onDblClickRowrowIndex, rowData当用户双击一行时触发，参数如下：
rowIndex：被点击的行索引，从0开始。
rowData：对应于被点击的行的记录。
onClickCellrowIndex, field, value当用户点击单元格时触发。
onDblClickCellrowIndex, field, value当用户双击单元格时触发。

示例:

// when double click a cell, begin editing and make the editor get focus
$('#dg').datagrid({
    onDblClickCell: function(index,field,value){
        $(this).datagrid('beginEdit', index);
        var ed = $(this).datagrid('getEditor', {index:index,field:field});
        $(ed.target).focus();
    }
});
onSortColumnsort, order当用户对列排序时触发，参数如下：
sort：排序字段名称。
order：排序顺序。
onResizeColumnfield, width当用户调整列宽时触发。
onSelectrowIndex, rowData当用户选择一行是触发，参数如下：
rowIndex：被选择的行索引，从0开始。
rowData：对应于被选择行的记录。
onUnselectrowIndex, rowData当用户取消选择一行时触发，参数如下：
rowIndex：被取消选择的行索引，从0开始。
rowData：对应于被取消选择行的记录。
onSelectAllrows当用户选择所有行时触发。
onUnselectAllrows当用户取消选择所有行时触发。
onCheckrowIndex,rowData当用户选中行时触发，参数包含：
rowIndex：选中行的索引，从0开始
rowData：选中的行对应的记录
此属性是1.3版本。
onUncheckrowIndex,rowData当用户取消选中行时触发，参数包含：
rowIndex：取消选中行的索引，从0开始
rowData：未经检查的行对应的记录
此属性是1.3版本。
onCheckAllrows当用户检查所有行时触发。此属性是1.3版本。
onUncheckAllrows用户取消所有行时触发。此属性是1.3版本。
onBeforeEditrowIndex, rowData当用户开始编辑一行时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
onAfterEditrowIndex, rowData, changes当用户编辑完成时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
changes：被改变的字段内容，对应方式为字段：值。
onCancelEditrowIndex, rowData当用户取消编辑行时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
onHeaderContextMenue, field当数据表格的列标题被鼠标右键单击时触发。
onRowContextMenue, rowIndex, rowData当一行被鼠标右键单击时触发。


 

四.方法（Methods）

名称属性描述
optionsnone返回属性对象。
getPagernone返回页面对象。
getPanelnone返回控制面板对象。
getColumnFieldsfrozen返回列字段，如果设置了frozen属性为true，将返回固定列的字段名。
示例:
  
var opts = $('#dg').datagrid('getColumnFields');    // get unfrozen columns
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
getColumnOptionfield返回特定的列属性。
resizeparam缩放和布局。
loadparam载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。通过传递一些参数，通常做一个查询，这个方法可以被称为从服务器加载新数据。 
$('#dg').datagrid('load',{
    code: '01',
    name: 'name01'
});
reloadparam重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。
reloadFooterfooter重载行底记录。 示例: 
// update footer row values and then refresh
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// update footer rows with new data
$(’#dg’).datagrid(‘reloadFooter’,[
    {name: ‘name1’, salary: 60000},
    {name: ‘name2’, salary: 65000}
]);

loading none 显示载入状态。 loaded none 隐藏载入状态。 fitColumns none 让列宽自动适应数据表格的宽度。 fixColumnSize field 固定列尺寸。 如果 “field'  参数 未指定，将 所有列 的 大小 固定。 

示例:

$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
$('#dg').datagrid('fixColumnSize');  // fix all columns size


fixRowHeight index 固定特定列的高度。

如果 “index'  参数 未指定，将 所有列 的 高度 固定。

autoSizeColumn field 自动调整 列宽 ， 以适应内容 。 

此 方法是 1.3版本特有的 。 
loadData data 载入本地数据，旧记录将被移除。
getData none 返回已载入数据。
 getRows none 返回当前页的记录。
 getFooterRows none 返回行底记录。
 getRowIndex row 返回指定行的索引，row参数可以是行记录或者是一个id字段的值。
 getChecked none 返回所有行 的 复选框已被 选中 。
 此方法是1.3版本特有的。
 getSelected none 返回第一个被选择的行记录或null。 
getSelections none 返回所有被选择的行，当没有记录被选择时，将返回一个空数组。 
clearSelections none 取消所有的已选择项。
 selectAll none 选择 所有 页面的行 。
 unselectAll none 取消选择 所有 页面的行 。
 selectRow index 选择一行，行索引从0开始。
 selectRecord idValue 通过传递id参数来选择一行。 
unselectRow index 取消选择一行。
 checkAll none 检查所有 页面的行 。 此方法是1.3版本特有的。
 uncheckAll none 取消检查所有 当前 页面的行 。 此方法是1.3版本特有的。
 checkRow index 检查 行 ， 行索引 从0开始。 此方法是1.3版本特有的。 
uncheckRow index 取消检查 行 ， 行索引 从0开始。 此方法是1.3版本特有的。 
beginEdit index 开始编辑一行。 endEdit index 结束编辑。 
cancelEdit index 取消编辑。 
getEditors index 获取指定行的编辑器，每个编辑器有如下属性： 
actions：编辑器可以做的行为。 
target：目标编辑器jQuery对象。 
field：字段名。 
type：编辑器类型。 getEditor options 获取特定的编辑器，options参数有2个属性： 
index：行索引。 
field:字段名。 

示例:

// get the datebox editor and change its value
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');

refreshRow index 刷新一行。 validateRow index 校验指定的行，如果有效返回true。 updateRow param 更新指定的行，param参数包含如下属性： 
index：要更新的行索引。 
row：新的行数据。 

示例:

$('#dg').datagrid('updateRow',{
    index: 2,
    row: {
        name: 'new name',
        note: 'new note message'
    }
});

appendRow row 添加一行。  新的行 会被添加到 最后一个位置: 

$('#dg').datagrid('appendRow',{
    name: 'new name',
    age: 30,
    note: 'some messages'
});

insertRow param 

插入一个新行，param参数包含如下属性： 
index：要插入的行索引，如果没有定义则在最后面添加一个新行。 
row：行数据。

示例:

// insert a new row at second row position
$('#dg').datagrid('insertRow',{
    index: 1,    // index start with 0
    row: {
        name: 'new name',
        age: 30,
        note: 'some messages'
    }
});

deleteRow index 删除一行。 getChanges type 获取从最后一次提交开始的被修改的所有行，type参数表明修改的类型，可选值：inserted，deleted，updated等 。当没有传递type参数时，返回所有被修改的行。 acceptChanges none 提交所有修改的数据，提交后的数据将不能再修改或者回滚。 rejectChanges none 回滚自创建以来 或 自上次 调用AcceptChanges，所有的变化数据 。 mergeCells

easyUI之datagrid（数据表格）使用
03-18 975
‘">’,**在界面中添加数据表格添加相关依赖每个表都需要建立相应的js建立book.js将demo文件中的datagrid.data1.json复制到WebContent目录下book.js代码如下：/*** 注意：js文件中不支持el表达式*/columns:[[{field:‘productname’,title:‘名称’,width:100},{field:‘unitcost’,title:‘价格’,width:100,align:‘right’}]]});})
EasyUI Datagrid 客户端分页详解
qq_37720278的博客
12-12 2033
在网上能找到的客户端分页demo基本都是同一段代码，但没有注释，下面是我根据自己的理解和调试分析写上代码以及注释，希望能帮助大家理解EasyUI Datagrid客户端分页的执行过程
JQuery DataGrid 中文文档
LEE_ZCF
04-05 4786
数据表格 继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。 依赖关系 控制面板缩放链接按钮分页 使用方法 table id="tt">table>   $('#tt').datagrid({       url:'datagrid_data.js
easyUI之datagrid（数据表格）使用(1)
最新发布
2401_87288988的博客
09-21 788
注意：js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果，携带的参数为page和rows。js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果，携带的参数为page/rows。* 在bootstrap中点击上一页下一页默认的分页效果，携带的参数为page和offset。在bootstrap中点击上一页下一页默认的分页效果，携带的参数为page/offset。{field:‘productname’,title:‘名称’,width:100},
Jquery-easyUI-datagrid参数之 queryParams
weixin_30662539的博客
03-28 430
转自：http://blog.163.com/xpf_designer/blog/static/19213618920117784055668/ 1 Html 2 3 <div region="center" border="false" style="padding:0px 3px 0px 3px;margin:0px;"> ...
jQuery EasyUI API 中文文档 - DataGrid数据表格
03-26 2620
扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.j
easyUI之datagrid
墨笙弘一
04-21 3522
这篇博文打算总结一下，我在项目中使用前端框架easyUI所遇到的一些用法。 先按照下面的图片说三个小的easyUI datagrid中的用法： 1.在easyUI datagrid中每条记录前面显示复选框，并且可以实现单选和全选功能 代码实现如下：{field:'checked',title:'<input type="checkbox" id="selectAll">',width:'2
jquery easyui datagrid demo 详解
12-16
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列丰富的组件，使得开发者可以轻松构建用户界面，而 Datagrid 是其中非常重要的一个组件，常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...
jQuery EasyUI DataGrid属性详解
"Jquery EasyUI DataGrid 是一个常用的前端组件，用于展示和操作表格数据。这个组件提供了丰富的属性来定制表格的行为和样式。以下是一些主要的属性及其中文注解： 1. **columns** (array): 这个属性定义了DataGrid...
简介EasyUI datagrid editor combogrid搜索框的实现
11-22
【知识点详解】 本文主要介绍如何在EasyUI的DataGrid中实现Combogrid编辑器的搜索功能。EasyUI是一个基于jQuery的UI库，提供了一系列的组件，包括DataGrid和Combogrid，它们通常用于数据展示和编辑。Combogrid是...
详解EasyUi控件中的Datagrid
08-29
主要介绍了详解EasyUi控件中的Datagrid的相关资料,需要的朋友可以参考下
easyui DataGrid 数据表格 属性
04-10
NULL 博文链接：https://168zsj.iteye.com/blog/1659478
[转载]再次谈谈easyui datagrid 的数据加载
weixin_30454481的博客
01-20 508
这篇文章只谈jQuery easyui datagrid 的数据加载，因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式：一种是ajax加载目标url返回的json数据；另一种是加载js对象，也就是使用loadDate方法。 这里就自己的使用经验，对两种方式做简单总结和归纳，并且对使用过程中容易产生的误区做较为详细的描述，希望能对大家有所帮助。 url方式加载...
jQuery Easyui DataGrid应用
07-10 141
冻结列 $('#tbList').datagrid({ pagination: true, frozenColumns: [[ { field: 'BId',checkbox:'true',width:30}, { field: 'BNo', title: '牌号', width: 100 }, ...
easyuI中datagrid控件讲解
weixin_41563376的博客
05-24 2181
datagrid控件：在VisualStudio中Razor视图引擎中使用datagrid控件实现对应的效果
EasyUI 之datagrid 使用[转]
zhglhy的专栏
12-05 169
EasyUI 之datagrid 使用 来自：http://ycx211314.blog.163.com/blog/static/101670862011229105845754/ 可选的参数 DataGrid 属性 覆写了 $.fn.datagrid.defaults. 参数名 类型 描述 默认值 title ...
五、easyUI中的datagrid（数据表格）组件
weixin_44230693的博客
05-18 6005
五、easyUI中的datagrid（数据表格）组件
easy ui datagrid一些参数
Hi, Sun
08-22 257
grid=$('#listTable').datagrid({ nowrap: false,  数据是否换行 striped: true, //数据是否显示条纹(偶数显示有条纹，奇数不显示条纹) fit: false, // url:'AZ04!showList.do', sortName: 'fbm', sortOrder: 'asc', idField:'uuid', //...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值