将数据表的行与引导开关关联(使用另一个列字段)

时间:2016-02-08 08:57:24

标签: javascript jquery ajax datatables bootstrap-switch

我正在使用datatables和bootstrap交换机插件来启用和禁用用户。当我点击开关时,我通过ajax调用Web服务,我的其余Web服务将用户的状态切换到数据库。问题是从数据表行中选择用户并将其传递给我的Web服务。这是表初始化:

if ( ! $.fn.DataTable.isDataTable( '#usersTable' ) ) {
        userTable = $('#usersTable').DataTable({
            responsive: true,
            //disable order and search on column
            columnDefs: [
                         {
                             targets: 1,
                             orderable: false,
                             searchable: false,
                         }
                         ],
            //fix problem with responsive table
            "autoWidth": false,
            "ajax": "table",
            "columns": [
                        { "data": "username" },
                        { data: "enabled", render: function ( data, type, row ) {
                            if (data) {
                                return '<input data=data=row.username type="checkbox" name="my-checkbox" checked>';
                            }
                            else {
                                return '<input data=data=row.username type="checkbox" name="my-checkbox">';
                            }
                        }   
                        },
                        { "data": "role.role"},
                        { "data": "clientVersion.name" },
                        {
                            data: null,
                            className: "center",
                            defaultContent: '<button type="button" class="btn btn-danger" id="deleteLicense" data-toggle="modal" th:attr="data-href=${license.idClientLicense}" data-target="#deleteLicenseModal">Delete</button>'
                        }
                        ],
                        "fnDrawCallback": function() {
                        //Initialize checkbos for enable/disable user
                        $("[name='my-checkbox']").bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
                        //$('#toggleChecked').bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
                        }
        });
    }
    else {
        userTable.ajax.url("table").load();
    }

这是自举开关事件:

$('#usersTable').on('switchChange.bootstrapSwitch', 'input[name="my-checkbox"]', function(event, state) {
        //CSRF attribute for spring security
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            type : "POST",
            url : "status/" + //username setted above,
            beforeSend:function(xhr) {
                xhr.setRequestHeader(header, token);
            },  
//          all right with rest call
            success : function(data) {  
//              No exception occurred
                if (data.status==true){ 
//                  Also the field are right(for e.g. form value)
                    if(data.success==true){


                    }
                    else{
//                      code if there are some error into form for example
                    }
                } else {
//                  code exception
                    notifyMessage(data.result, 'error');
                }
            },
//          error during rest call
            error : function(data) {
                window.location.href = "/ATS/500";
            }
        });
    });

我想在构建过程中将用户名设置为bootstrap开关的字段,但是如何?我应该这样做:

if (data) {
    return '<input value=username type="checkbox" name="my-checkbox" checked>';

但它不起作用,因为设置用户名而不是从ajax调用返回的值。你能救我吗?

1 个答案:

答案 0 :(得分:1)

我用这个代码解决了(我希望它对某人有用)

features: (new ol.format.GeoJSON()).readFeatures(
    geoData,
    {featureProjection: ol.proj.get('EPSG:3857')}
) 

然后我使用{ data: "enabled", render: function ( data, type, row ) { if (data) { return '<input data="'+row.username+'" type="checkbox" name="my-checkbox" checked>'; }else { return '<input data="'+row.username+'" type="checkbox" name="my-checkbox">'; } }

获取值