精华内容
下载资源
问答
  • layui自定义合计行的数值

    千次阅读 2020-09-18 13:26:58
    大家都知道layui官网上的合计行totalRow: true是自动算出本列共多少的 这种实现就很简单,只需要在render里开启合计行totalRow: true,随后在你想定义的字段cols里定义文本totalRowText: ‘合计’,以及合计数...

    大家都知道layui官网上的合计行totalRow: true是自动算出本列共多少的

    这种实现就很简单,只需要在render里开启合计行totalRow: true,随后在你想定义的字段cols里定义文本totalRowText: ‘合计’,以及合计数totalRow: true(在哪一个列里定义,就计算哪一个列的值)

    table.render({
        elem: '#test'
        ,url:'/test/table/demo1.json' //你自己的路径
        ,toolbar: '#toolbarDemo'
        ,title: '用户数据表'
        ,totalRow: true
        ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
          ,{field:'username', title:'用户名', width:120, edit: 'text'}
          ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
            return '<em>'+ res.email +'</em>'
          }}
          ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
          ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
          ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
          ,{field:'sign', title:'签名'}
          ,{field:'city', title:'城市', width:100}
          ,{field:'ip', title:'IP', width:120}
          ,{field:'joinTime', title:'加入时间', width:120}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]]
      });
    

    在这里插入图片描述

    现在碰到一个需求,需要显示合计,然而合计的算法是另外的(自定义)

    首先从controller中返回自己定义的合计行数值,代码忽略,你们只看返回结果

    @RequestMapping("/caiGougetInfo")
        @ResponseBody
        public Map CaiGougetInfo(Integer id) {
            Map map = new HashMap();
            List<Reconciliation> list = recService.caiGougetInfo(id);
            //计算入库金额
            Double rkje = 0.0;
            //计算退料金额
            Double tlje = 0.0;
            //计算厂商扣款金额
            Double cskkje = 0.0;
            //计算对账总金额
            Double dzzje = 0.0;
            for(Reconciliation r :list){
                switch (r.getType()){
                    case 1:
                        rkje+=r.getAmount();
                        break;
                    case 2:
                        tlje+=r.getAmount();
                        break;
                    case 3:
                        cskkje+=r.getAmount();
                        break;
                }
            }
            dzzje = rkje-tlje-cskkje;
            map.put("code",0);
            map.put("msg","成功");
            map.put("data",list);
            map.put("rkje",rkje);
            map.put("tlje",tlje);
            map.put("cskkje",cskkje);
            map.put("dzzje",dzzje);
            return map;
        }
    

    后端返回的数据,渲染到layui前端

    var tableResult = table.render({
            elem: '#' + 你的表格id,
            url: '你的访问接口',
            height: "full-100",
            cellMinWidth: 100,
             totalRow: true,
            cols: [[
                {field: 'type', title: '类型',totalRowText: '入库金额:'},
                {field: 'itemNo', sort: true, title: '料号'},
                {field: 'partName', sort: true, title: '品名',totalRowText: '退料金额:'},
                {field: 'specification', sort: true, title: '规格'},
                {field: 'unit', sort: true, title: '单位',totalRowText: '厂商扣款金额:'},
                {field: 'qty', sort: true, title: '数量'},
                {field: 'unitPrice', sort: true, title: '含税单价',totalRowText: '对账总金额:'},
                {field: 'amount', sort: true, title: '含税总价'},
                {field: 'supplierNumber', sort: true, title: '供应商编号'},
                {field: 'abbreviation', sort: true, title: '供应商简称'},
                 {field: 'year', sort: true,hide:true, title: '年份'},
                {field: 'month', sort: true,hide:true, title: '月份'},
            ]],
            //主要利用回调渲染
            done: function(res, curr, count){
            	//然后把值写上去td[data-field="itemNo" 定义在哪个列后显示
                this.elem.next().find('.layui-table-total td[data-field="itemNo"] .layui-table-		cell').text(res.rkje.toFixed(2));
                this.elem.next().find('.layui-table-total td[data-field="specification"] .layui-table-cell').text(res.tlje.toFixed(2));
                this.elem.next().find('.layui-table-total td[data-field="qty"] .layui-table-cell').text(res.cskkje.toFixed(2));
                this.elem.next().find('.layui-table-total td[data-field="amount"] .layui-table-cell').text(res.dzzje.toFixed(2));
            }
        });
    

    在这里插入图片描述

    展开全文
  • Layui合计自定义

    2021-04-07 19:09:06
    直接代码 ... //$(".layui-table-total").find("td").eq('10').find("div") //需要处理的单元格的div 具体修改那个单元格,修改eq里面的内容即可 var text = res.data.text;//后台返回的值 .

    直接代码 

                            done:function (res,curr,count) {
                            	//合计行处理
    							//$(".layui-table-total").find("td").eq('10').find("div") //需要处理的单元格的div 具体修改那个单元格,修改eq里面的内容即可
    							var text = res.data.text;//后台返回的值
                        		$(".layui-table-total").find("td").eq('10').find("div").height(100);//设置该单元格的高度
                        		var tb1 = $(".layui-table-total").find("td").eq('10').find("div").html(text);//赋值文本
                            }

     

    展开全文
  • Layui table计算合计行的时候,默认是保留2位小数的,所以要想自定义保留小数,那么久必须修改table.js源代码,修改方式如下: layui2.5.6下的table.js: 没有源文件的可以这边下载:...

    Layui table计算合计行的时候,默认是保留2位小数的,所以要想自定义保留小数,那么久必须修改table.js源代码,修改方式如下:
    小白慢慢踏全栈之路,多多点赞关注收藏支持哈~~
    layui2.5.6下的table.js:
    没有源文件的可以这边下载:https://github.com/sentsin/layui/edit/master/src/lay/modules/table.js
    第931行,可以搜索 数据合计行 关键字,新增以下两行代码:

    ,fixedNum = 2;
    
    if (item3.fixedNum != 2){
      thisTotalNum = parseFloat(totalNums[field]).toFixed(item3.fixedNum)
    }
    

    然后在cols时候,加上fixedNum关键字即可:

    { title: '金额(万元)', field: 'je', totalRow: true,fixedNum:6 }
    

    在这里插入图片描述

    展开全文
  • 参考:https://fly.layui.com/jie/50205/效果如图:done:function(res,curr,count){ //如果是异步请求数据方式,res即为你接口返回的信息。 //如果是直接赋值的方式,res即为:{data:[],count:99}data为当前页数据...

    参考: https://fly.layui.com/jie/50205/

    效果如图:

    image.png

    done: function(res, curr, count){
        //如果是异步请求数据方式,res即为你接口返回的信息。
        //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
        console.log(res.data);
        console.log($('.layui-table-total table td:eq(-3) div').html());
        console.log($('.layui-table-total table td:last div').html());
        var v=parseFloat($('.layui-table-total table td:eq(-3) div').html());
        $('.layui-table-total table td:last div').html(100+v);
    }

    其中,合计行 -11.00为自动合计内容,得分 89为自定义内容

    展开全文
  • Layui是有自带的合计功能的,但默认是没开启,我们需要把需要加上合计的功能的行的totalRow状态改成true,再在表头外加上totalRow: true,就可以了。 开启合计功能代码: cols: [[ { field: 'CommID', title: '商品...
  • 如上图所示,在日常开发中,相信只要使用layui.table数据表格来渲染列表,或多或少会使用到其合计属性(totalRow)… 但这时就会有个让人头疼的问题,使用totalRow属性展示的数据是默认带有两位小数的,即使合计结果为...
  • layui 表格合计

    2020-10-16 15:00:59
    有一种方式是当前展示出来的总和,具体如下: 效果是上面的,代码是: ... ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档 ,totalRow: true //开启合计行 ,co
  • table.render({ elem: '#test' , id: 'test' // , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板 , defaultToolbar: ['exports', { //自定义头部工具栏右侧图标。如无需自定义
  • Layui 是否开启合计行区域

    千次阅读 2020-01-10 10:15:55
    Layui 是否开启合计行区域 1、设置表格打开合计行 table.totalRow:true 2、设置要统计的行 table.cols.totalRowText:显示自定义合计文本 table.cols.totalRow:是否开启该列的...
  • 方法一 table.render({ elem: ‘#demp’ ,url: ‘’ ,parseData: function(res...layui.each(res,function(i,d){ d.sum =d.unitPrice * d.amount;//sum 是自定义的属性 }) return res; },cols: [[ {field:‘sum’, t...
  • 表头筛选、自定义条件(支持前端筛选、后台筛选) 拖动列调整顺序、隐藏显示列 excel导出(根据筛选条件和列顺序导出) 子表(表中表、无限层级、子表同样支持前3个功能) 拖动行 右击快捷菜单 合计栏支持固定列 ...
  • 7.合计栏支持固定列 8.双击自适应列宽 9.右侧固定列 列宽拖动改到单元格左侧 效果 1.表头筛选效果 2.编辑筛选效果 筛选明代姓张的 或 唐代姓李的的诗词 3.拖动列调整顺序、隐藏显示列 左右拖动调整顺序,鼠标...
  • 表头筛选、自定义条件(支持前端筛选、后台筛选介绍请看 ) 拖动列调整顺序、隐藏显示列 excel导出(根据筛选条件和列顺序导出) 子表(表中表、无限层级、子表同样支持前3个功能) 5.拖动行 6.右击快捷菜单 7.合计...
  • 表头筛选、自定义条件(支持前端筛选、后台筛选) 拖动列调整顺序、隐藏显示列 excel导出(根据筛选条件和列顺序导出) 子表(表中表、无限层级、子表同样支持前3个功能) 拖动行 右击快捷菜单 合计栏支持固定列 ...
  • layui的分页+模糊查询

    2019-05-15 17:33:08
    //totalRow: true, //开启合计行 cols: [[ //表头 //fixed: 'left', {field: 'id', title: '商品ID',sort: true, width:50}, {field: 'productName', title: '商品名称', width:100}, {field: '...
  • 把数据从layui数据表格中获取出来,其实非常简单只需要在layui数据表格里面加上一个done的属性就...我们可以直接在layui数据表格里面加上totalRow就可以totalRow是合计的意思,如下: 就可以计算出当前页面数据的总

空空如也

空空如也

1 2
收藏数 23
精华内容 9
关键字:

layui合计自定义