zoukankan      html  css  js  c++  java
  • bootstrapTable下拉框

    需求:

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

    列元素
    columns:
    {
    '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,总体上可以实现需求,各位如有好的方法欢迎讨论




  • 相关阅读:
    Windows Phone 7 Coding4Fun的弹出框来源:http://www.cnblogs.com/majian714/archive/2011/12/02/2272060.html
    jsp连接mysql的增删改操作
    各种数据库的比较
    jsp连接mysqlupdata操作
    jsp连接Mysql关键代码
    Duwamish学习笔记
    值类型和引用类型的区别
    Factory Method模式的学习
    实现事务的几种方法
    提高Dotnet应用程序性能的技巧
  • 原文地址:https://www.cnblogs.com/jakin3130/p/11016227.html
Copyright © 2011-2022 走看看