mindmup / editable-table

tiny jQuery/Bootstrap widget that makes a HTML table editable
MIT License
686 stars 324 forks source link

Support for non-editable columns #6

Open abdolence opened 10 years ago

abdolence commented 10 years ago

It would be cool if we can choose non-editable columns.

I've patched your widget like

element.find("td:not([data-editable='no'])").on('click keypress dblclick', showEditor)

and

element.find("td:not([data-editable='no'])").prop('tabindex', 1);
slypete commented 10 years ago

+1 thanks @abdmob

My specific use case involved more non-editable columns than editable, so my implementation is inverted.

element.find("td[data-editable='true']").on('click keypress dblclick', showEditor)

and

element.find("td[data-editable='true']").prop('tabindex', 1);
kronocharia commented 10 years ago

This is gonna sound like a really basic question but how am I meant to markup the td element to make use of these? ?

erobertson42 commented 10 years ago

@abdmob I would propose changing the value no to false. HTML/Javascript doesn't really use the yes/no convention as some other languages - best to keep things uniform. So...

element.find("td:not([data-editable='false'])").on('click keypress dblclick', showEditor);
element.find("td:not([data-editable='false'])").prop('tabindex', 1);

@kronocharia Just add an attribute of data-editable with a value of false to any td elements you want to prevent from being edited (or reverse everything with the changes from @slypete). For example...

<table>
    <tr>
        <td>This cell can be edited</td>
        <td data-editable='false'>This cell cannot be edited</td>
    </tr>
</table>
webgurus commented 10 years ago

Can I ask you on what line did you patch the widget? Not necessarily for me but others might have a problem finding the line where they need to make the changes.

awallat commented 10 years ago

Just look for the corresponding lines in "mindmup-editabletable.js", which is currently at line 92 and 113.

gamekid commented 10 years ago

My no-modification solution to this problem was to use <th> elements for any un-editable fields of the table. Depending on your styling situation, it could be easier to implement.

molecule3 commented 9 years ago

thanx gamekid, it's a good tips and work fine for my simple table. just use ' instead to disable a cell.

hasan commented 9 years ago

element.find('td[data-editable!="false"]').prop('tabindex', 1);

bakermanus commented 9 years ago

Why over complicate it? simple. add class to td that you want to have editable.

$('.class').on('click keypress dblclick', showEditor) AND element.find('.class').prop('tabindex', 1);

or you can add id as well

nicholasrpb commented 8 years ago

hi all,

i have tried to added this: element.find('th[data-try!="false"]').on('click keypress dblclick', showEditor) (line 92) element.find('th[data-try!="false"]').prop('tabindex', 1); (line113)

and set the column table as: th data-field="tool_name" data-sortable="true" data-filter-control="select" data-try="true"Tool Name

but i still couldnt edit any field from this ToolName column, is there anymore place i need to edit? kindly help on this item