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,

 

Esta mensagem e seus anexos podem conter informações confidenciais ou privilegiadas. Se você não é o destinatário dos mesmos você não está autorizado a utilizar o material para qualquer fim. Solicitamos que você apague a mensagem e avise imediatamente ao remetente. O conteúdo desta mensagem e seus anexos não representam necessariamente a opinião e a intenção da empresa, não implicando em qualquer obrigaçâo ou responsabilidade da parte da mesma.
This message may contain confidential and/or privileged information. If you are not the addressee or authorized to receive this for the addressee, you must not use, copy, disclose or take any action based on this message or any information herein. If you have received this message in error, please advise the sender immediately by reply e-mail and delete this message. The contents of this message and its attachments do not necessarily express the opinion or the intention of the company, and do not implies any legal obligation or responsibilities from this company. 
Postado por às

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)