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

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