bootstrap-table可编辑

左手的ㄟ右手 2021-09-15 10:38 363阅读 0赞

function query() {
        load('/sellCard/getBatchQuryData', 'get', 'json', {
            cardPrefix: $('#cardPrefix').val(), //前缀
            cardSuffix: $('#cardSuffix').val(), //后缀
            cardTypeId: $('#cardTypeId').val(), //类型ID
            bingNumber: $('#bingNumber').val(), //开始数
            rechargeNumber: $('#rechargeNumber').val(), //充值数
            recargerMoney: $('#recargerMoney').val(), //充值金额
            actualMoney: $('#actualMoney').val(), //实际金额
        }, function (data) {
            if (data.code == 500) {
                alert('暂无数据')
            } else if (data.code == 200) {
                $('#bat_queryCard').modal('hide');
                
                $table.bootstrapTable('append', data.model);
                $('#mount').val($table.bootstrapTable('getData').length);
                q_clean();
            }
        })
    }
    
    //查询清空关键字
    function q_clean() {
        $('#bat_queryCard input').each(function () {
            $(this).val('')
        })
        $('#bat_queryCard select').each(function () {
            $(this).val('')
        })
    }
    //数据格式
    
    $table = $("#batchTable").bootstrapTable({
        cache: false, //是否使用缓存
        pagination: false, //是否分页
        showFooter: true, //显示页脚
        showColumns: true,
        editable:true,//是否可以编辑
        singleSelect: false, //单选
        clickToSelect: true, //是否启用点击选中行
        toolbarAlign: "right",
        buttonsAlign: "right", //按钮对齐方式
        toolbar: "#toolbar", //指定工作栏
        columns: [{
                title: "选择",
                checkbox: true,
            },
            {
                title: "卡号",
                field: "cardNo",
            },
            {
                title: "卡类型",
                field: "cardTypeName",
            },
            {
                title: "有效期",
                field: "expiredDate"
            },
            {
                title: "面值",
                field: "faceValue",
            },
            {
                title: "充值金额",
                field: "recargerMoney",
                editable:{
                    type: 'text',
                    title: '卡类型',
                    validate:function(value){ //字段验证
                        if(! $.trim(value)){
                            return '不能为空';
                        }
                    }
                },
                footerFormatter: function (value) {
                    var count = 0;
                    for (var i of value) {
                        count += parseFloat(i.recargerMoney);
                    }
                    $('#rechargeAmount').val(count);
                    return '充值金额总计' + count;
                }
            },
            {
                title: "赠送金额",
                field: "giveMoney",
                footerFormatter: function (value) {
                    var count = 0;
                    for (var i of value) {
                        count += parseFloat(i.giveMoney);
                    }
                    $('#donateAmount').val(count);
                    return '赠送金额总计' + count;
                }
            },
            {
                title: "实际销售金额",
                field: "actualMoney",
                editable:{
                    type: 'text',
                    title: '卡类型',
                    validate:function(value){ //字段验证
                        if(! $.trim(value)){
                            return '不能为空';
                        }
                    }
                },
                footerFormatter: function (value) {
                    var count = 0;
                    for (var i of value) {
                        count += parseFloat(i.actualMoney);
                    }
                    $('#actualAmount').val(count);
                    $('#trefundableMoney').val(count);
                    $('#pay_surplus').val(count);
                    return '销售金额总计' + count;
                }
            },
            {
                title: "卡内余额",
                field: "balance"
            }
        ],
        locale: "zh-CN" //中文支持,
    });

//需要引入的插件

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-editable.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/bootstrap-table-editable.js"></script>
    <script src="js/bootstrap-editable.js"></script>

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关 php 可编辑菜单,菜单的编辑删除

摘要：<?php namespace app\\admin\\controller; use think\\Controller; use Util\\SysDb; c

梦里梦外;/ 2023年01月18日 15:30/ 0 赞/ 175 阅读

相关 iview实现表格可编辑

iview要实现table可编辑，使用render函数进行渲染，非常简单,希望对大家有所帮助。一、效果图如下： ![在这里插入图片描述][watermark_type_

太过爱你忘了你带给我的痛/ 2022年12月06日 01:27/ 0 赞/ 771 阅读

相关 html div 可编辑,使div可编辑 contentEditable

属性 contentEditable 这是一个可编辑div 比如富文本的输入框就可以用可编辑的div(自定义一个富文本时可用) 或者另一个场景，有时候需要一个可输入框双击

╰+哭是因爲堅強的太久メ/ 2022年10月11日 00:43/ 0 赞/ 197 阅读

相关 html表格无法编辑,html 可编辑表格

场景：HTML+JS兑现可编辑表格 HTML+JS实现可编辑表格实现可视化编辑表格操作... HTML文件: 编辑表格数据可编辑的表格 <table>

ゝ一世哀愁。/ 2022年10月09日 13:28/ 0 赞/ 302 阅读

相关 vue打印可编辑文本

vue打印可编辑文本前言：最近写项目时候遇到一个打印的问题，分享给大家，有遇到这种问题的小伙伴可以参考一下。问题描述： ![在这里插入图片描述][waterma

「爱情、让人受尽委屈。」/ 2022年09月12日 10:45/ 0 赞/ 214 阅读

相关可编辑表格TableCell

方法一\----------------------------------------------------------------------------- <html

客官°小女子只卖身不卖艺/ 2022年08月17日 15:28/ 0 赞/ 227 阅读

相关【JQuery】——可编辑的表格

【HTML】 <html> <head> <title>JQuery实例2：可以编辑的表格</title> <meta http-equiv="Content-T

梦里梦外;/ 2022年07月16日 13:49/ 0 赞/ 189 阅读

相关可编辑的表格实例

一个小实例：打开VS新建网站，然后添加一个html页，命名为EditTable.html，书写代码如下： <!DOCTYPE html> <html x

╰半橙微兮°/ 2022年05月31日 08:13/ 0 赞/ 248 阅读

相关 bootstrapTable行内动态编辑行中某列字段数据

今天开发者遇到了一个需求：在一个table数据中，点击某行的某一个列数据就行修改该行该字段的属性值（另一篇博文有优化方法）。前言：在网上搜索了一番，使用[x-edit

谁践踏了优雅/ 2022年05月20日 03:41/ 0 赞/ 1234 阅读

相关 bootstrap-table可编辑

function query() { load('/sellCard/getBatchQuryData', 'get', 'json', {

左手的ㄟ右手/ 2021年09月15日 10:38/ 0 赞/ 364 阅读