jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格
简介
jQuery EasyUI 是一个强大的、易于使用的UI库，它基于jQuery框架，并提供了诸如datagrid、tree、tabs、dialog等等常用的控件。数据网格是jQuery EasyUI中最常用的控件之一，它可以用于显示和编辑表格数据。
属性网格是一个特殊的数据网格，它可以像Excel一样编辑表格数据。它将每一行作为一个对象，每一列作为对象的属性，你可以在每个单元格编辑数据，添加新的行或删除现有的行。在编写本文档的时候，jQuery EasyUI最新版本是1.9.25。
创建属性网格
创建属性网格需要使用datagrid控件，通过设置data-options参数指定额外的属性即可。
HTML结构
在HTML中，我们需要准备一个最基本的datagrid结构，如下所示：
<table id="dg"></table>
然后，我们需要在JavaScript中使用datagrid方法将其转换为一个属性网格。为了实现这一点，我们需要使用数据源和列定义来初始化datagrid。数据源是我们要在datagrid中显示的数据，列定义是datagrid中的列头和列属性的定义。
数据源
数据源可以是一个包含对象的数组或一个指向服务器端的URL地址。如果我们使用一个数组，可以将其直接传递给datagrid的data选项。如下所示：
var data = [
{ id: 1, name: 'John', age: 22 },
{ id: 2, name: 'Mike', age: 27 },
{ id: 3, name: 'Jane', age: 20 }
];
$('#dg').datagrid({
data: data
});
如果我们使用一个URL地址，则需要设置url选项。datagrid将从服务器获取数据。如下所示：
$('#dg').datagrid({
url: '/data.json'
});
列定义
列定义可以使用一个对象数组来定义。每个对象包含以下属性：field、title、width和editor。其中field属性表示列的属性名称，title属性表示列头的文本，width属性表示列的宽度，editor属性表示列的编辑控件。如下所示：
var columns = [
{ field: 'id', title: 'ID', width: 50 },
{ field: 'name', title: 'Name', width: 100, editor: 'text' },
{ field: 'age', title: 'Age', width: 50, editor: 'numberbox' }
];
$('#dg').datagrid({
columns: columns
});
目前EasyUI支持多种编辑控件，包括textbox、numberbox、combobox、datebox、validatebox、searchbox等。你可以在官方文档中找到有关编辑控件的更详细信息。
其他设置
接下来，我们需要添加一些其他的设置，如fit、toolbar和rownumbers等。如下所示：
$('#dg').datagrid({
fit: true,
toolbar: '#toolbar',
rownumbers: true,
singleSelect: true,
selectOnCheck: true,
checkOnSelect: true
});
以上设置中，fit选项将属性网格自适应父容器尺寸，toolbar选项将属性网格和一个工具栏面板关联起来，rownumbers选项将自动为每行添加行号。
完整代码
现在让我们把以上代码组合起来，完整代码如下所示：
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addRow()">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeRow()">Remove</a>
</div>
<table id="dg"></table>
<script>
function addRow() {
$('#dg').datagrid('appendRow', { id: 0, name: '', age: 0 });
}
function removeRow() {
var row = $('#dg').datagrid('getSelected');
if (row) {
var index = $('#dg').datagrid('getRowIndex', row);
$('#dg').datagrid('deleteRow', index);
}
}
var columns = [
{ field: 'id', title: 'ID', width: 50 },
{ field: 'name', title: 'Name', width: 100, editor: 'text' },
{ field: 'age', title: 'Age', width: 50, editor: 'numberbox' }
];
var data = [
{ id: 1, name: 'John', age: 22 },
{ id: 2, name: 'Mike', age: 27 },
{ id: 3, name: 'Jane', age: 20 }
];
$('#dg').datagrid({
data: data,
columns: columns,
fit: true,
toolbar: '#toolbar',
rownumbers: true,
singleSelect: true,
selectOnCheck: true,
checkOnSelect: true
});
</script>
总结
属性网格是一个强大的数据表格控件，它将列视为对象的属性，将行视为对象的实例。在本文档中，我们通过使用jQuery EasyUI中的datagrid控件，创建了一个简单的属性网格。我们使用了一个数组作为数据源，并定义了列头和编辑控件。除此之外，我们还添加了工具栏、行号和自适应父容器等其他设置。这使得我们的属性网格更容易与用户交互，提高了用户体验。