Skip to content

Instantly share code, notes, and snippets.

@lutsen

lutsen/index.html

Created March 11, 2014 14:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lutsen/9487072 to your computer and use it in GitHub Desktop.
Save lutsen/9487072 to your computer and use it in GitHub Desktop.
Download ZIP
Make X-editable work with List.js in a Booststrap 3 styled table. The problem: X-editable will mess up the table layout when used on a <td> element. But List.js won't work if the table data is in another element inside the <td> element. The solution: create a <span> element every time the editable <td> is clicked, and remove it every time the X-…
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>X-editable and List.js Datagrid</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<div id="contacts">
<input type="text" class="search" placeholder="Search" />
<table class="table" id="datagrid">
<thead>
<tr>
<th class="sort name" data-sort="name">Name</th>
<th class="sort age" data-sort="age">Age</th>
<th class="sort city" data-sort="city">City</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="name">Piet</td>
<td class="age">27</td>
<td class="city">Stockholm</td>
</tr>
<tr>
<td class="name">Jonas</td>
<td class="age">-132</td>
<td class="city">Berlin</td>
</tr>
<tr>
<td class="name">Gustaf</td>
<td class="age">-23</td>
<td class="city">Utrecht</td>
</tr>
<tr>
<td class="name">Fredrik</td>
<td class="age">26</td>
<td class="city">Goteborg</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script -->
<script src="js/list.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript">
var options = {
valueNames: ['name', 'age', 'city' ]
};
// Init list
var contactList = new List('contacts', options);
$('#datagrid tbody tr').each(function (index) {
$(this).find('td').each(function () {
// Link between X-editable and List.js
$(this).data('name', $(this).attr('class'));
$(this).click(function() {
if ($(this).find('span').length == 0) { // Only do this once
$(this).wrapInner('<span></span>'); // Wrap in span so x-editable wont break table
span = $(this).find('span');
span.editable({
type: 'text',
pk: 1,
url: ''
});
// Show X-editable
setTimeout(function(){
span.editable('show');
},0);
span.on('save', function(e, params) {
// Use index and name data attributes to update List.js value
td = $(this).parent();
td.text(this.value); // Unwrapping
newValue = new Object();
newValue[td.data('name')] = params.newValue; // Get X-editable value
contactList.items[td.parent().index()].values(newValue); // Set List.js value
});
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment