Help with a cutom editor field type

jtoler5

The field type works but I was wondering how I could make the code better and more dynamic? Basically this is for a one-to-many relationship. You have the 'main expense' field that can be "split" multiple times. The field type creates a new input field every time the "split" button is clicked.

I'm using the data: function(){} to pass multiple fields to editor.

    _fieldTypes.split_amount = {
        create: function ( conf ) {
            var that = this;

            conf._enabled = true;

            // Create the elements to use for the input
            conf._input = $(
                '<div class="input-group control-group after-add-more" id="'+Editor.safeId( conf.id )+'">' +
                        '<input class="form-control total-expense" type="text" />' +
                        '<div class="input-group-btn">' +
                            '<button class="btn btn-default split-button" type="button"><i class="fa fa-plus"></i> Split</button>' +
                        '</div>' +
                '</div>' +
                '<div class="form-group copy-template hide">' +
                    '<div class="control-group input-group dynamic-input-group" style="margin-top:10px">' +
                                '<select class="form-control specialpay-academic-year" name="academic_year" style="width:30%">' +
                                    ....
                                '</select>' +
                                '<select class="form-control specialpay-payment-type" name="payment_type" style="width:35%">' +
                                   ...
                                '</select>' +
                            '<input class="form-control specialpay-term-amount" type="text" name="amount" style="width:30%" />' +
                        '<span class="input-group-btn">' +
                            '<button class="btn btn-danger remove-button" type="button"><i class="fa fa-minus"></i></button>' +
                        '</span>' +
                    '</div>' +
                '</div>'
            );

            $('.split-button', conf._input).click( function () {
                if ( conf._enabled ) {
                    var html = $('.copy-template').html();
                    $('.after-add-more').parent().append(html);
                    $('body').on('click', '.remove-button', function () {
                        $(this).parents(".control-group").remove();
                    } );
                }
                return false;
            } );

            // Modify data submitted to server so it can properly be added to the database
            that.on('preSubmit', function( e, data, action ) {
                var allDynamicInputs = [];

                $('.dynamic-input-group:visible').each(function() {
                    var row={};
                    // add selected option to row array
                   ...
                    allDynamicInputs.push( row );
                });

                $.each(data.data, function() {
                    this.PaymentDetails = allDynamicInputs;
                });
            });

            // Remove from DOM
            that.one('close', function() {
                $('body').find('.dynamic-input-group').not(".copy-template .dynamic-input-group").remove();
            });

            return conf._input;
        },

        get: function ( conf ) {
            return conf._input;
        },

        set: function ( conf, val ) {
            var that = this;
            var totalExpense = val.TotalExpense;
            var payments = val.PaymentDetails;

            // Set total expense amount
            conf._input.find('.total-expense').val( totalExpense );

            // Set individual term expense amounts
            if ( payments ) {
                var $newHTML = $('<span></span>');
                // For each term create a new row and add below total expense line
                $.each(payments, function (key, value) {
                    var id = value.ID;
                    var paymentType = value.PaymentType;
                    var amount = value.Amount;
                    var academicYear = value.AcademicYear;
                    var row =
                        '<div class="control-group input-group dynamic-input-group" style="margin-top:10px">' +
                        '<input type="hidden" name="id" value="' + id + '" />' +
                        '<select class="form-control specialpay-academic-year" name="academic_year" style="width:30%">' +
                        ....
                        '</select>' +
                        '<select class="form-control specialpay-payment-type" name="payment_type" style="width:35%">' +
                        '<option value="">Select option</option>' +
                        ....
                        '</select>' +
                        '<input class="form-control specialpay-term-amount" type="text" name="amount" value="' + amount + '" style="width:30%" />' +
                        '<span class="input-group-btn">' +
                        '<button class="btn btn-danger remove-button" type="button"><i class="fa fa-minus"></i></button>' +
                        '</span>' +
                        '</div>';
                    $newHTML.append($(row));
                });

                // Add new rows to modal after modal has been added to the DOM
                that.one('open', function( e, mode, action ) {
                    $('.after-add-more').parent().append( $newHTML );
                    $('body').on('click', '.remove-button', function () {
                        $(this).parents(".control-group").remove();
                    } );
                });

                // Modify data submitted to server so it can properly be added to the database
                that.on('preSubmit', function( e, data, action ) {
                    var allDynamicInputs = [];

                    $('.dynamic-input-group:visible').each(function() {
                        var row={};
                        // add text inputs to row array
                        ....
                        allDynamicInputs.push( row );
                    });

                    $.each(data.data, function() {
                        this.PaymentDetails = allDynamicInputs;
                    });
                });
            }

            // Remove from DOM
            that.one('close', function() {
                $('body').find('.dynamic-input-group').not(".copy-template .dynamic-input-group").remove();
            });
        },

        enable: function ( conf ) {
            conf._enabled = true;
            $(conf._input).removeClass( 'disabled' );
        },

        disable: function ( conf ) {
            conf._enabled = false;
            $(conf._input).addClass( 'disabled' );
        },

        owns: function ( conf, node ) {
            if ( $(node).closest('.control-group').length || $(node).closest('.dynamic-input-group').length || $(node).hasClass('select2-selection__choice__remove') ) {
                return true;
            }
            return false;
        }
    };

})(jQuery, jQuery.fn.dataTable);

allan

In what way do you mean more dynamic - it looks fairly dynamic as it is!

I'd compute the HTML as DOM rather than as a string which would make it easier to add the options if they are in Javascript memory, but over all, it looks good.

Allan