首页 前端知识 EasyUI Jquery 学习笔记 ——DataGrid(数据网格)与 Tree(树)详细版

EasyUI Jquery 学习笔记 ——DataGrid(数据网格)与 Tree(树)详细版

2024-05-05 22:05:51 前端知识 前端哥 123 372 我要收藏

1. DataGrid(数据网格)与 Tree(树)

1.1 Datagrid 数据网格 

扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。

数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是为了减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

用法

从已有的表格元素创建数据网格(datagrid),在 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 创建数据网格(datagrid)。

    <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)属性

该属性扩展自面板(panel),下面是为数据网格(datagrid)添加的属性。

名称 类型 描述 默认值
columns array 数据网格(datagrid)的列(column)的配置对象,更多细节请参见列(column)属性。 undefined
frozenColumns array 和列(column)属性一样,但是这些列将被冻结在左边。 undefined
fitColumns boolean 设置为 true,则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。 false
resizeHandle string 调整列的位置,可用的值有:'left'、'right'、'both'。当设置为 'right' 时,用户可通过拖拽列头部的右边缘来调整列。
该属性自版本 1.3.2 起可用。
right
autoRowHeight boolean 定义是否设置基于该行内容的行高度。设置为 false,则可以提高加载性能。 true
toolbar array,selector 数据网格(datagrid)面板的头部工具栏。可能的值:
1、数组,每个工具选项与链接按钮(linkbutton)一样。
2、选择器,只是工具栏。

在 <div> 标签内定义工具栏:
 
    
  1. $('#dg').datagrid({
  2. toolbar: '#tb'
  3. });
  4. <div id="tb">
  5. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
  6. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
  7. </div>
通过数组定义工具栏:
 
    
  1. $('#dg').datagrid({
  2. toolbar: [{
  3. iconCls: 'icon-edit',
  4. handler: function(){alert('edit')}
  5. },'-',{
  6. iconCls: 'icon-help',
  7. handler: function(){alert('help')}
  8. }]
  9. });
null
striped boolean 设置为 true,则把行条纹化。(即奇偶行使用不同背景色) false
method string 请求远程数据的方法(method)类型。 post
nowrap boolean 设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。 true
idField string 指示哪个字段是标识字段。 null
url string 从远程站点请求数据的 URL。 null
data array,object 要加载的数据。该属性自版本 1.3.2 起可用。
代码实例:
 
    
  1. $('#dg').datagrid({
  2. data: [
  3. {f1:'value11', f2:'value12'},
  4. {f1:'value21', f2:'value22'}
  5. ]
  6. });
null
loadMsg string 当从远程站点加载数据时,显示的提示消息。 Processing, please wait …
pagination boolean 设置为 true,则在数据网格(datagrid)底部显示分页工具栏。 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 当设置了 pagination 属性时,初始化页码。 1
pageSize number 当设置了 pagination 属性时,初始化页面尺寸。 10
pageList array 当设置了 pagination 属性时,初始化页面尺寸的选择列表。 [10,20,30,40,50]
queryParams object 当请求远程数据时,发送的额外参数。
代码实例:
 
    
  1. $('#dg').datagrid({
  2. queryParams: {
  3. name: 'easyui',
  4. subject: 'datagrid'
  5. }
  6. });
{}
sortName string 定义可以排序的列。 null
sortOrder string 定义列的排序顺序,只能用 'asc' 或 'desc'。 asc
multiSort boolean 定义是否启用多列排序。该属性自版本 1.3.4 起可用。 false
remoteSort boolean 定义是否从服务器排序数据。 true
showHeader boolean 定义是否显示行的头部。 true
showFooter boolean 定义是否显示行的底部。 false
scrollbarSize number 滚动条宽度(当滚动条是垂直的时候)或者滚动条的高度(当滚动条是水平的时候)。 18
rowStyler function 返回例如 'background:red' 的样式。该函数需要两个参数:
rowIndex:行的索引,从 0 开始。
rowData:该行相应的记录。

代码实例:
 
    
  1. $('#dg').datagrid({
  2. rowStyler: function(index,row){
  3. if (row.listprice>80){
  4. return 'background-color:#6293BB;color:#fff;'; // return inline style
  5. // the function can return predefined css class and inline style
  6. // return {class:'r1', style:{'color:#fff'}};
  7. }
  8. }
  9. });
loader function 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数:
param:要传递到远程服务器的参数对象。
success(data):当检索数据成功时调用的回调函数。
error():当检索数据失败时调用的回调函数。
json loader
loadFilter function 返回要显示的过滤数据。该函数有一个参数 'data' ,表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象,含有 'total' 和 'rows' 属性。
代码实例:
 
    
  1. // removing 'd' object from asp.net web service json output
  2. $('#dg').datagrid({
  3. loadFilter: function(data){
  4. if (data.d){
  5. return data.d;
  6. } else {
  7. return data;
  8. }
  9. }
  10. });
editors object 定义编辑行时的编辑器。 predefined editors
view object 定义数据网格(datagrid)的视图。 default view

列(Column)属性

数据网格(DataGrid) 的列(Column)是一个数组对象,它的每个元素也是一个数组。元素数组的元素是一个配置对象,它定义了每个列的字段。

代码实例:

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
halign string 指示如何对齐该列的头部,可能的值:'left'、'right'、'center'。如果没有分配值,则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致。该属性自版本 1.3.2 起可用。 undefined
sortable boolean 设置为 true,则允许该列被排序。 undefined
order string 默认的排序顺序,只能用 'asc' 或 'desc'。该属性自版本 1.3.2 起可用。 undefined
resizable boolean 设置为 true,则允许该列可调整尺寸。 undefined
fixed boolean 设置为 true,则当 'fitColum
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7061.html
标签
easyui
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!