修改表格中的一个数据之后 另一列也实时更新

提问 已结 16 531
angel007aaa
悬赏:20飞吻
版本:layui 浏览器:

输入数量3之后 总额马上变成300 求教大佬~~~~
要完整代码
回帖
  • IDyun
    6天前
    数量* 单价 = 总额
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1584613945938" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
    </head>
    <body>

    <table class="layui-hide" id="demo" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="//res.layui.com/layui/dist/layui.js?t=1584613945938"></script>
    <script>
    layui.config({
    version: '1584613945938' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
    var laydate = layui.laydate //日期
    ,laypage = layui.laypage //分页
    ,layer = layui.layer //弹层
    ,table = layui.table //表格
    ,carousel = layui.carousel //轮播
    ,upload = layui.upload //上传
    ,element = layui.element //元素操作
    ,slider = layui.slider //滑块

    //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
    {type: 'checkbox', fixed: 'left' ,totalRowText: '合计:'}
    ,{field: 'id', title: '数量', width:80, sort: true, fixed: 'left',totalRow: true, edit: 'text'}
    ,{field: 'experience', title: '单价', width: 90, sort: true, totalRow: true, edit: 'text'}
    ,{field: 'wealth', title: '总额', width: 135, sort: true, totalRow: true}
    ]]
    });

    //监听单元格编辑
    table.on('edit(test)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value);
    var tabView=layui.$(this).parents('.layui-table-view'),id=tabView.attr('lay-id');
    //要统计的值
    var vals=layui.$.map(table.cache[id],function(d){
    return +d[field];// + 转换成数值类型
    })
    obj.update({wealth:value*data.experience});//修改其它列
    //总和
    var total = vals.reduce(function(total, num) {
    return total + num;
    })
    //修改统计单元格
    layui.$(this).parents('.layui-table-view').find('.layui-table-total td[data-field="'+field +'"] .layui-table-cell').text(total);
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • obj.update({
    销售总额的field:销售数量*单价
    });
    0 回复
  • able.on('edit(tableFilter)', function (obj) {
    var value = obj.value //得到修改后的值
    , data = obj.data //得到所在行所有键值
    , field = obj.field; //得到字段
    //刚才写的
    }

    还要配合这个
    0 回复
  • table
    0 回复
  • @白手起家想发财
    这么写根本不好使啊 老哥
    0 回复
  • @IDyun
    在我项目上不好使啊 能帮我看看哪里出问题了不?
    0 回复
  • IDyun
    6天前

    table.render 方法缺少闭合的括号。
    你可以在 https://www.layui.com/demo/ 上面运行以上我给你的例子,看符不符合你的预想的结果。
    没问题再放到你的项目中,然后慢慢改。
    0 回复
  • IDyun
    6天前
    浏览器 按F12 可以看到 报错的信息。然后根据里面的错误进行修改代码。
    0 回复
  • @angel007aaa vue你值得拥有
    0 回复
  • 防御
    6天前
    我感觉,楼主思想有问题,你直接把总金额的值,改为模板赋值。前面改了,重载一下即可,为啥要怎么麻烦
    0 回复