ligergrid的使用
时间: 2023-07-11 21:44:19 浏览: 62
LigerGrid 是一款基于 jQuery 的表格插件,可以帮助我们快速创建具有排序、筛选、分页、编辑等功能的表格。
使用 LigerGrid 需要以下步骤:
1. 引入必要的 CSS 和 JS 文件;
2. 定义 HTML 结构,包括表格和分页控件等;
3. 初始化 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 }
],
pageSize: 10,
toolbar: {
items: [
{ text: '添加', click: addButton },
{ line: true },
{ text: '删除', click: deleteButton }
]
}
});
});
function addButton() {
alert('添加');
}
function deleteButton() {
alert('删除');
}
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
```
以上示例中,我们引入了 LigerUI 的 CSS 和 JS 文件,定义了一个表格容器 `#grid`,并在 JavaScript 中初始化了 LigerGrid。其中参数 `url` 指定了数据源,`columns` 定义了表格列,`pageSize` 指定了分页大小,`toolbar` 定义了工具栏内容。此外,我们还定义了两个工具栏按钮的点击事件。
希望能对你有所帮助。
相关推荐
![](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)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)