Nice, sleek and intuitive. A grid control especially designed for bootstrap.
jQuery Bootgrid is a UI component written for jQuery and Bootstrap (Bootstrap isn't necessarily required).
Everything you need to start quickly is:
- Include jQuery, jQuery Bootgrid and Bootstrap libraries in your HTML code.
- Define your table layout and your data columns by adding the
data-column-idattribute. - Specify your data URL used to fill your data table and set ajax option to
truedirectly on your table via data API.
<!DOCTYPE html>
<html>
</html>For more information check the documentation.
Examples you find here.
Instructions will follow soon!
<div data-action-links-id="myActionLinks">
<a href="link_to_view/{id}">View {sender.email}</a>
bootgridExecute[
if('{sender.email}' == 'sender4@test.de') {
'<a href="link_to_edit/{id}">Edit {sender.email}</a>'
}
]end
</div>Add a html formatter by adding the html-formatter option to your column like this:
<th data-column-id="sender.email" data-html-formatter="myHtmlFormatter">Sender</th>and this column will call a referenced div with the same html formatter. You can also execute javascript wrapped in bootgridExecute[javascript code here]end like this:
<div data-html-formatter-id="myHtmlFormatter">
<span class="label label-bootgridExecute['{sender.email}' == 'sender4@test.de' ? 'success' : 'warning']end">{sender.email}</span>
</div>jquery-bootgrid uses npm to install its own dependencies, and mono to build a NuGet package.
You should install both using your package manager. On macOS, this works as follows:
brew install npm
brew install mono
From the folder that jquery-bootgrid resides in, run:
npm install .
sudo npm install -g grunt
grunt
If you are done with your modifications, you should increase the version number in boewer.json and package.json, update the changelog, and then run:
grunt release
No instructions yet.
Copyright © 2014-2015 Rafael J. Staib Copyright © 2018 Deciso B.V.
Licensed under the MIT license.