Hi,
I’m testing drag-and-drop sortering and i have a strange result when i reload my gant : after reload, the order is not the same that i’ve set with drag and drop.
Maybe i’ve made a mistake somewhere but i can’t see where…
My code:
[code]
Changement parc info<script src="codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<script src="codebase/locale/locale_fr.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript" src="http://export.dhtmlx.com/gantt/api.js"></script>
<script charset="utf-8" type="text/javascript" src="codebase/ext/dhtmlxgantt_tooltip.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css">
html, body {
height:100%;
padding:0px;
margin:0px;
overflow: hidden;
}
.gantt_task_progress {
text-align:left;
padding-left:10px;
box-sizing: border-box;
color:white;
font-weight: bold;
}
.gantt_task_link.start_to_start .gantt_line_wrapper div{
background-color: #dd5640;
}
.gantt_task_link.start_to_start:hover .gantt_line_wrapper div{
box-shadow: 0 0 5px 0px #dd5640;
}
.gantt_task_link.start_to_start .gantt_link_arrow_right{
border-left-color: #dd5640;
}
.gantt_task_link.finish_to_start .gantt_line_wrapper div{
background-color: #7576ba;
}
.gantt_task_link.finish_to_start:hover .gantt_line_wrapper div{
box-shadow: 0 0 5px 0px #7576ba;
}
.gantt_task_link.finish_to_start .gantt_link_arrow_right{
border-left-color: #7576ba;
}
.gantt_task_link.finish_to_finish .gantt_line_wrapper div{
background-color: #55d822;
}
.gantt_task_link.finish_to_finish:hover .gantt_line_wrapper div{
box-shadow: 0 0 5px 0px #55d822;
}
.gantt_task_link.finish_to_finish .gantt_link_arrow_left{
border-right-color: #55d822;
}
.btn {
background-color: #f5f7fa;
border-color: #e6e9ed;
color: #333;
border-radius: 2px;
curdsor: pointer !important;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
padding: 6px 12px;
text-align:center;
vertical-align: middle;
border: 1px;
margin: 10px;
}
.btn:hover {
background-color: #e6e9ed;
color: #333;
curdsor: pointer !important;
}
</style>
Changement de parc 2015
gantt.config.autosize = true; gantt.config.scale_unit = "month"; gantt.config.step = 1; gantt.config.date_scale = "%F, %Y"; gantt.config.min_column_width = 50; gantt.config.scale_height = 90; function myFunc(task){
if(task.color!="")
return "<div style='color:"+task.color+"'>"+task.text+"</div>";
return task.text;
};
var weekScaleTemplate = function(date){
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.subscales = [
{unit:"week", step:1, template:weekScaleTemplate},
{unit:"day", step:1, date:"%D" }
];
gantt.templates.scale_cell_class = function(date){
if(date.getDay()==0||date.getDay()==6){
return "weekend";
}
};
gantt.templates.task_cell_class = function(item,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend"
}
};
gantt.locale.labels["section_progress"] = "Progression";
gantt.locale.labels["couleur"] = "Couleur";
gantt.templates.tooltip_text = function(start,end,task){
return task.text;
};
gantt.config.lightbox.sections = [
{name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
{name: "progress", height: 22, map_to: "progress", type: "select", options: [
{key:"0", label: "Non démarrée"},
{key:"0.1", label: "10%"},
{key:"0.2", label: "20%"},
{key:"0.3", label: "30%"},
{key:"0.4", label: "40%"},
{key:"0.5", label: "50%"},
{key:"0.6", label: "60%"},
{key:"0.7", label: "70%"},
{key:"0.8", label: "80%"},
{key:"0.9", label: "90%"},
{key:"1", label: "Complète"}
]},
{name: "couleur", height: 22, map_to: "color", type: "select", options: [
{key:"", label:"Default"},
{key:"#37bc9b",label:"Primary"},
{key:"#8cc152",label:"Vert"},
{key:"#3bafda",label:"Bleu"},
{key:"#e9573f",label:"Rouge"},
{key:"#f6bb42",label:"Orange"},
{key:"#4b66a0",label:"Bleu foncé"},
{key:"#e04c86",label:"Rose"},
{key:"#3e5a70",label:"Gris Foncé"}
]},
{name: "time", height: 72, type: "duration", map_to: "auto", time_format:["%d", "%m", "%Y", "%H:%i"]}
];
gantt.templates.link_class = function(link){
var types = gantt.config.links;
switch (link.type){
case types.finish_to_start:
return "finish_to_start";
break;
case types.start_to_start:
return "start_to_start";
break;
case types.finish_to_finish:
return "finish_to_finish";
break;
}
};
gantt.config.columns = [
{name:"text", label:"Tâche", width:"*", tree:true, template:myFunc },
{name:"add", label:"", width:44 }
];
gantt.config.open_tree_initially = true;
gantt.config.order_branch = true;
gantt.templates.progress_text = function(start, end, task){
return "<span style='text-align:left;'>"+Math.round(task.progress*100)+ "% </span>";
};
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load('data.php');
var dp=new dataProcessor("data.php");
dp.init(gantt);
gantt.open();
</script>
the data.php :
[code]<?php
include (‘codebase/connector/gantt_connector.php’);
$res=mysql_connect(“localhost”,“root”,“admin”);
mysql_select_db(“gant”);
$gantt = new JSONGanttConnector($res);
$gantt->enable_log(“debug.log”,true);
//$gantt->mix(“open”, 1);
$gantt->enable_order(“sortorder”);
$gantt->render_links(“gantt_links”,“id”,“source,target,type”);
$gantt->render_table(“gantt_tasks”, “id”, “start_date,duration,text,progress,sortorder,parent,color”,"");
?>[/code]
My database :
[code]CREATE TABLE gantt_links (
id int(11) NOT NULL AUTO_INCREMENT,
source int(11) NOT NULL,
target int(11) NOT NULL,
type varchar(1) NOT NULL,
PRIMARY KEY (id)
)
CREATE TABLE gantt_tasks (
id int(11) NOT NULL AUTO_INCREMENT,
start_date datetime NOT NULL,
text varchar(255) NOT NULL,
progress float NOT NULL,
duration int(11) NOT NULL,
sortorder int(11) NOT NULL,
parent int(11) NOT NULL,
color varchar(15) NOT NULL,
PRIMARY KEY (id)
)[/code]