How to edit column header using Handson Table
While using Handson Table, I faced a issue of making Headers editable.
The HandsonTable plugin can be downloaded from the following link:
github
The solution which I got for making headers editable is as follows:-
<div id="example" class="dataTable"></div>
$(document).ready(function () {
var session;
var colHeadings = ['A', 'B', 'C'];
var data = [
['2009', 0, 2941555],
['2009', 0, 2941555]
],
container = document.getElementById('example'),
hot;
hot = new Handsontable(container, {
data: data,
colHeaders: colHeadings,
afterGetColHeader: function (col, TH) {
// nothing for first column
if (col == -1)
{
return;
}
}
});
$("th").dblclick(function (e) {
e.preventDefault();
var a = hot.getSelected();
var b = hot.getColHeader(a[1],a[2]);
var headers = hot.getColHeader();
var value;
if($("th").find("input[name='id']").val())
{
value = $("th").find("input[name='id']").val();
headers[session] = value;
session = a[1];
headers[a[1]]="<input name='id' type='text' value="+b+"\>";
hot.updateSettings({
colHeaders: headers
});
}
else
{
session = a[1];
headers[a[1]]="<input name='id' type='text' value="+b+"\>";
hot.updateSettings({
colHeaders: headers
});
$(this).find("input[name='id']").focus();
}
});
$("th").change(function (e) {
e.preventDefault();
var a = hot.getSelected();
var b = hot.getColHeader(a[1],a[2]);
var headers = hot.getColHeader();
var value = $(this).find("input[name='id']").val();
headers[a[1]] = value;
hot.updateSettings({
colHeaders: headers
});
});
});
You can try this code in Jsfiddle or go to the following link:
jsfiddle.net
0 Comment(s)