开发者

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜