Implemented dropdown actions using bootstrap and tether

[ismcagdas]

This extension depends on bootstrap v.3.x (https://github.com/twbs/bootstrap) and tether (https://github.com/HubSpot/tether). So in order to use it, jquery.jtable.record-actions.js must be added after jtable and both bootstrap and tether libraries must be referenced.

Example definition of an actions field is:

fields: {
    actions: { //'actions' is not a special name, but just another field name.
        type: 'record-actions', //introducing a new field type
        cssClass: 'btn btn-xs btn-primary blue', //this class is added to dropdown button if defined.
        text: '<i class="fa fa-cog"></i> Actions <span class="caret"></span>',//text or html can be used
        items: [{
            text: 'Edit record',
            action: function(data) {
                //TODO: Delete record
               //data parameter contains record property
            }
        }, {
            text: 'Delete record',
            action: function(data) {
                //TODO: Edit record
               //data parameter contains record property
            }
        }]
    },
    //...other fields
}

Also, if you want to show/hide a dropdown conditionally, you can define a function named "visible" to your dropdown list item which returns a boolean. If all dropdown list items are invisible, then main dropdown button becomes invisible as well.

[hikalkan]

Core file should not be depend on extensions. Also jquery.jtable.record-actions.js should be completely an isolated extension rather than including to main jtable bundle.

[hikalkan]

Thanks a lot.

[dasguptahirak]

@ismcagdas
Please guide how to use.
Share some example.

[ismcagdas]

Hi,

The comment above contains an example usage, did you try it ?
Or are you asking a full example of it ?

[dasguptahirak]

@ismcagdas
Yes I need full example.

[ismcagdas]

Hi,

I don't have time for preparing full example right now but yhe usage is very simple.

• Just include jquery.jtable.record-actions.js after jtable.
• Also include bootstrap and tether javascript files before jtable.
• and add actions field defined above into your jtable definition, that's it.

Thanks.

[cangunaydin]

Hello,
It can be also good to send the jquery object reference for the anchor tag to the action method. I am trying to open a child table which needs a reference for the closest table row. or is there another way that i can get the reference?

Thanks.