使用Bootstrap Multiselect作为DataTable Editor的自定义字段类型插件

时间:2016-11-30 09:04:03

标签: javascript ajax datatables bootstrap-multiselect

我试图在DataTable编辑器(http://www.rfc-editor.org/rfc/rfc4329.txt)中实现Bootstrap Multiselect(http://davidstutz.github.io/bootstrap-multiselect/)作为额外的编辑器字段类型...下面是加载选项但我仍然有一些问题......比如将值发送到服务器...字段(' account_mm.iso_01')始终为空:

{"data":[{"DT_RowId":"row_2634", .... ,"account_mm":{"iso_01":""},"country":{"iso_01":null}}]}

editor.bootstrapmultiselect.js:

$(document).ready(function() {


(function( factory ){
if ( typeof define === 'function' && define.amd ) {
    // AMD
    define( ['jquery', 'datatables', 'datatables-editor'], factory );
}
else if ( typeof exports === 'object' ) {
    // Node / CommonJS
    module.exports = function ($, dt) {
        if ( ! $ ) { $ = require('jquery'); }
        factory( $, dt || $.fn.dataTable || require('datatables') );
    };
}
else if ( jQuery ) {
    // Browser standard
    factory( jQuery, jQuery.fn.dataTable );
}
}(function( $, DataTable ) {
'use strict';


if ( ! DataTable.ext.editorFields ) {
DataTable.ext.editorFields = {};
}

var _fieldTypes = DataTable.Editor ?
DataTable.Editor.fieldTypes :
DataTable.ext.editorFields;


_fieldTypes.bootstrapmultiselect = {
_addOptions: function ( conf, opts ) {
    var elOpts = conf._input[0].options;

    elOpts.length = 0;

    if ( opts ) {
        DataTable.Editor.pairs( opts, conf.optionsPair, function ( val, label, i ) {
            elOpts[i] = new Option( label, val );
        } );
    }
},

create: function ( conf ) {
    var editor = this;
    conf._input = $('<select/>')
        .attr( $.extend( {
            id: DataTable.Editor.safeId( conf.id ),
            multiple: 'multiple'
        }, conf.attr || {} ) );


    var configurations = $.extend({}, conf.opts, {
            buttonWidth: '100%' 
        });

    // On open, need to have the instance update now that it is in the DOM
    editor.on( 'open.bootstrapmultiselect' + DataTable.Editor.safeId( conf.id ), function () {
        conf._input.multiselect( configurations );  
    } );

    return conf._input[0];
},

update: function (conf, options ) {

    var configurations = $.extend({}, conf.opts, {
            buttonWidth: '100%'         
        });     

    _fieldTypes.bootstrapmultiselect._addOptions(conf, options );
    //$(conf._input).multiselect( configurations );

    conf._input.multiselect( configurations );  

},

get: function ( conf ) {
    var val = conf._input.val();

    return conf._input.prop('multiple') && val === null ?
        [] :
        val;
},

set: function ( conf, val ) {
    conf._input.val( val ).trigger( 'change', {editor: true} );
}


};


}));


});

0 个答案:

没有答案