Javascript 行与行之间的可拖动项-google datatable
在这里,我有一个活动时间表,它是按一下拖拽出来的,但只是放在同一行。 代码:Javascript 行与行之间的可拖动项-google datatable,javascript,jquery,jquery-ui,google-visualization,draggable,Javascript,Jquery,Jquery Ui,Google Visualization,Draggable,在这里,我有一个活动时间表,它是按一下拖拽出来的,但只是放在同一行。 代码: var时间线=未定义; var数据=未定义; var-ekstra=null; var-ime=null; 加载(“可视化”,“1”); //将回调设置为在加载API时运行 setOnLoadCallback(drawVisualization); //加载可视化API时调用。 函数drawVisualization(){ //创建并填充数据表。 data=new google.visualization.DataTa
var时间线=未定义;
var数据=未定义;
var-ekstra=null;
var-ime=null;
加载(“可视化”,“1”);
//将回调设置为在加载API时运行
setOnLoadCallback(drawVisualization);
//加载可视化API时调用。
函数drawVisualization(){
//创建并填充数据表。
data=new google.visualization.DataTable();
data.addColumn('datetime','start');
data.addColumn('datetime','end');
data.addColumn('string','content');
data.addColumn('string','group');
data.addColumn('string','className');
//创建一些随机数据
变量名称=[“阿尔吉”、“巴尼”、“克里斯”、“佩拉”、“英里”];
输入法=姓名;
for(var n=0,len=names.length;n
演示和代码:
如何将此事件拖到一到第二行,等等。。。那么我如何才能使它在行之间拖动呢?
请告诉我一些想法
var timeline = undefined;
var data = undefined;
var ekstra = null;
var ime = null;
google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(drawVisualization);
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new google.visualization.DataTable();
data.addColumn('datetime', 'start');
data.addColumn('datetime', 'end');
data.addColumn('string', 'content');
data.addColumn('string', 'group');
data.addColumn('string', 'className');
// create some random data
var names = ["Algie", "Barney", "Chris", "Pera", "Mile"];
ime = names;
for (var n = 0, len = names.length; n < len; n++) {
var name = names[n];
var now = new Date();
var end = new Date(now.getTime() - 12 * 60 * 60 * 1000);
for (var i = 0; i < 5; i++) {
var start = new Date(end.getTime() + Math.round(Math.random() * 5) * 60 * 60*1000);
ekstra = new Date();
var end = new Date(start.getTime() + Math.round(4 + Math.random() * 5) * 60 * 60 * 1000);
var r = Math.round(Math.random() * 2);
var availability = (r === 0 ? "available" : (r === 1 ? "unavailable" : "maybe"));
var group = availability.toLowerCase();
var content = availability;
data.addRow([start, end, content, name, group]);
}
}
var kraj = new Date(now.getTime() + 12 * 60 * 60 * 2000);
data.addRows([
[ ekstra, kraj, 'Job ID#0001', 'Worker Name','av' ],
[new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0), 'Job ID#0001', 'Worker Name','av' ]
]);
// specify options
var options = {
width: "100%",
height: "99%",
layout: "box",
axisOnTop: true,
eventMargin: 10, // minimal margin between events
eventMarginAxis: 0, // minimal margin beteen events and the axis
editable: true,
showNavigation: true
};
// Instantiate our timeline object.
timeline = new links.Timeline(document.getElementById('mytimeline'));
// register event listeners
google.visualization.events.addListener(timeline, 'edit', onEdit);
// Draw our timeline with the created data and options
timeline.draw(data, options);
// Set a customized visible range
var start = new Date(now.getTime() - 4 * 60 * 60 * 1100);
var end = new Date(now.getTime() + 8 * 60 * 60 * 1000);
timeline.setVisibleChartRange(start, end);
}
function getRandomName() {
var names = ["Algie", "Barney", "Grant", "Mick", "Langdon"];
var r = Math.round(Math.random() * (names.length - 1));
return names[r];
}
function getSelectedRow() {
var row = undefined;
var sel = timeline.getSelection();
if (sel.length) {
if (sel[0].row != undefined) {
row = sel[0].row;
}
}
return row;
}
function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent||tmp.innerText;
}
// Make a callback function for the select event
var onEdit = function (event) {
var row = getSelectedRow();
var content = data.getValue(row, 2);
var availability = strip(content);
var newAvailability = prompt("Enter status\n\n" +
"Choose from: Available, Unavailable, Maybe", availability);
if (newAvailability != undefined) {
var newContent = newAvailability;
data.setValue(row, 2, newContent);
data.setValue(row, 4, newAvailability.toLowerCase());
timeline.draw(data);
}
};
var onNew = function () {
alert("Clicking this NEW button should open a popup window where " +
"a new status event can be created.\n\n" +
"Apperently this is not yet implemented...");
};