https://github.com/michaelsogos/bootstrap-table-toolbar-buttons

Extension for bootstrap-table to add custom buttons to toolbar
https://github.com/michaelsogos/bootstrap-table-toolbar-buttons

Last synced: 5 days ago
JSON representation

Extension for bootstrap-table to add custom buttons to toolbar

• Host: GitHub
• URL: https://github.com/michaelsogos/bootstrap-table-toolbar-buttons
• Owner: michaelsogos
• License: mit
• Created: 2017-10-01T11:07:19.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-01T12:33:24.000Z (about 7 years ago)
• Last Synced: 2024-10-08T15:59:08.524Z (about 1 month ago)
• Size: 8.79 KB
• Stars: 5
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Custom Toolbar Buttons

=======================

This is an extension of [Bootstrap table](http://bootstrap-table.wenzhixin.net.cn/) to add custom buttons to toolbar, close to default buttons like "refresh", "column selector", etc.

Features

-----

- Add a custom button with specified icon that on click event call a custom function

Demo

-----

See it in action: [demo here](https://jsfiddle.net/michaelsogos/w112m1o3/)

Installation

-----

#### Bower

```

bower install bootstrap-table-toolbar-buttons

```

Usage

-----

Include this extension after [Bootstrap-table](https://github.com/wenzhixin/bootstrap-table).

In case you use an AMD loader (like require.js) specify manually dependecies to jQuery, bootstrap and bootstrap-table (like shims in require.js).

```html

```

Simple example:

```html

    


      


        

            

              

                Item ID

                Name

                Price

              

            

            

              1ABC$1.00

              2DEF$2.00

              3GHI$3.00

              4XYZ$4.00

            

        

      
  

    

  

    

    


        
Edit

        
Delete

        
Action Here

        
And Action Here

    
  


    


        


            


                


                    ×

                    
Table Filters

                

                


                    Add here filter fields!

                

                


                    Reset Filters

                    Close

                

            

        

    
    


    

    $(function() {

        $('#grid').bootstrapTable({

            showRefresh: true,

            customToolbarButtons: [

                {

                    name: "grid-filters",

                    title: "Filters",

                    icon: "glyphicon-filter",

                    callback: onShowFiltersDialog

                }

            ]

        });

    });

    var onShowFiltersDialog = function(){

        $('#filters-dialog').modal('show');

    }

    

```

Options

-----

|Name                    |Type                 |Default   |Description|

|------------------------|---------------------|----------|-----------|

|customToolbarButtons    |Array                |[]        |An array of button object (see below).|

Button object

----

|Name                    |Type                 |Default   |Description|

|------------------------|---------------------|----------|-----------|

|name                    |String               |undefined |The attribute NAME of the button. It must be unique else just one button will be rendered.|

|title                   |String               |undefined |The attribute TITLE and ARIA-LABEL of the button.|

|icon                    |String               |undefined |The css class name of the button (usually a glyphicon), it depend on the option *iconsPrefix*.|

|callback                |Function             |undefined |The function will be called when user raise CLICK event to the button.|