Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luis Paullo

Campos editaveis

Por , em Javascript

Recommended Posts

Luis Paullo    47

Luis Paullo
Postado

Salve Imaster..

 

Bom eu to aprendendo javascript(jquery).. so bem fraquinho mesmo..

 

Seguinte, tenho um script que me possibilita editar campos da Tabela (faze um update..). Ate ai tudo bem.

 

Funciona legal adcionei o Ajax pra faze a requisição e tals..

 

Porem me surgiu a ideia de que em uma coluna da tabela eu preciso de um input SELECT ,onde pegaria dados de um json..

ai que a porca torceu o rabo pro meu lado =X

 

possoal mais fera no jquery conserteza tira isso de letra. Vim pedir essa pequena ajuda..

 

segue o script e bem simples .

 

 

 

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
       <title></title>
   </head>
   <body>
       <table border="0" style="width: 99%" class="sample" id="tabledit">
           <caption>
               <span>Itens Por Pagina:</span><input type="text" size="15" value="10" name="p">            
           </caption>
           <thead>
               <tr>
                   <th></th>
                   <th style="display: none">ID</th>
                   <th>Imagem</th>
                   <th>Descricao</th>
                   <th>Galeria</th>
                   <th class="edit"> </th></tr>
           </thead>
           <tbody>                
               <tr>
                   <td class="edit"><input type="checkbox" value="4" name="4"></td>
                   <td style="display:none">4</td>
                   <td>imagem002.jpg</td>
                   <td>esse e a 2 imagem</td>
                   <td>5</td>                       

               <tr>
                   <td class="edit"><input type="checkbox" value="5" name="5"></td>
                   <td style="display: none;">5</td>
                   <td>asdasdasda</td>
                   <td>fgdfgdfgdfgdfg</td>
                   <td>1</td>                                               
               <tr>
                   <td class="edit"><input type="checkbox" value="6" name="6"></td>
                   <td style="display:none">6</td>
                   <td>dfgdfgdfgdfg</td>
                   <td>dfgdfgdfgdfgdfgdfgdfg</td>
                   <td>2</td>                      

               <tr>
                   <td class="edit"><input type="checkbox" value="7" name="7"></td>
                   <td style="display:none">7</td>
                   <td>sdfsdfsdfsdfs</td>
                   <td>sdfsdfsdfsdf</td>
                   <td>2</td>                      
           </tbody>
       </table>
   </body>
   <script type="text/javascript">
   $(function(){
       TABLE.formwork('#tabledit');
   });

   var TABLE = {};

   TABLE.formwork = function(table){
       var $tables = $(table);

       $tables.each(function () {
           var _table = $(this);
           _table.find('thead tr').append($('<th class="edit"> </th>'));
           _table.find('tbody tr').append($('<td class="edit"><input class="button" type="button" value="Edit"/></td>'))
       });

       $tables.find('.edit :button').live('click', function(e) {
           TABLE.editable(this);
           e.preventDefault();
       });
   }

   TABLE.editable = function(button) {
       var $button = $(button);
       var $row = $button.parents('tbody tr');
       var $cells = $row.children('td').not('.edit');
       var $array = [];
       if($row.data('flag')) { // in edit mode, move back to table
           // cell methods
           $cells.each(function () {
               var _cell = $(this);
               var ar = _cell.html(_cell.find('input').val());
               $array.push(ar.text());

           });

           $row.data('flag',false);
           $button.val('Edit');
           //salvando dados
           $.ajax({
               url:"exemplo.html",
               data:{data:$array},
               type:'POST',
               dataType:'json'         
           }).done(success());    
       }
       else { 
           // in table mode, move to edit mode
           // cell methods
           $cells.each(function() {
               var _cell = $(this);
               _cell.data('text', _cell.html()).html('');

               var $input = $('<input type="text" />')
               .val(_cell.data('text'))
               .width(_cell.width() - 15);

               _cell.append($input);

           })

           $row.data('flag', true);
           $button.val('Save');
       }
   }
   function success(){
           alert("Sucesso no editar!");

   }
</script>
</html>

 

 

 

desde já agradeço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

manica    2

manica
Postado

Luis Paullo,

retorne um array com dados do input select via json.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luis Paullo    47

Luis Paullo
Postado

eu sei..

 

Mais eu tenho que faze o script que cria os campos editaveis renderiza um SELECT qndo clica em edit.. ele renderiza apenas inputs texts

 

essa e minha dificuldade.

 

faz um teste no codigo pra você ve.. e so roda em html msm q funciona.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luis Paullo    47

Luis Paullo
Postado

hum..

 

queria implementa oque já tenho.. Faz o mesmo so que apenas pra input text..

 

bom vou da uma olhada nesse plugin!

ve se pego a ideia dele de renderiza o SELECT..

adicionar nesse trecho do código..

$cells.each(function() {
               var _cell = $(this);
               _cell.data('text', _cell.html()).html('');

//ele faz o input text
//mais quero em um <td id='select'>, renderize um input select

               var $input = $('<input type="text" />') 
               .val(_cell.data('text'))
               .width(_cell.width() - 15);

               _cell.append($input);

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito