2009-12-07 6 views
0

Я пытаюсь создать полностью изменяемую таблицу данных с плагином Datatable Jquery. Полностью модифицируемая таблица i означает, что пользователь сможет редактировать, удалять, обновлять, добавлять столбцы в таблицу. Основываясь на примерах, в настоящее время я пытаюсь следующий яваскрипта код:JQuery Datatables Полностью модифицируемый стол данных

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; 
} 

Это прекрасно работает в пользовательском интерфейсе, но я понятия не имею о том, как передать информацию столбца в стороне сервера. Хорошо, я могу отправить новое значение столбца на скрипт server_ajax, но как я могу отправить другую связанную информацию о столбце, как уникальный идентификатор отредактированного столбца в базе данных.

ответ

0

, если вы хотите использовать DataTables здесь статья о том, что показывает, как реализовать CRUD функциональности с JQuery DataTables http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx все необходимые функциональные возможности помещаются в плагин, который добавляет jquery.datatables.editable.js CRUD функциональности поверх плагина DataTables.

+0

На самом деле я уже решил эту проблему, но забыл закрыть эту тему. Но так как ваш ответ разумный, я одобряю ваш. – systemsfault

-1

Извините, если это не ответит на ваш вопрос напрямую или если вы уже просмотрели этот параметр. Плагин jqGrid позволяет использовать все, что вы только что упомянули, и с 3.6 позволяет вам выбирать, какие столбцы отображать (что, я думаю, вы упомянули) ... гораздо меньше кода (я думаю). Ключевой частью является то, что он обрабатывает все ajax для вас, вам нужно только разобрать немного json и обработать структурированные данные на стороне сервера.

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

+0

Вопрос касался конкретно данных. Зачем публиковать о совершенно другом решении, а не добавлять в попытку решения. – crafter

 Смежные вопросы

  • Нет связанных вопросов^_^