jquery-jable: How to display a field as read-only in the edit form?

Question

I have a table pre-populated with the company LAN IP addresses with fields for associated data, status, etc. The (jquery-)jtable fields collection is configured like this.

fields: {
  id: { title: 'ID'},
  ip: { title: 'IP address, edit: false }
  more: { ... }
}

This works but the problem is that when the edit dialog pops up the user can't see the ip address of the record being edited as jtable's edit form doesn't show the field.

I've read through the documentation but can't see any way to display a field as read-only in the edit form. Any ideas?

Answer 1

I had to hack jtable.js. Start around line 2427. Changed lines are marked with '*'.

            //Do not create element for non-editable fields
            if (field.edit == false) {
               //Label hack part 1: Unless 'hidden' we want to show fields even though they can't be edited. Disable the 'continue'.
*              //continue;      
            }

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

            //Create a container div for this input field and add to form
            var $fieldContainer = $('<div class="jtable-input-field-container"></div>').appendTo($editForm);

            //Create a label for input
            $fieldContainer.append(self._createInputLabelForRecordField(fieldName));

            //Label hack part 2: Create a label containing the field value.
*           if (field.edit == false) {
*               $fieldContainer.append(self._myCreateLabelWithText(fieldValue));
*               continue;       //Label hack: Unless 'hidden' we want to show fields even though they can't be edited.
*           }

            //Create input element with it's current value

After _createInputLabelForRecordField add in this function (around line 1430):

/* Hack part 3: Creates label containing non-editable field value.
*************************************************************************/
_myCreateLabelWithText: function (txt) {
   return $('<div />')
     .addClass('jtable-input-label')
     .html(txt);
},

With the Metro theme both the field name and value will be grey colour.

Be careful with your update script that you're passing back to. No value will be passed back for the //edit: false// fields so don't include them in your update query.