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.

Answer 2

You don't need to hack the jTable library asset, this just leads to pains when you want to update to a later version. All you need to do is create a custom input via the jTable field option "input", see an example field setup to accomplish what you need here:

JobId: {
    title: 'JobId',
    create: true,
    edit: true,
    list: true,
    input: function (data) {
        if (data.value) {
            return '<input type="text" readonly class="jtable-input-readonly" name="JobId" value="' + data.value + '"/>';
        } else {
            //nothing to worry about here for your situation, data.value is undefined so the else is for the create/add new record user interaction, create is false for your usage so this else is not needed but shown just so you know when it would be entered
        }
    },
    width: '5%',
    visibility: 'hidden'
},

And simple style class:

.jtable-input-readonly{
    background-color:lightgray;
}

Answer 3

I have simple solution:

formCreated: function (event, data) 
{
    if(data.formType=='edit') {
        $('#Edit-ip').prop('readonly', true);
        $('#Edit-ip').addClass('jtable-input-readonly');
    }
},

For dropdown make other options disabled except the current one:

$('#Edit-country option:not(:selected)').attr('disabled', true);

And simple style class:

.jtable-input-readonly{
     background-color:lightgray;
}

Answer 4

A more simple version for dropdowns

$('#Edit-country').prop('disabled',true);

No need to disable all the options :)