webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
796 stars 271 forks source link

Delete Function not working #80

Closed vinessen closed 8 years ago

vinessen commented 9 years ago

Hello dear people, I have been struggling with adding the delete functionality in my table in vain.

i have defined a column action in my code as below in loaddata.php

$grid = new EditableGrid();

/*

$result = $mysqli->query('SELECT *, date_format(lastvisit, "%d/%m/%Y") as lastvisit FROM demo'); $mysqli->close();

// send data to the browser $grid->renderXML($result);

Now in my demo.js, i wished to add the little logo for delete in the column and when clicked, it deleted the record in that row and the code for this is as below:

function DatabaseGrid() { this.editableGrid = new EditableGrid("demo", { enableSort: true, tableLoaded: function() { //display a message _$("message").innerHTML = "

Ready!

";

    this.setCellRenderer("action", new CellRenderer({render: function(cell, value) { 
            cell.innerHTML = "<a onclick=\"if (confirm('Are you sure you want to delete this person ? ')) editableGrid.remove(" + cell.rowIndex + ");\" style=\"cursor:pointer\">" +
                             "<img src=\"delete.png\" border=\"0\" alt=\"delete\" title=\"delete\"/></a>";
        }})); 
    this.renderGrid("tablecontent", "testgrid");
    //datagrid.initializeGrid(this); 

    },

    modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
        _$("message").innerHTML = "<p class='ok'>New value is '" + newValue + "'</p>";
        updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
    }
});
this.fetchGrid(); 

}

Have i missed something? Thnx for the help :)

webismymind commented 9 years ago

Hello,

EditableGrid does not automatically manage the server-side actions, it's only a client-side widget.

So, you have to implement the server-side delete operation by yourself: when the delete icon is clicked, send an ajax request to your server in order to delete the row.

Please check this example: https://github.com/jybeaujean/editablegrid-mysql-example

Regards, Louis

2015-01-30 14:22 GMT+01:00 vinessen notifications@github.com:

Hello dear people, I have been struggling with adding the delete functionality in my table in vain.

i have defined a column action in my code as below in loaddata.php

##################################################### $grid = new EditableGrid();

/*

  • Add columns. The first argument of addColumn is the name of the field in the databse.
  • The second argument is the label that will be displayed in the header / $grid->addColumn('id', 'ID', 'integer', NULL, false); $grid->addColumn('lastname', 'Lastname', 'string'); $grid->addColumn('firstname', 'Firstname', 'string'); $grid->addColumn('description', 'Description', 'string'); / The column id_country and id_continent will show a list of all available countries and continents. So, we select all rows from the tables */ $grid->addColumn('email', 'Email', 'email'); $grid->addColumn('phone', 'Phone', 'string'); $grid->addColumn('country', 'Country', 'string'); $grid->addColumn('action', 'action', 'string');

$result = $mysqli->query('SELECT *, date_format(lastvisit, "%d/%m/%Y") as lastvisit FROM demo'); $mysqli->close();

// send data to the browser $grid->renderXML($result);

######################################################

Now in my demo.js, i wished to add the little logo for delete in the column and when clicked, it deleted the record in that row and the code for this is as below:

function DatabaseGrid() { this.editableGrid = new EditableGrid("demo", { enableSort: true, tableLoaded: function() { //display a message _$("message").innerHTML = "

Ready! ";

this.setCellRenderer("action", new CellRenderer({render: function(cell, value) {
        cell.innerHTML = "<a onclick=\"if (confirm('Are you sure you want to delete this person ? ')) editableGrid.remove(" + cell.rowIndex + ");\" style=\"cursor:pointer\">" +
                         "<img src=\"delete.png\" border=\"0\" alt=\"delete\" title=\"delete\"/></a>";
    }}));
this.renderGrid("tablecontent", "testgrid");
//datagrid.initializeGrid(this);

},

modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
    _$("message").innerHTML = "<p class='ok'>New value is '" + newValue + "'</p>";
    updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
}

}); this.fetchGrid();

}

Have i missed something? Thnx for the help :)

— Reply to this email directly or view it on GitHub https://github.com/webismymind/editablegrid/issues/80.

jakepens71 commented 9 years ago

I do not know if this is going to help you, but ill throw it up here in case it can help anyone. I am using editable grid with Ruby on Rails. (Everything is client side) and then data from the table is sent as JSON to my rails controller. However, here is how i did my delete:

I have a Javascript function called selectedRow(). This function changes the color of the row to specifiy which one is selected:

function selectedRow()
{
   if ( $(this).hasClass('selected');
   { 
          $(this).removeClass('selected');
   }
   else
   {
         $('tr.selected').removeClass('selected');
         $(this.)addClass('selected');
   }
 });

}

Then my delete method is as follows:

$('#Delete').click( function()
{
         var x = document.getElementsByClassName('selected');

          $('.selected').each(function ()
           { 
                    var ar = this.id;
                     editableGrid.removeRow(ar);

           });

 }