Page table editable implementation

Currently, I have used two easy-to-use editable tables:

 

X-editable

Supports Bootstrap, jqueryui, and jquery.

Usage:

No need to introduce jquery. Min. js.

Next page introduction:

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

JS call:

$(".deport").editable({ type: ‘select‘,source:deport});

 

There are two ways to edit: In-row opening and tips opening:

Popur

This is inline.

Code settings

$.fn.editable.defaults.mode = ‘inline‘;

　　

 

Editing method:

 $(‘#status‘).editable({        value: 2,            source: [              {value: 1, text: ‘Active‘},              {value: 2, text: ‘Blocked‘},              {value: 3, text: ‘Deleted‘}           ]    });

　　

$(‘#username‘).editable({    type: ‘text‘,    pk: 1,    url: ‘/post‘,    title: ‘Enter username‘});

Type: indicates the editing mode of mouse clicks. text indicates the text box, select indicates the drop-down, and source indicates the data source bound to the drop-down list. The following

• Text
• Textarea
• Select
• Date
• Datetime
• Dateui
• Combodate
• Html5types
• Checklist
• Wysihtml5
• Typeahead
• Typeaheadjs
• Select2

Another method for submitting verification is validate. It is worth noting that the validate method is called after modification, but it does not indicate that the data is already on the page, at this time, the data has not been updated to the page.

Also provides Ajax submitted, for more information: http://vitalets.github.io/x-editable/docs.html

 

 

Editabletablewidget

This is much simpler

Http://mindmup.github.io/editable-table/

 

Usage:

$(‘#table‘).editableTableWidget();

Verification data:

$(‘table td‘).on(‘validate‘, function(evt, newValue) {if (....) { return false; // mark cell as invalid }});

Modification completion event:

$(‘table td‘).on(‘change‘, function(evt, newValue) {// do something with the new cell value if (....) { return false; // reject change}});

Here, onchange is different from X-edittable. Here, onchange is the callback triggered after the data has been modified.

Tip: This JS will make all TD editable. If you don't want to edit a cell, replace the TD tag with th.

 

Page table editable implementation