jQuery Editable Data Table with Custom Fields
File Size: | 4.8 KB |
---|---|
Views Total: | 51895 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Custom Fields is a jQuery & Bootstrap based data table which allows you to add, edit or delete custom fields with ease.
How to use it:
1. Include the jQuery javascript library, custom-fields.js
, and Twitter Bootstrap 3 in the document.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
2. Include the Font Awesome 4 for the icons.
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
3. Create an empty table in the document.
<table id="data" class="table table-striped table-condensed"> </table>
4. Setup the plugin at the beginning of the custom-fields.js
.
var target = '#data'; var customFields = { data: { 1: { enabled: true, fieldName: 'COMPANYCODE', prettyName: 'Company Name', fieldType: 'OEM', fieldValue: '' }, 2: { enabled: true, fieldName: 'CLIENTID', prettyName: 'Client ID', fieldType: 'OEM', fieldValue: '' }, 3: { enabled: false, fieldName: '', prettyName: '', fieldType: '', fieldValue: '' }, 4: { enabled: false, fieldName: '', prettyName: '', fieldType: '', fieldValue: '' }, 5: { enabled: false, fieldName: '', prettyName: '', fieldType: '', fieldValue: '' }, 6: { enabled: false, fieldName: '', prettyName: '', fieldType: '', fieldValue: '' }, 7: { enabled: false, fieldName: '', prettyName: '', fieldType: '', fieldValue: '' }, 8: { enabled: false, fieldName: '', prettyName: '', fieldType: '', fieldValue: '' }, 9: { enabled: false, fieldName: '', prettyName: '', fieldType: '', fieldValue: '' } }, xref: { // Key ['Label','column width',0|1] 1=admin only custom: ['#', '10%',0], actions: ['Actions', '5%',1], enabled: ['Enabled','5%',0], fieldName: ['Field', '20%',0], prettyName: ['Pretty Name','20%',0], fieldType: ['Type','30%',0], fieldValue: ['Value','10%',0] }, fieldTypes: [ [' ',' '], ['ENV','Environment (ENV)'], ['REG','Registry (REG)'], ['WMI','Windows Management Inst. (WMI)'], ['OEM','Original Equipment Manuf.(OEM)'] ], mode: { row1: 'view', row2: 'view', row3: 'view', row4: 'view', row5: 'view', row6: 'view', row7: 'view', row8: 'view', row9: 'view', }, multiedit: false, admin: true }
This awesome jQuery plugin is developed by brianducharme. For more Advanced Usages, please check the demo page or visit the official website.