• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >bootstrap > bootstrapTable 扩展后台合计列

bootstrapTable 扩展后台合计列

作者:weixin_42776979 字体:[增加 减小] 来源:互联网 时间:2018-11-02

本文主要包含bootstrapTable 扩展后台合计列等相关知识,weixin_42776979希望在学习及工作中可以帮助到您

由于bootstrap table 不提供 后台计算合计列 所以需要扩展,以下是简单的扩展。

1、再load方法里 增加 orlData属性

 BootstrapTable.prototype.load = function (data) {
        var fixedScroll = false;
        // junlei.shan add
        this.options.orlData = data;
        // junlei.shan end 
        // #431: support pagination
        if (this.options.sidePagination === 'server') {
            this.options.totalRows = data[this.options.totalField];
            fixedScroll = data.fixedScroll;
            data = data[this.options.dataField];
        } else if (!$.isArray(data)) { // support fixedScroll
            fixedScroll = data.fixedScroll;
            data = data.data;
        }
        
        this.initData(data);
        this.initSearch();
        this.initPagination();
        this.initBody(fixedScroll);
    };

由于插件只保存 data.data 的数据 ,增加的data.footer 没有保存下来 ,所以需要增加一个 orlData属性,存放后台返回的数据。

2、增加 getOrlData 方法

//junlei.shan add 
    BootstrapTable.prototype.getOrlData = function () {
    	return this.options.orlData;
    };
    //junlei.shan end

增加该方法,用于获取数据。

3、再 resetFooter方法中增加调用 getOrlData()

 BootstrapTable.prototype.resetFooter = function () {
        var that = this,
            data = that.getData(),
            html = [];
        //junlei.shan add
        var orlData = that.getOrlData();
        //junlei.shan end

4、元素初始化的时候 根据判断是否执行新的逻辑

// junlei.shan modify
            if(orlData&&orlData.footer){
            	if(column.footerFormatter){
            		html.push(calculateObjectValue(column, column.footerFormatter, [data,rolData.footer],' ') || ' ');
            	}else{
            		html.push(orlData.footer[column.field]);
            	}
            }else{
            	html.push(calculateObjectValue(column, column.footerFormatter, [data], ' ') || ' ');
            }
            //junlei.shan modify end 

如果 原始数据不存在 orlData 就用老的方式,如果存在判断是否需要格式化方法,都不需要直接 获取值现实。

总结:

这个方法可以实现后台计算合计列,要求field必须一致,并且footer是个对象不是数组。

如果想支持多个合计列,需要继续扩展。

数据格式如下:

{data:[{
        uid: "7791",
        name: "keenleung1",
        age: "26",
        height: "165",
        description: "描述"
    },
    {
        uid: "7792",
        name: "keenleung2",
        age: "26",
        height: "165",
        description: "描述"
    },
    {
        uid: "7793",
        name: "keenleung3",
        age: "26",
        height: "165",
        description: "描述"
    },
    {
        uid: "7794",
        name: "keenleung4",
        age: "26",
        height: "165",
        description: "描述"
    },
    {
        uid: "7795",
        name: "keenleung5",
        age: "26",
        height: "165",
        description: "描述"
    },
],footer:{

uid:"合计",

name:"wu",

age:"123",

height:12321421,

description:"ss"}
    };

您可能想查找下面的文章:

相关文章

  • 2017-05-30Bootstrap导航条可点击和鼠标悬停显示下拉菜单
  • 2017-05-30Bootstrap每天必学之级联下拉菜单
  • 2017-05-30Bootstrap入门书籍之(四)菜单、按钮及导航
  • 2017-05-30基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
  • 2017-05-22Bootstrap 附加导航(Affix)插件
  • 2017-05-30BootStrap响应式导航条实例介绍
  • 2017-05-22Bootstrap 模态框(Modal)插件
  • 2017-05-30Bootstrap框架实现广告轮播效果
  • 2017-05-30JS表格组件神器bootstrap table详解(强化版)
  • 2017-05-30Bootstrap导航栏各元素操作方法(表单、按钮、文本)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Bootstrap实现下拉菜单效果
    • 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
    • Bootstrap 教程
    • 第一次接触神奇的Bootstrap基础排版
    • Bootstrap图片轮播组件使用实例解析
    • Bootstrap CSS编码规范
    • 基于Bootstrap实现图片轮播效果
    • Bootstrap按钮下拉菜单组件详解
    • 全面解析Bootstrap图片轮播效果
    • bootstrap table复杂操作代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有