Pergunta

Eu estou tentando criar uma tabela de dados totalmente modificável com plugin de tabela de dados do jQuery no momento. Por tabela totalmente modificável eu quero dizer um usuário será capaz de editar, remover, atualizar, adicionar colunas na tabela. Com base nos exemplos, atualmente eu estou tentando o seguinte código javascript:

  function var_dump(obj) {
       if(typeof obj == "object") {
        return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
       } else {
        return "Type: "+typeof(obj)+"\nValue: "+obj;
       }
    }//end function var_dump

      var oTable;
      var giRedraw = false;
      var giCount=11;
      $(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
      $("#example tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
          $(this.nTr).removeClass('row_selected');
      });
          $(event.target.parentNode).addClass('row_selected');
      });
/* Add a click handler for the delete row */
      $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        var iRow = oTable.fnGetPosition( anSelected[0] );
        oTable.fnDeleteRow( iRow );
        } );

                oTable = $('#example').dataTable( {
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "lib/server_processing.php",
                    "fnDrawCallback": function () {
                        $('#example tbody td').editable( 'lib/editable_ajax.php', {
                "callback": function( sValue, y ) {
                alert(sValue);
                                /* Redraw the table from the new data on the server */
                                oTable.fnDraw();
                            },
                            "height": "14px"
                        } );
                    }
                } );
      } );

function fnClickAddRow() {
  oTable.fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4",
    giCount+".5", ]
 );
 giCount++;
}


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
  var aReturn = new Array();
  var aTrs = oTableLocal.fnGetNodes();

  for ( var i=0 ; i<aTrs.length ; i++ )
  {
    if ( $(aTrs[i]).hasClass('row_selected') )
    {
      aReturn.push( aTrs[i] );
    }
  }
  return aReturn;
}

Esta multa trabalha na interface do usuário, mas eu não tenho nenhuma idéia sobre como enviar as informações de coluna para o lado do servidor. Ok eu posso enviar o novo valor da coluna para o script server_ajax mas como eu posso enviar a outras informações relacionadas sobre a coluna como id único da coluna editada no banco de dados.

Foi útil?

Solução

Se você quiser DataTables uso aqui é artigo sobre que mostra como implementar funcionalidades CRUD com JQuery DataTables http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx todas as funcionalidades necessárias são colocados nas jquery.datatables.editable.js plugin que adiciona funcionalidades CRUD no topo de DataTables plugin.

Outras dicas

desculpe se isso não responder à sua pergunta diretamente, ou se você já olhou para esta opção. O plugin jqGrid permite tudo o que você acabou de mencionar, ea partir de 3.6 permite que você escolha quais colunas exibir (que eu acho que você também mencionou) ... em muito menos código (eu acho). O ser chave parte que ele lida com todo o ajax para você, você só precisa analisar um pouco JSON e manipular os dados estruturados no lado do servidor.

http://www.trirand.com/jqgridwiki/doku.php

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top