ligergrid的表单
时间: 2023-08-30 20:07:22 浏览: 55
LigerGrid 提供了内置的表单编辑器,可以方便地对表格进行数据编辑。以下是一个简单的 LigerGrid 表单编辑示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LigerGrid Demo</title>
<link rel="stylesheet" href="ligerUI/skins/Aqua/css/ligerui-all.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="ligerUI/js/ligerui.all.js"></script>
<script>
$(function () {
$('#grid').ligerGrid({
url: 'data.php',
columns: [
{ display: 'ID', name: 'id', width: 50 },
{ display: '姓名', name: 'name', width: 100 },
{ display: '年龄', name: 'age', width: 50, editor: { type: 'int' } }
],
pageSize: 10,
toolbar: {
items: [
{ text: '添加', click: addButton },
{ line: true },
{ text: '删除', click: deleteButton }
]
},
onBeforeSubmitEdit: function (data) {
console.log('提交编辑前的数据:', data);
return true;
},
onAfterSubmitEdit: function (data) {
console.log('提交编辑后的数据:', data);
}
});
});
function addButton() {
var manager = $('#grid').ligerGetGridManager();
manager.addRow();
}
function deleteButton() {
var manager = $('#grid').ligerGetGridManager();
var selected = manager.getSelectedRows();
if (selected.length === 0) {
alert('请选择要删除的数据!');
return;
}
manager.deleteSelectedRow();
}
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
```
在以上示例中,我们通过在列定义中添加 `editor` 属性,来指定该列的编辑器类型。例如,第三列的编辑器类型为 `int`,表示编辑器为整数类型。LigerGrid 内置了多种编辑器类型,如文本框、下拉列表、日期选择等,可以根据实际需求选择使用。
另外,我们还可以通过监听 `onBeforeSubmitEdit` 和 `onAfterSubmitEdit` 事件,来在数据提交前后进行一些处理。例如,在 `onBeforeSubmitEdit` 事件中可以打印提交前的数据,或者进行一些校验;在 `onAfterSubmitEdit` 事件中可以处理提交后的数据,如重新加载数据等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)