hello and thanks for your help, i join to a zip witch contains a part of my project
- i need for columns ‘pays’, ‘ville’ and ‘vehicule’ a drop down filter search who filter on data and not key. those 3 columns are dropdownlist on cells values
- For column “Carburant” i need an input search filter
-For column ‘Commercialisation’, i need a checkbox that select/deselect all row and a filter search based on true/false. - i also need the header to be fixed when i navigated on the table
I also noticed that when i scroll on the table, some weird effects, as if the table was duplicated or parts of it disappeared.
Thanks you !
Oumaïma Monnier
here the code
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<script type="text/javascript" src="<s:url value='./handsontable-pro/handsontable.full.min.js'/>"></script>
<link rel="stylesheet" type="text/css" media="screen"href="<s:url value='./handsontable-pro/handsontable.full.min.css'/>" />
</head>
</html>
<script>
function getDropDownList(mapToRender, title) {
var $select = $('<select></select>');
var $emptyOption = $("<option>" + title + "</option>");
$select.append($emptyOption);
$.each(mapToRender, function (key, value) {
var $option = $("<option></option>", {
"text": value,
"value": key
});
$select.append($option);
});
return $select;
}
/**
*
* @param {type} select
* @param {type} data
* @returns {unresolved}
*/
function selectOption(select, data) {
select.find("option:selected").removeAttr("selected");
select.find("option[value="+data+ "]").attr("selected", "selected");
return select.prop("outerHTML");
}
function dropDownVilleRenderer(instance, td, row, col, prop, value, cellProperties) {
td.innerHTML = selectOption(listeDeroulanteVille, value);
return td;
}
function dropDownPaysRenderer(instance, td, row, col, prop, value, cellProperties) {
td.innerHTML = selectOption(listeDeroulantePays, value);
return td;
}
function dropDownVehiculeRenderer(instance, td, row, col, prop, value, cellProperties) {
td.innerHTML = selectOption(listeDeroulanteVehicule, value);
return td;
}
var container = document.getElementById('example-handsontable');
var hot = new Handsontable(container, {
data: donneesAnonymes,
rowHeaders: true,
height: 500,
colHeaders: [
'Pays', /*0*/
'Ville', /*1*/
'Véhicule', /*2*/
'date', /*3*/
'Prix', /*4*/
'Carburant', /*5*/
'Commercialisation', /*6*/
'Prix coutant', /*7*/
'Marge' /*8*/
],
hiddenColumns: {
columns: [7, 8]
},
columns: [{
data: 'pays',
renderer: dropDownPaysRenderer,
className: 'liste-pays'
}, {
data: 'ville',
renderer: dropDownVilleRenderer,
className: 'liste-ville'
}, {
data: 'vehicule',
renderer: dropDownVehiculeRenderer,
className: 'liste-vehicule'
}, {
data: 'date',
type: 'date'
}, {
data: 'prix',
type: 'numeric'
}, {
data: 'carburant',
type: 'numeric'
}, {
data: 'commercialisation',
type: 'checkbox'
}, {
data: 'prixCoutant',
type: 'numeric'
}, {
data: 'marge',
type: 'numeric'
}],
afterInit: function () {
console.log("Handsontable initialized!");
var timeEnd = Date.now();
var temps = timeEnd - timeDebut;
console.log("Temps de chargement = " + temps);
},
fixedColumnsLeft: 3,
dropdownMenu: true,
filters: true
});
</script>
var donneesAnonymes = [
{
"pays": "1",
"ville": "2",
"vehicule": "4",
"date": "01/01/1998",
"prix": 92,
"carburant": "SP95",
"commercialisation": "true",
"prixCoutant": 5689,
"marge": 231
},
{
"pays": "2",
"ville": "2",
"vehicule": "3",
"date": "01/01/2000",
"prix": 5689,
"carburant": "DIESEL",
"commercialisation": "false",
"prixCoutant": 1024,
"marge": 231
},
{
"pays": "2",
"ville": "2",
"vehicule": "3",
"date": "01/01/1987",
"prix": 92,
"carburant": "DIESEL",
"commercialisation": "true",
"prixCoutant": 231,
"marge": 100
},
{
"pays": "4",
"ville": "5",
"vehicule": "4",
"date": "01/01/2017",
"prix": 100,
"carburant": "HUILE",
"commercialisation": "false",
"prixCoutant": 231,
"marge": 1024
},
{
"pays": "5",
"ville": "5",
"vehicule": "5",
"date": "01/01/1998",
"prix": 100,
"carburant": "DIESEL",
"commercialisation": "true",
"prixCoutant": 1024,
"marge": 100
}];