前端使用easyui datagrid 增加一个复选框,和一个合计行,根据选中的条数,自动改变合计的数据
时间: 2024-06-08 15:10:04 浏览: 226
你可以按照以下步骤实现:
1. 在easyui datagrid中添加一个复选框列,可以使用“checkbox”属性来实现:
```html
<th data-options="field:'ck',checkbox:true"></th>
```
2. 在datagrid的底部添加一个合计行:
```html
<div id="dg" class="easyui-datagrid" style="width:100%;height:300px"
data-options="
url:'datagrid_data.json',
singleSelect:true,
rownumbers:true,
pagination:true,
fitColumns:true,
toolbar:'#tb',
onLoadSuccess:calcTotal
">
<thead>
<tr>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">Price</th>
<th data-options="field:'quantity'">Quantity</th>
<th data-options="field:'amount'">Amount</th>
<th data-options="field:'ck',checkbox:true"></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" style="text-align:right">Total:</td>
<td id="totalAmount"></td>
<td></td>
</tr>
</tfoot>
</div>
```
3. 编写一个JavaScript函数来计算选中行的合计值,并更新合计行的数据:
```javascript
function calcTotal() {
var rows = $('#dg').datagrid('getSelections');
var total = 0;
for (var i = 0; i < rows.length; i++) {
total += rows[i].amount;
}
$('#totalAmount').text(total);
}
```
4. 在datagrid的属性中添加“onLoadSuccess”事件,将它绑定到上一步编写的函数上,这样每次加载数据或选中行时都会重新计算合计值并更新合计行的数据。
```javascript
onLoadSuccess:calcTotal
```
这样就可以实现在easyui datagrid中添加一个复选框和合计行,并根据选中的行数自动改变合计值了。
阅读全文