terça-feira, 4 de janeiro de 2011

Grid Editável com Jquery

O Código abaixo cria um grid editável como mostra a imagem:
 
 
Existem vários exemplos na Net. O que eu gostei nesse foi a simplicidade. Confiram:
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI: Inline Edit Plugin Demo</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="ui.inlineedit.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="ui.inlineEdit.js"></script>
<script type="text/javascript">
 
$(function(){
    $('.editable').inlineEdit({
               save: function(event, ui) {
                       
                       // perform data save operations (i.e. Ajax post, iframe or hidden field)
                       
               },
               cancel: function(event) {
                       
                       // actions to perform on cancel
                       
               }
        });
});
 
</script>
</head>
<body>
 
<table>
    <tr><td><span class="editable">Joe Blogg</span></td></tr>
    <tr><td><span class="editable">John Doe</span></td></tr>
    <tr><td><span class="editable">Paul White</span></td></tr>
    <tr><td><span class="editable"> </span></td></tr> 
</table>
 
</body>
</html>

 

Vejam funcionando em: http://jquery-ui.googlecode.com/svn/branches/labs/inlineedit/demo.html

 

Até mais.

Nenhum comentário:

Postar um comentário