easyui-datagrid 知识总结

发布日期:2018-03-07    浏览次数:517

1.datagrid的数据引入是使用json

在后台与easyui框架下的前端进行数据的传输交互时,应该使用json格式的数据。(关于后台json数据的处理另开文档总结,主要使用json-lib和jackson)

2.datagrid加载数据源的几种方法

2.1 使用url属性。

例子:

$('#datagrid').datagrid({
  url:'xxx.json',
  或者
  url:'user/userServlet' //注意,后台Servlet返回json字符串 …… //其他属性 })

 

2.2使用data属性

例子:

复制代码
$('#datagrid').datagrid({
  data:[{value1:"第一个值",value2:"第二个值"}],
  …… //其他属性  或者
  data:[{
    {value1:"第一个值",value2:"第二个值"},
    {value1:"第一个值",value2:"第二个值"},
    {value1:"第一个值",value2:"第二个值"}
  }],
  });
复制代码

 

正如以上所示,data属性的类型是array和object。

2.3使用loadData方法

例子:

var data = JSON.parse(dataString);//将jsonString转换成json格式 $('#datagrid').datagrid('loadeData',data)

 

3.datagrid表格数据的相关方法

3.1使用HTML的标签属性进行数据绑定

例子:

复制代码
<table id = "datagrid"> <tr> <th data-options="field:'code'">编码</th> <th data-options="field:'name'">名称</th> <th data-options="field:'price'">价格</th> </tr> </table>
复制代码

 

3.2使用columns属性进行数据绑定

例子:

复制代码
$('#datagrid').datagrid({
  columns:[[
    {field:'itemid',title:'Item ID'},
    {field:'productid',title:'Product ID'},
    {field:'listprice',title:'List Price'},        
  ]],//DataGrid列配置对象 });
复制代码

 

3.2.1 列属性

 
 

属性名称

属性值类型

描述

title

string

列标题文本。

field

string

列字段名称。

width

number

列的宽度。如果没有定义,宽度将自动扩充以适应其内容。

rowspan

number

指明将占用多少行单元格(合并行)。

colspan

number

指明将占用多少列单元格(合并列)。

align

string

指明如何对齐列数据。可以使用的值有:'left','right','center'。

halign

string

指明如何对齐列标题。可以使用的值有:'left','right','center'。如果没有指定,则按照align属性进行对齐。(该属性自1.3.2版开始可用)

sortable

boolean

如果为true,则允许列使用排序。

order

string

默认排序数序,只能是'asc'或'desc'。(该属性自1.3.2版开始可用)

resizable

boolean

如果为true,允许列改变大小。

fixed

boolean

如果为true,在"fitColumns"设置为true的时候阻止其自适应宽度。

hidden

boolean

如果为true,则隐藏列。

checkbox

boolean

如果为true,则显示复选框。该复选框列固定宽度。

formatter

function

单元格formatter(格式化器)函数,带3个参数:value:字段值。row:行记录数据。index: 行索引。

styler

function

单元格styler(样式)函数,返回如'background:red'这样的自定义单元格样式字符串。该函数带3个参数:value:字段值。row:行记录数据。index: 行索引。

sorter

function

用来做本地排序的自定义字段排序函数,带2个参数:a:第一个字段值。b:第二个字段值。

editor

string,object

指明编辑类型。当字符串指明编辑类型的时候,对象包含2个属性:type:字符串,该编辑类型可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。options:对象,object, 该编辑器属性对应于编辑类型。

styler 使用示例

复制代码
$('#datagrid').datagrid({
  columns:[[
    {field:'itemid',title:'Item ID',styler: function(value,row,index){ //value是字段值(列) //row是行数据,一行就是一个对象 //inedx是列的索引,从0开始计数 //返回值是字符串(注意是css样式格式的字符串),比如,下面所示: if(index%2==0){ return 'background-color:#ffee00;';//将偶数的这一列数据背景更改  }
    },
    {field:'productid',title:'Product ID'},
    {field:'listprice',title:'List Price'},        
  ]]
});
复制代码

 

4.datagrid的事件

4.1事件名称全搜罗

 
 

事件名

参数

描述

onLoadSuccess

data

在数据加载成功的时候触发。

onLoadError

none

在载入远程数据产生错误的时候触发。

onBeforeLoad

param

在载入请求数据数据之前触发,如果返回false可终止载入数据操作。

onClickRow

index, row

在用户点击一行的时候触发,参数包括:index:点击的行的索引值,该索引值从0开始。row:对应于点击行的记录。

onDblClickRow

index, row

在用户双击一行的时候触发,参数包括:index:点击的行的索引值,该索引值从0开始。row:对应于点击行的记录。

onClickCell

index, field, value

在用户点击一个单元格的时候触发。

onDblClickCell

index, field, value

在用户双击一个单元格的时候触发。代码示例:

onBeforeSortColumn

sort, order

在用户排序一个列之前触发,返回false可以取消排序。(该事件自1.3.6版开始可用)

onSortColumn

sort, order

在用户排序一列的时候触发,参数包括:sort:排序列字段名称。order:排序列的顺序(ASC或DESC)

onResizeColumn

field, width

在用户调整列大小的时候触发。

onBeforeSelect

index, row

在用户选择一行之前触发,返回false则取消该动作。(该事件自1.4.1版开始可用)

onSelect

index, row

在用户选择一行的时候触发,参数包括:index:选择的行的索引值,索引从0开始。row:对应于取消选择行的记录。

onBeforeUnselect

index, row

在用户取消选择一行之前触发,返回false则取消该动作。(该事件自1.4.1版开始可用)

onUnselect

index, row

在用户取消选择一行的时候触发,参数包括:index:选择的行的索引值,索引从0开始。row:对应于取消选择行的记录。

onSelectAll

rows

在用户选择所有行的时候触发。

onUnselectAll

rows

在用户取消选择所有行的时候触发。

onBeforeCheck

index, row

在用户校验一行之前触发,返回false则取消该动作。(该事件自1.4.1版开始可用)

onCheck

index, row

在用户勾选一行的时候触发,参数包括:index:选中的行索引,索引从0开始。row:对应于所选行的记录。(该事件自1.3版开始可用)

onBeforeUncheck

index, row

在用户取消校验一行之前触发,返回false则取消该动作。(该事件自1.4.1版开始可用)

onUncheck

index, row

在用户取消勾选一行的时候触发,参数包括:index:选中的行索引,索引从0开始。row:对应于取消勾选行的记录。(该事件自1.3版开始可用)

onCheckAll

rows

在用户勾选所有行的时候触发。(该事件自1.3版开始可用)

onUncheckAll

rows

在用户取消勾选所有行的时候触发。(该事件自1.3版开始可用)

onBeforeEdit

index, row

在用户开始编辑一行的时候触发,参数包括:index:编辑行的索引,索引从0开始。row:对应于编辑行的记录。

onBeginEdit

index, row

在一行进入编辑模式的时候触发。(该事件自1.3.6版开始可用)

onEndEdit

index, row, changes

在完成编辑但编辑器还没有销毁之前触发。(该事件自1.3.6版开始可用)

onAfterEdit

index, row, changes

在用户完成编辑一行的时候触发,参数包括:index:编辑行的索引,索引从0开始。row:对应于完成编辑的行的记录。changes:更改后的字段(键)/值对。

onCancelEdit

index,row

在用户取消编辑一行的时候触发,参数包括:index:编辑行的索引,索引从0开始。row:对应于编辑行的记录。

onHeaderContextMenu

e, field

在鼠标右击DataGrid表格头的时候触发。

onRowContextMenu

e, index, row

在鼠标右击一行记录的时候触发。

5.datagrid的方法

5.1datagrid的方法名称全搜罗

 
 

方法名

参数

描述

options

none

返回属性对象。

getPager

none

返回页面对象。

getPanel

none

返回面板对象。

getColumnFields

frozen

返回列字段。如果设置了frozen属性为true,将返回固定列的字段名。代码示例:var opts = $('#dg').datagrid('getColumnFields');               // 获取解冻列var opts = $('#dg').datagrid('getColumnFields', true);       // 获取冻结列

getColumnOption

field

返回指定列属性。

resize

param

做调整和布局。

load

param

加载和显示第一页的所有行。如果指定了'param',它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询,通过调用这个方法从服务器加载新数据。

reload

param

重载行。等同于'load'方法,但是它将保持在当前页。

reloadFooter

footer

重载页脚行。代码示例:// 更新页脚行的值并刷新var rows = $('#dg').datagrid('getFooterRows');rows[0]['name'] = 'new name';rows[0]['salary'] = 60000;$('#dg').datagrid('reloadFooter');// 更新页脚行并载入新数据

loading

none

显示载入状态。

loaded

none

隐藏载入状态。

fitColumns

none

使列自动展开/收缩到合适的DataGrid宽度。

fixColumnSize

field

固定列大小。如果'field'参数未配置,所有列大小将都是固定的。代码示例:$('#dg').datagrid('fixColumnSize', 'name');        // 固定'name'列大小$('#dg').datagrid('fixColumnSize');                    // 固定所有列大小

fixRowHeight

index

固定指定列高度。如果'index'参数未配置,所有行高度都是固定的。

freezeRow

index

冻结指定行,当DataGrid表格向下滚动的时候始终保持被冻结的行显示在顶部。(该方法自1.3.2版开始可用)

autoSizeColumn

field

自动调整列宽度以适应内容。(该方法自1.3版开始可用)

loadData

data

加载本地数据,旧的行将被移除。

getData

none

返回加载完毕后的数据。

getRows

none

返回当前页的所有行。

getFooterRows

none

返回页脚行。

getRowIndex

row

返回指定行的索引号,该行的参数可以是一行记录或一个ID字段值。

getChecked

none

在复选框呗选中的时候返回所有行。(该方法自1.3版开始可用)

getSelected

none

返回第一个被选中的行或如果没有选中的行则返回null。

getSelections

none

返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。

clearSelections

none

清除所有选择的行。

clearChecked

none

清除所有勾选的行。(该方法自1.3.2版开始可用)

scrollTo

index

滚动到指定的行。(该方法自1.3.3版开始可用)

gotoPage

param

跳转到指定页。 (该方法自1.4.4版开始可用) 代码示例:// 跳转到第3页$('#dg').datagrid('gotoPage', 3);// 跳转到第3页并执行回调函数$('#dg').datagrid('gotoPage', { page: 3, callback: function(page){ console.log(page) }})

highlightRow

index

高亮一行。(该方法自1.3.3版开始可用)

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:编辑器类型,比如:'text','combobox','datebox'等。

getEditor

options

获取指定编辑器,options包含2个属性:index:行索引。field:字段名称。代码示例:// 获取日期输入框编辑器并更改它的值var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});$(ed.target).datebox('setValue', '5/4/2012');

refreshRow

index

刷新行。

validateRow

index

验证指定的行,当验证有效的时候返回true。

updateRow

param

更新指定行,参数包含下列属性:index:执行更新操作的行索引。row:更新行的新数据。代码示例:$('#dg').datagrid('updateRow',{ index: 2, row: { name: '新名称', note: '新消息' }});

appendRow

row

追加一个新行。新行将被添加到最后的位置。

insertRow

param

插入一个新行,参数包括一下属性:index:要插入的行索引,如果该索引值未定义,则追加新行。row:行数据。代码示例:$('#dg').datagrid('appendRow',{ name: '新名称', age: 30, note: '新消息'});

deleteRow

index

删除行。

getChanges

type

从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行,可以使用的值有:inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。

acceptChanges

none

提交所有从加载或者上一次调用acceptChanges函数后更改的数据。

rejectChanges

none

回滚所有从创建或者上一次调用acceptChanges函数后更改的数据。

mergeCells

options

合并单元格,options包含以下属性:index:行索引。field:字段名称。rowspan:合并的行数。colspan:合并的列数。

showColumn

field

显示指定的列。

hideColumn

field

隐藏指定的列。

sort

param

排序datagrid表格。(该方法自1.3.6版开始可用)代码示例:$('#dg').datagrid('sort', 'itemid');    // 排序一个列$('#dg').datagrid('sort', {         // 指定了排序顺序的列 sortName: 'productid', sortOrder: 'desc'});

本文网址:https://www.wyxxw.cn/blog-detail-1-5-938.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:https://www.cnblogs.com/bootstrapResolve/p/8422411.html 。 转载人:momo