jeditable: limit editing to specific columns???
jeditable: limit editing to specific columns???
mvelasquez
Posts: 17Questions: 0Answers: 0
I'm utilizing jeditable to be able to edit the table data.
however, i would like to limit the editable columns to just 2 columns rather than the entire table.
in the documentation it states that i can do this by using the selector, but i don't know which function to call or how to build the function to return only specific columns.
how would i go about doing this.
example, instead of "$('td', oTable.fnGetNodes()).editable", i'd like something like $("function to return columns 3 and 4").editable
_________________________________
$('td', oTable.fnGetNodes()).editable(getBaseURL() + 'Documents/TestEdit', {
"callback": function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function(value, settings) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px",
tooltip: 'Click to edit...'
});
however, i would like to limit the editable columns to just 2 columns rather than the entire table.
in the documentation it states that i can do this by using the selector, but i don't know which function to call or how to build the function to return only specific columns.
how would i go about doing this.
example, instead of "$('td', oTable.fnGetNodes()).editable", i'd like something like $("function to return columns 3 and 4").editable
_________________________________
$('td', oTable.fnGetNodes()).editable(getBaseURL() + 'Documents/TestEdit', {
"callback": function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata": function(value, settings) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px",
tooltip: 'Click to edit...'
});
This discussion has been closed.
Replies
I can't figure out how to return that in place of "this.parentNode.getAttribute('id')" which is returning blank.
I would also like to define different kinds of editing methods to different columns of the table (text field editing on one column, pop-up menu on another, etc.).
where (2) - number of column you need edit
----------- if you're not using the jeditable datatables plugin ------------
if you are adding .editable() to all TD, then obviously all columns will be affected. if instead you mark your columns with a class name (you can provide a classname for a column in DataTables using http://www.datatables.net/ref#sClass ) and only add .editable() to a selector for those classes then you've limited the editing to just those columns
note: sClass applies the class to the header as well, so your target should select only td.classname elements
[code]
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "sClass": "my_class", "aTargets": [ 0 ] }
],
"fnDrawCallback": function() {
$("td.my_class").editable();
}
} );
} );
[/code]
----------- if you ARE not using the jeditable datatables plugin ------------
http://code.google.com/p/jquery-datatables-editable/
The editable plugin lets you specify which columns receive which jeditable initialization by using an aoColumns array similar to DataTables' aoColumns array.
To keep a column from being editable, pass 'null' to that column in aoColumns (see 1st column in the example below, line 5).
This example is from http://jquery-datatables-editable.googlecode.com/svn/trunk/custom-editors.html
[code]
$(document).ready( function () {
$('#example').dataTable().makeEditable({
sUpdateURL: "UpdateData.php",
"aoColumns": [
null,
{
},
{
indicator: 'Saving platforms...',
tooltip: 'Click to edit platforms',
type: 'textarea',
submit:'Save changes',
fnOnCellUpdated: function(sStatus, sValue, settings){
alert("(Cell Callback): Cell is updated with value " + sValue);
}
},
{
//indicator: 'Saving Engine Version...',
tooltip: 'Click to select engine version',
loadtext: 'loading...',
type: 'select',
onblur: 'cancel',
submit: 'Ok',
loadurl: 'EngineVersionList.php',
loadtype: 'GET',
sUpdateURL: "CustomUpdateEngineVersion.php"
},
{
indicator: 'Saving CSS Grade...',
tooltip: 'Click to select CSS Grade',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
sUpdateURL: function(value, settings){
alert("Custom function for posting results");
return value;
}
}
]
});
});
[/code]
Did you have to persist that data? I am trying to create a table that has one editable column that will be used to insert quantities, the other column is a list of references. Those quantities and references will be inserted into a second table. I need to persist that data, is there an easy way to do this? Or will I have to use localStorage to do this?
Is the editable part of datatables? Or is it a third-party plug-in ?
Can you provide me the link to the plugin, thanks!