LigerGrid怎么动态修改配置的列
时间: 2024-05-16 14:16:09 浏览: 10
LigerGrid 是一个基于 jQuery 的表格插件,支持动态列配置。你可以通过以下步骤动态修改 LigerGrid 的列配置:
1. 获取 LigerGrid 对象
```javascript
var grid = $("#grid").ligerGetGridManager();
```
2. 获取当前的列配置
```javascript
var columns = grid.getColumns();
```
3. 修改列配置
```javascript
// 找到需要修改的列
var column = columns.find(function (item) {
return item.name == "columnName";
});
// 修改列的属性
column.display = "新的列名";
column.width = 200;
// 更新列配置
grid.set("columns", columns);
```
4. 刷新表格
```javascript
grid.reload();
```
通过以上步骤,你就可以动态修改 LigerGrid 的列配置了。注意,修改列配置后,需要调用 `grid.reload()` 方法刷新表格才能看到修改后的效果。
相关问题
ligergrid表格
LigerGrid是一个基于jQuery的插件,用于创建和管理网格(表格)数据。它提供了丰富的功能,包括分页、排序、过滤、分组、编辑、导出等,可以帮助开发者更方便地处理网格数据。
LigerGrid的使用非常简单,只需在页面中引入相关的js和css文件,并在JavaScript代码中调用相关的方法即可。例如,创建一个简单的网格可以使用以下代码:
```
$("#grid").ligerGrid({
columns: [
{ display: '姓名', name: 'name', width: 100 },
{ display: '年龄', name: 'age', width: 100 },
{ display: '性别', name: 'gender', width: 100 }
],
data: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' }
]
});
```
这段代码创建了一个包含3列数据的网格,每列分别为姓名、年龄和性别,同时提供了3行数据用于展示。可以看到,使用LigerGrid非常方便,只需要少量的代码就可以创建出一个完整的网格。
除此之外,LigerGrid还提供了很多其他的功能,如分页、排序、过滤、分组、编辑、导出等,可以根据实际需求进行配置和使用。
ligergrid的使用
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` 定义了工具栏内容。此外,我们还定义了两个工具栏按钮的点击事件。
希望能对你有所帮助。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![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)
![zul](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)