您的位置:首页 > 产品设计 > UI/UE

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  easyui
相关文章推荐