bootstrapTable下拉框

需求：

bootstrapTable的某一列，代表该笔订单的状态，状态只有3种，做成下拉框的格式，可以选择修改，点击保存按钮时可以将修改后的数据同步至数据库

列元素
columns:

{
    width: '40px',
    align: 'center',
    field: 'status',
    title: '退款状态',
    cellStyle: function (value, row, index) {
        return {
            css: {
                "color": "blue",
                "font-weight": "bold",
                "font-style": "italic",
                "background": "#a7efe2",
                "white-space": "nowrap"
            }
        }
    },
    formatter:
        function (value, row, index) {
        var seclect='';
        if(value=="0"){
            seclect="<select  class='ss'><option id='"+row.id+"' value='0' selected='selected'>待退款</option><option id='"+row.id+"' value='1'>退款成功</option><option id='"+row.id+"' value='2'>退款失败</option></select>";
        }else if(value=='1'){
            seclect="<select class='ss'><option id='"+row.id+"' value='0' >待退款</option><option id='"+row.id+"' value='1' selected='selected'>退款成功</option><option id='"+row.id+"' value='2'>退款失败</option></select>";
        }else {
            seclect="<select class='ss'><option id='"+row.id+"' value='0' >待退款</option><option id='"+row.id+"' value='1'>退款成功</option><option id='"+row.id+"' value='2' selected='selected'>退款失败</option></select>";
        }
        return seclect;
    }
},

点击保存按钮的操作

    $("#saveRecord").click(function () {
        var rows = $('#dataTable').bootstrapTable("getSelections");
        if (rows.length <= 0) {
            layer.msg("请选择要保存的记录");
            return
        }
        //页面数据保存
        var $dataTable = $($("#dataTable tr:gt(0)"));
        var totalData = [];
        var data = {};
        for (var i = 0; i < $dataTable.length; i++) {
            var find = $($dataTable).find("input:checkbox")[i];
                if ($(find).is(":checked")) {
                var perModi = $($($($dataTable)[i]).find("select option:selected"));
                    if (perModi) {
                        var perInput = $(perModi).length;
                        for (var k = 0; k < perInput; k++) {
                            data.id=$($($(perModi))[k]).attr('id');
                            data.status=$($($(perModi))[k]).val();

                        }
                        totalData.push(data);
                    }
                }
        }

        $.ajax({
            url: "/controller/modifyData",
            data: {'easyServe': JSON.stringify(totalData)},
            type: 'post',
            dataType: 'json',
            success: function (data) {
                $("#dataTable").bootstrapTable("refresh");
            }
        })

    })
});

后台controller收到数据后，同步至数据库即可

这个方法比较low，总体上可以实现需求，各位如有好的方法欢迎讨论

转载于:https://www.cnblogs.com/jakin3130/p/11016227.html