I am using the jquery jtable plugin to edit my data - and it is very good at it - but I can't control the layout of the generated form, I can only get a single column of controls with headers.

Has anyone found a way to layout as a table or something else?

Edit:

I found some sort of solution, if I set all controls to have widt 200 and set:

form.jtable-dialog-form {
  width:440px;
}

div.jtable-input-field-container {
  float: left;
  margin: 0px 5px 5px 0; 
  padding: 2px;
}

I get two columns which is better than before - has anyone found a better solution?

I am using the jquery jtable plugin to edit my data - and it is very good at it - but I can't control the layout of the generated form, I can only get a single column of controls with headers.

Has anyone found a way to layout as a table or something else?

Edit:

I found some sort of solution, if I set all controls to have widt 200 and set:

form.jtable-dialog-form {
  width:440px;
}

div.jtable-input-field-container {
  float: left;
  margin: 0px 5px 5px 0; 
  padding: 2px;
}

I get two columns which is better than before - has anyone found a better solution?

• javascript
• jquery
• jquery-jtable

• Take a look on : stackoverflow./questions/15610156/… I found there the answer. – Ofir Attia Commented Oct 1, 2013 at 17:13

2 Answers 2

CSS Changes

 .custom_horizontal_form_field .jtable-input-field-container{
  width: 400px !important;
 }
 .custom_horizontal_form_field .jtable-input-field-container .jtable-input-label{
   width : 150px !important;
   float: left !important;
 }

Using formCreated event of jTable add the custom class name to the form i.e.,

 formCreated : function(event, data){
        $(data.form).addClass("custom_horizontal_form_field");
    }

/*
#20130707
override _showAddRecordForm

    define you layout with a dom tag with id "__filedname__" and "__LABEL_fieldname__" as place holder for the input tag and label.
    these tag will be replace.
    - template id = JTableCreateFormTemplate

    <div id="JTableCreateFormTemplate" style="display: none">
        <!-- layout start from here, do not define <form> tag -->
        <div>
            <div><span id="__LABEL_fieldname1__"></span> : <span id="__fieldname1__"></span></div>
            <div><span id="__LABEL_fieldname2__"></span> : <span id="__fieldname2__"></span></div>
        </div>
        <!-- layout end -->
    </div>

    - hidden field will be append.
    - missing define fields in layout will be append by jtable default look
    - Default label was wrap by a <div>, in layout, the div is removed. pls add your own style!

override _showEditForm
    - template id = JTableEditFormTemplate


*/
(function ($) {
// copy the ori to another method name
$.hik.jtable.prototype._showAddRecordFormOri = $.hik.jtable.prototype._showAddRecordForm;
$.hik.jtable.prototype._showEditFormOri = $.hik.jtable.prototype._showEditForm;
//extension members
$.extend(true, $.hik.jtable.prototype, {

    /* Shows add new record dialog form.
    *************************************************************************/
    _showAddRecordForm: function () {
        var self = this;

        var template = $('#JTableCreateFormTemplate').clone().get(0);

        if(!template) {
            // call the ori if not found the template!
            self._showAddRecordFormOri();
            return;
        }
        //Create add new record form
        var $addRecordForm = $('<form id="jtable-create-form" class="jtable-dialog-form jtable-create-form" action="' + self.options.actions.createAction + '" method="POST"></form>');

        //Create input elements
        for (var i = 0; i < self._fieldList.length; i++) {

            var fieldName = self._fieldList[i];
            var field = self.options.fields[fieldName];

            var labelPos = $('#__LABEL_' + fieldName + '__', template).get(0);
            var inputPos = $('#__' + fieldName + '__', template).get(0);

            //Do not create input for fields that is key and not specially marked as creatable
            if (field.key == true && field.create != true) {
                continue;
            }

            //Do not create input for fields that are not creatable
            if (field.create == false) {
                continue;
            }

            if (field.type == 'hidden') {
                $(template).append( self._createInputForHidden(fieldName, field.defaultValue) );
                continue;
            }

            //Create a label for input
            var $label = self._createInputLabelForRecordField(fieldName);
            if(labelPos) {
                $(labelPos).replaceWith( $label.contents() );
            } else {
                $(template).append( $label );
            }
            //Create input element
            var $input = 
                    self._createInputForRecordField({
                        fieldName: fieldName,
                        formType: 'create',
                        form: $addRecordForm
                    });

            if(inputPos) {
                $(inputPos).replaceWith( $input.contents() );
            } else {
                $(template).append( $input );
            }
        }

        $addRecordForm.append( $(template).contents() );
        self._makeCascadeDropDowns($addRecordForm, undefined, 'create');

        //Open the form
        self._$addRecordDiv.append($addRecordForm).dialog('open');
        self._trigger("formCreated", null, { form: $addRecordForm, formType: 'create' });
    },


    /* Shows edit form for a row.
    *************************************************************************/
    _showEditForm: function ($tableRow) {
        var self = this;
        var record = $tableRow.data('record');

        var template = $('#JTableEditFormTemplate').clone().get(0);
        if(!template) {
            // call the ori if not found the template!
            self._showEditFormOri($tableRow);
            return;
        }

        //Create edit form
        var $editForm = $('<form id="jtable-edit-form" class="jtable-dialog-form jtable-edit-form" action="' + self.options.actions.updateAction + '" method="POST"></form>');

        //Create input fields
        for (var i = 0; i < self._fieldList.length; i++) {

            var fieldName = self._fieldList[i];
            var field = self.options.fields[fieldName];
            var fieldValue = record[fieldName];

            var labelPos = $('#__LABEL_' + fieldName + '__', template).get(0);
            var inputPos = $('#__' + fieldName + '__', template).get(0);

            if (field.key == true) {
                if (field.edit != true) {
                    //Create hidden field for key
                    $(template).append( self._createInputForHidden(fieldName, fieldValue) );
                    continue;
                } else {
                    //Create a special hidden field for key (since key is be editable)
                    $(template).append( self._createInputForHidden('jtRecordKey', fieldValue) );
                }
            }

            //Do not create element for non-editable fields
            if (field.edit == false) {
                continue;
            }

            //Hidden field
            if (field.type == 'hidden') {
                $(template).append( self._createInputForHidden(fieldName, field.defaultValue) );
                continue;
            }

            //Create a label for input
            var $label = self._createInputLabelForRecordField(fieldName);
            if(labelPos) {
                $(labelPos).replaceWith( $label.contents() );
            } else {
                $(template).append( $label );
            }

            //Create input element with it's current value
            var currentValue = self._getValueForRecordField(record, fieldName);
            var $input = 
                self._createInputForRecordField({
                    fieldName: fieldName,
                    value: currentValue,
                    record: record,
                    formType: 'edit',
                    form: $editForm
                });
            if(inputPos) {
                $(inputPos).replaceWith( $input.contents() );
            } else {
                $(template).append( $input );
            }

        }
        $editForm.append( $(template).contents() );
        self._makeCascadeDropDowns($editForm, record, 'edit');

        //Open dialog
        self._$editingRow = $tableRow;
        self._$editDiv.append($editForm).dialog('open');
        self._trigger("formCreated", null, { form: $editForm, formType: 'edit', record: record, row: $tableRow });
    },

});
})(jQuery);