easyui datagrid属性和方法

最新推荐文章于 2020-08-20 20:54:27 发布

weixin_30485291

最新推荐文章于 2020-08-20 20:54:27 发布

阅读量103

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/guofz/p/8846559.html

版权

本文可以当做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