easyui的datagrid自定义一列并且显示数据数量
时间: 2023-07-27 13:05:58 浏览: 77
可以通过easyui的datagrid的columns属性中添加一个自定义列来实现自定义列,使用formatter属性来格式化该列显示的内容。同时,使用datagrid的toolbar属性来添加一个工具栏,可以在工具栏上添加一个统计数据数量的按钮。
示例代码如下:
```html
<table id="datagrid"></table>
<script>
$('#datagrid').datagrid({
url: 'data.json',
columns: [{
field: 'name',
title: '姓名',
width: 100
}, {
field: 'age',
title: '年龄',
width: 100
}, {
title: '自定义列',
formatter: function(value, row, index) {
// 这里可以根据row中的数据来格式化该列的显示内容
return '<div>自定义内容</div>';
}
}],
toolbar: [{
text: '统计数据数量',
iconCls: 'icon-sum',
handler: function() {
var total = $('#datagrid').datagrid('getData').total;
alert('数据数量:' + total);
}
}]
});
</script>
```
以上代码中,我们定义了一个datagrid,并指定了数据源的url,同时在columns属性中添加了3列,其中第3列是我们自定义的列,使用formatter属性来格式化该列的内容。在toolbar属性中添加了一个工具栏,其中包含一个用于统计数据数量的按钮,点击该按钮可以弹出一个提示框,显示datagrid中总共的数据数量。