zoukankan      html  css  js  c++  java
  • bootstrap table 列求和

    <div class="modal fade in" id="_modalDialog" tabindex="1" role="dialog" aria-labelledby="modalLabel"
         style="display: block;"> 
    <div class="modal-dialog" aria-hidden="true" style="1520px;height:600px">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close"
                    type="button">关闭</button>
                <h4 class="modal-title">预算调整预览</h4>
            </div>
            <div class="col-lg-5">  
                <div class="text-left"><font style="color:red "><h4>调出金额合计:<span id="totalId"></span></h4></font></div>
            </div>
                <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <section class="panel">
                                    <table class="table table-hover" id="oaTableId"></table>
                                </section>
                            </div>
                        </div>
                </div>
        </div>
    </div>
    </div> 
    <script th:inline="javascript">
        /*<![CDATA[*/
            //设置查询条件,把分页,查询条件,排序等信息拼接成一个models字符串对象传递至后台
        //var batchId=[[${batchId}]];
        $(function(){
            //初始化Table
            $('#oaTableId').bootstrapTable({   
                                url : 'taskAgentsController/getAdjustDetailList.json', //请求后台的URL(*)
                                method: 'GET', 
                                sidePagination : "client", //分页方式:client客户端分页,server服务端分页(*)
                                pagination : true, //是否显示分页(*)
                                queryParams : queryParams, //分页
                                pageSize : 10, //每页显示的记录数
                                pageNumber : 1, //当前第几页
                                pageList : [ 10, 25, 50, 100 ], //记录数可选列表
                                //showFooter: true,  方式一列求和
                                responseHandler: function (res) {
                                    return res.data;
                                },
                      //方式二列求和 onLoadSuccess:
    function (res) { //加载成功时执行 var sum_1 = 0; for (var i=0;i<res.length;i++) { sum_1 +=parseFloat(res[i].exportMoney); } document.getElementById("totalId").innerText=sum_1.toFixed(2)+" RMB";//toFixed(2),保留2位小数,避免js中小数相加小数点后面多出很多位 }, columns : [ {title: '调整类型', field: 'adjustType', visible: true, align: 'center', valign: 'middle'}, {title: '申请日期', field: 'applyDate', visible: true, align: 'center', valign: 'middle'}, {title: 'OA流程编号', field: 'processCode', visible: true, align: 'center', valign: 'middle'}, {title: '申请组织', field: 'applyOrganization', visible: true, align: 'center', valign: 'middle'}, {title: '申请部门', field: 'applyDepartment', visible: true, align: 'center', valign: 'middle'}, {title: '是否涉及人力成本', field: 'flag', visible: true, align: 'center', valign: 'middle'}, {title: '调出组织', field: 'exportOrganization', visible: true, align: 'center', valign: 'middle'}, {title: '调出部门', field: 'exportDepartment', visible: true, align: 'center', valign: 'middle'}, {title: '调出科目', field: 'exportSubject', visible: true, align: 'center', valign: 'middle'}, {title: '调出月份', field: 'exportMonth', visible: true, align: 'center', valign: 'middle'}, {title: '调出金额', field: 'exportMoney', visible: true, align: 'center', valign: 'middle' /* footerFormatter: function (value) { // showFooter: true, 非常重要 var count = 0; for (var i in value) { count += parseFloat(value[i].exportMoney); } alert(count) return count; } */ }, {title: '费控余额', field: 'costControl', visible: true, align: 'center', valign: 'middle'}, {title: '调入组织', field: 'importOrganization', visible: true, align: 'center', valign: 'middle'}, {title: '调入部门', field: 'importDepartment', visible: true, align: 'center', valign: 'middle'}, {title: '调入科目', field: 'importSubject', visible: true, align: 'center', valign: 'middle'}, {title: '调入月份', field: 'importMonth', visible: true, align: 'center', valign: 'middle'}, {title: '调入金额', field: 'importMoney', visible: true, align: 'center', valign: 'middle'}, {title: '调整原因', field: 'adjustReason', visible: true, align: 'center', valign: 'middle'} ] }); }); //参数 function queryParams(params) { var batchId=[[${batchId}]]; var param={"batchId":batchId}; return param; } /*]]>*/ </script>

    方式二效果展示:

  • 相关阅读:
    网络编程之UDP
    深入浅出Object.defineProperty()
    Vue知识点总结
    JS基础-垃圾回收机制与内存泄漏的优化
    JS基础-作用域
    ES6知识点
    JS基础-this
    JS基础-事件循环机制
    JS基础-事件
    JS基础-事件队列
  • 原文地址:https://www.cnblogs.com/Steven5007/p/9919552.html
Copyright © 2011-2022 走看看