如何高效使用[easyUI]datagrid组件？

本文共计268个文字，预计阅读时间需要2分钟。

这里使用js方式选择id为dg的table元素：

javascriptvar table=document.getElementById(dg);

这里使用js方式:

<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

传入参数:

传入的数据是json类型,里面是List,自动会读取里面数据

The data to be loaded. Available since version 1.3.2.

Code example:

$('#contentTables').datagrid("loadData",{"total":1,"rows": List<fooModel>});

添加行:

$('#datagrid').datagrid('appendRow', csvInfos[0]);

显然可见,如果直接展示数据,则使用loadData,但是传入的数据是对象List

但是添加数据,由于是添加一行,所以每次传入的反而是一个对象

参考:

1.www.jeasyui.com/documentation/datagrid.php

点击:

$('#datagrid').datagrid({
onSelect:function(rowIndex, rowData){
console.log('row data: ' + rowData.filePath)
download(rowData.filePath)
}
});

rowData可以获取行内数据