1

我正在使用 jquery jtable 插件来编辑我的数据 - 它非常擅长 - 但我无法控制生成表单的布局，我只能获得带有标题的单列控件。

有没有人找到一种方法来布局为表格或其他东西？

编辑：

我找到了某种解决方案，如果我将所有控件设置为 widt 200 并设置：

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

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

我得到了比以前更好的两列 - 有没有人找到更好的解决方案？

4

2 回答 2

3

CSS 更改

 .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;
 }

使用 jTable 的 formCreated 事件将自定义类名添加到表单中，即

 formCreated : function(event, data){
        $(data.form).addClass("custom_horizontal_form_field");
    }
于 2014-08-25T09:40:24.710 回答
1 
/*
#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);
于 2013-07-10T16:33:34.813 回答