Thx a lot! Am i doing something wrong?
$(document).ready(function () {
var url = "temperament.php";
var fields = [
{ name: 'id', map:'question_user_id', type: 'string' },
{ name: 'status', map: 'etat', type: 'string' },
{ name: 'hover', map: 'question_title', type: 'string'},
{ name: 'text', map: 'given_answer', type: 'string' },
{ name: 'resourceId', map: 'user_id', type: 'string' },
];
var source =
{
url: url,
id: 'id',
dataType: "json",
dataFields: fields
};
var dataAdapter = new $.jqx.dataAdapter(source, {
LoadComplete: function(record){
var record = dataAdapter.record;
var data=[];
var newDataItem={};
//on récupere la longueur du tableau
var recordLength = record.length;
for(var i=0; i<recordLength; i++){
newDataItem.id = Math.floor(Math.random()*10000);
newDataItem.status = record[i].status;
newDataItem.content = record[i].resourceId;
newDataItem.hover = record[i].hover;
newDataItem.text = record[i].text;
data.push(newDataItem);
}
return data;
},
loadError: function(jqXHR, status, error) {},
});
window.dataAdapter = dataAdapter;
var resourcesAdapterFunc = function () {
var resourcesSource =
{
localData: [
{ id: 0, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
{ id: 1, name: "Andrew Fuller", image: "../../images/andrew.png" },
{ id: 2, name: "Janet Leverling", image: "../../images/janet.png" },
{ id: 3, name: "Steven Buchanan", image: "../../images/steven.png" },
{ id: 4, name: "Nancy Davolio", image: "../../images/nancy.png" },
{ id: 5, name: "Michael Buchanan", image: "../../images/Michael.png" },
{ id: 6, name: "Margaret Buchanan", image: "../../images/margaret.png" },
{ id: 7, name: "Robert Buchanan", image: "../../images/robert.png" },
{ id: 8, name: "Laura Buchanan", image: "../../images/Laura.png" },
{ id: 9, name: "Laura Buchanan", image: "../../images/Anne.png" }
],
dataType: "array",
dataFields: [
{ name: "id", type: "number" },
{ name: "name", type: "string" },
{ name: "image", type: "string" },
{ name: "common", type: "boolean" }
]
};
var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
return resourcesDataAdapter;
}
var getIconClassName = function () {
return "jqx-icon-plus-alt";
}
$('#table').jqxKanban({
width: '100%',
height: 800,
template: "<div class='jqx-kanban-item' id=''>"
+ "<div class='jqx-icon jqx-icon-close-white jqx-kanban-item-template-content jqx-kanban-template-icon'></div>"
+ "<div class='jqx-kanban-item-text'></div>"
+ "<div style='display: none;' class='jqx-kanban-item-footer'></div>"
+ "</div>",
resources: resourcesAdapterFunc(),
source: dataAdapter,
// editer un element a la volée
itemRenderer: function (item,data) {
//$(item).find(".jqx-kanban-item-color-status").html("<span style='line-height: 23px; margin-left: 5px;'>" + resource.id + data.name + "</span>");
//$(item).find(".jqx-kanban-item-text").css('background', item.id);
item.on('dblclick', function (event) {
var contenu = $(event.target).text();
console.log(contenu);
var input = $("<textarea style='border: none; width: 100%; height:auto;' class='jqx-input' placeholder='" + contenu + "'>" + contenu + "</textarea>");
var addToHeader = false;
var header = null;
if (event.target.nodeName == "SPAN" && $(event.target).parent().hasClass('jqx-kanban-item-color-status')) {
var input = $("<input placeholder='test2' style='border: none; background: transparent; width: 80%; height:auto;' class='jqx-input'/>");
// add to header
header = event.target;
header.innerHTML = "";
input.val($(event.target).text());
$(header).append(input);
addToHeader = true;
}
if (!addToHeader) {
var textElement = item.find(".jqx-kanban-item-text");
input.val(textElement.text());
textElement[0].innerHTML = "";
textElement.append(input);
}
input.mousedown(function (event) {
event.stopPropagation();
});
input.mouseup(function (event) {
event.stopPropagation();
});
/* input.blur(function () {
var value = input.val();
if (!addToHeader) {
$("<span>" + value + "</span>").appendTo(textElement);
}
else {
header.innerHTML = value;
}
input.remove();
}); */
input.keydown(function (event) {
if (event.keyCode == 13) {
var texte = input.val()
$("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
$(event.target).remove();
$.ajax({
url: "stage7edit.php",
type: 'POST',
cache: false,
data: {
itemid: data.id,
content: texte
}
})
}
});
input.mousedown(function (event) {
if (event.keyCode == 13) {
var texte = input.val()
$("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
$(event.target).remove();
$.ajax({
url: "stage7edit.php",
type: 'POST',
cache: false,
data: {
itemid: data.id,
content: texte
}
})
}
});
input.focus();
});
},
columns: [
{ text: "A trier", iconClassName: getIconClassName(), dataField: "new", collapsible: false },
{ text: "Catégorie1", iconClassName: getIconClassName(), dataField: "cat1", collapsible: false },
{ text: "Catégorie2", iconClassName: getIconClassName(), dataField: "cat2", collapsible: false },
{ text: "Catégorie3", iconClassName: getIconClassName(), dataField: "cat3", collapsible: false },
{ text: "Catégorie4", iconClassName: getIconClassName(), dataField: "cat4", collapsible: false },
{ text: "Catégorie5", iconClassName: getIconClassName(), dataField: "cat5", collapsible: false },
{ text: "Catégorie6", iconClassName: getIconClassName(), dataField: "cat6", collapsible: false },
{ text: "Catégorie7", iconClassName: getIconClassName(), dataField: "cat7", collapsible: false }
]
});
document.querySelectorAll('.jqx-kanban-item')
.forEach(el => {
const itemId = el.id.replace('table_', ''); //id=table_1_407 par exemple
const tooltipContent = data
.filter(item => item.id == itemId)[0]
.hover;
console.log(itemId);
$(<code>#${el.id}</code>).jqxTooltip({
content: <code>${tooltipContent}</code>,
position: 'mouse',
name: 'itemTooltip'
});
})
$('#table').on('itemMoved', function (event) {
var args = event.args;
$.ajax({
url: "stage7update.php",
type: 'POST',
cache: false,
data: {
itemid: args.itemData.id,
column: args.newColumn.dataField,
userid: args.itemData.resourceId
}
})
});
/* // supprimer des cartes (non utilisé)
$('#table').on("itemAttrClicked", function (event) {
var args = event.args;
if (args.attribute == "template") {
$('#table').jqxKanban('removeItem', args.item.id);
}
}); */
// ajouter un element
var itemIndex = 0;
$('#table').on('columnAttrClicked', function (event) {
var args = event.args;
if (args.attribute == "button") {
args.cancelToggle = true;
if (!args.column.collapsed) {
$('#table').jqxKanban('addItem', { status: 'new',
text: "<input placeholder='(Element)' style='width: 96%; margin-top:2px; border-radius: 3px; border-color: #ddd; line-height:20px; height: 20px;' class='jqx-input' id='newItem" + itemIndex + "' value=''/>",
resourceId: '1' });
var input = $("#newItem" + itemIndex);
input.mousedown(function (event) {
event.stopPropagation();
});
input.mouseup(function (event) {
event.stopPropagation();
});
input.keydown(function (event) {
if (event.keyCode == 13) {
var texte = input.val();
$("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
$(event.target).remove();
$.ajax({
url: "stage7add.php",
type: 'POST',
cache: false,
data: {
itemid: "newItem" + itemIndex + Math.floor(Math.random()*10000),
content: texte,
column: args.column.dataField,
indice: "temperament"
}
})
}
});
input.focus();
itemIndex++;
}
}
});
});
