Jeditable plugin - All columns editable at same time
I am working with Jeditable plugin. What I'm trying to do is click a button and all the fields in a certain row become editable and automatically go to their editable state. So in other words, I have a table, I want to click an "Edit" button on the side of a row and all the columns in that row become editable. Is this possib开发者_如何学运维le?
Yes, it is possible.
Let's say you use Jeditable the way that the user has to confirm the modification, the same way as on the demo site; look at the "Character counter" section: Jeditable Custom Inputs.
And than you have to put a button somewhere, which causes the elements to be editable. For example, if the elements have the class "edit
" (e.g.: <div class="edit">blah blah</div>
) and in the Jeditable code the event:'dblclick'
is set (which means you have to double-click to edit the field), the following code does exactly what you want (tested, working!):
<div>
<div class="edit charcounter">blah blah</div>
</div>
<div>
<button type="button" class="edit_all_btns">Click this button and all the fields will become editable!</button>
</div>
<script type="text/javascript">
<!--
$(document).ready(function () {
$(".charcounter").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
indicator: "<img src='http://www.appelsiini.net/projects/jeditable/img/indicator.gif'>",
type: "charcounter",
submit: 'OK',
tooltip: "Click to edit...",
onblur: "ignore",
charcounter: {
characters: 60
},
event: 'dblclick'
});
$('.edit_all_btns').click(function () {
$('.edit').dblclick();
});
});
// -->
</script>
Demo
But here's a more elaborated, working jsFiddle-example with a table, where you can try the code:
http://jsfiddle.net/Sk8erPeter/qjrJX/
精彩评论