easyUI的table表格怎么实现将每一行中某几列数据相加放入另一列
2015-04-09 09:05
609 查看
首先是页面中求和的代码 ,放在function onLoadSuccess() 中
<script type="text/javascript">
function onLoadSuccess(data) {
var rows = $('#dg').datagrid('getRows');//获取当前的数据行,dg为table的id
for (var i = 0; i < rows.length; i++) {
rows[i]['total'] = rows[i]['one'] + rows[i]['two'] + rows[i]['three']
+ rows[i]['four'] + rows[i]['five'] + rows[i]['six']
+ rows[i]['seven'] + rows[i]['eight'] + rows[i]['nine']
+ rows[i]['ten'] + rows[i]['eleven'] + rows[i]['twlve'] + rows[i]['returns'];
$('#dg').datagrid('refreshRow', i); //刷新计算后的每一行
}
//将field为'productid'的一列前5行单元格合并为一个单元格,后5行合并为一个单元格
var merges = [{
index: 0, //表示从第一行开始
rowspan: 5 //所跨的行数
}, {
index: 5, //表示从第6行开始
rowspan: 5 //所跨的行数
}];
for (var i = 0; i < merges.length; i++) {
$(this).datagrid('mergeCells', {
index: merges[i].index,
field: 'productid',
rowspan: merges[i].rowspan
});
}
}
</script>
这是我们操作的table,当然里面的数据要自己给,数据类型为实数,不能是字符型的,否则会计算出错
<table id="dg" toolbar="#toolbar" class="easyui-datagrid" pagination="true" data-options="onLoadSuccess: onLoadSuccess ">
<thead>
<tr>
<th data-options="field:'productid',">招生结业</th>
<th data-options="field:'year',width:60">年份</th>
<th data-options="field:'total',width:60">合计</th>
<th data-options="field:'one',width:60">一月</th>
<th data-options="field:'two',width:60">二月</th>
<th data-options="field:'three',width:60">三月</th>
<th data-options="field:'four',width:60">四月</th>
<th data-options="field:'five',width:60">五月</th>
<th data-options="field:'six',width:60">六月</th>
<th data-options="field:'seven',width:60">七月</th>
<th data-options="field:'eight',width:60">八月</th>
<th data-options="field:'nine',width:60">九月</th>
<th data-options="field:'ten',width:60">十月</th>
<th data-options="field:'eleven',width:60">十一月</th>
<th data-options="field:'twlve',width:60">十二月</th>
<th data-options="field:'returns',width:60">退费</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function onLoadSuccess(data) {
var rows = $('#dg').datagrid('getRows');//获取当前的数据行,dg为table的id
for (var i = 0; i < rows.length; i++) {
rows[i]['total'] = rows[i]['one'] + rows[i]['two'] + rows[i]['three']
+ rows[i]['four'] + rows[i]['five'] + rows[i]['six']
+ rows[i]['seven'] + rows[i]['eight'] + rows[i]['nine']
+ rows[i]['ten'] + rows[i]['eleven'] + rows[i]['twlve'] + rows[i]['returns'];
$('#dg').datagrid('refreshRow', i); //刷新计算后的每一行
}
//将field为'productid'的一列前5行单元格合并为一个单元格,后5行合并为一个单元格
var merges = [{
index: 0, //表示从第一行开始
rowspan: 5 //所跨的行数
}, {
index: 5, //表示从第6行开始
rowspan: 5 //所跨的行数
}];
for (var i = 0; i < merges.length; i++) {
$(this).datagrid('mergeCells', {
index: merges[i].index,
field: 'productid',
rowspan: merges[i].rowspan
});
}
}
</script>
这是我们操作的table,当然里面的数据要自己给,数据类型为实数,不能是字符型的,否则会计算出错
<table id="dg" toolbar="#toolbar" class="easyui-datagrid" pagination="true" data-options="onLoadSuccess: onLoadSuccess ">
<thead>
<tr>
<th data-options="field:'productid',">招生结业</th>
<th data-options="field:'year',width:60">年份</th>
<th data-options="field:'total',width:60">合计</th>
<th data-options="field:'one',width:60">一月</th>
<th data-options="field:'two',width:60">二月</th>
<th data-options="field:'three',width:60">三月</th>
<th data-options="field:'four',width:60">四月</th>
<th data-options="field:'five',width:60">五月</th>
<th data-options="field:'six',width:60">六月</th>
<th data-options="field:'seven',width:60">七月</th>
<th data-options="field:'eight',width:60">八月</th>
<th data-options="field:'nine',width:60">九月</th>
<th data-options="field:'ten',width:60">十月</th>
<th data-options="field:'eleven',width:60">十一月</th>
<th data-options="field:'twlve',width:60">十二月</th>
<th data-options="field:'returns',width:60">退费</th>
</tr>
</thead>
</table>
相关文章推荐
- easyUI的table表格怎么实现将某一列数据之和放入新追加的一行中
- jQuery实现清空table表格除首行外的所有数据
- 在siverlight 的datagrid控件中实现每一行数据后增加一列(操作),此列含编辑、删除、详细等操作
- 动态的把数据显示在table中,点击某一行的删除按钮实现该行的删除(通过ajax实现页面的无刷新加载)
- jQuery实现清空table表格除首行外的所有数据
- Easyui笔记4:实现表格内combobox数据的动态切换(getEditor的使用)
- jQuery实现清空table表格除首行外的所有数据
- 有一个table表格,选中某一行后,点击“查看(button)”按钮可以实现对该行内容的显示
- jface databinding:label provider 实现多列表格(Table)数据绑定的两个途径
- mysql插入一行数据,其中一个值为当前该列的最大值,怎么实现?
- Easyui笔记4:实现表格内combobox数据的动态切换(getEditor的使用)
- JS实现table表格数据排序(可支持动态数据+分页效果)
- JS实现table表格数据排序功能(可支持动态数据+分页效果)
- 有一个table表格,选中某一行后,点击“查看(button)”按钮可以实现对该行内容的显示
- jQuery实现清空table表格除首行以外的数据
- bootstrap-table实现两个表格之间数据的传递,表格添加行删除行功能
- 黑马程序员之HTML学习笔记:rowspan属性实现HTML表格中一列跨越多行,colspan 属性实现HTML表格中一行跨越多列
- Java删除txt中文件中某一行数据 ,怎么实现?
- Easyui笔记4:实现表格内combobox数据的动态切换(getEditor的使用)
- Easyui笔记4:实现表格内combobox数据的动态切换(getEditor的使用)