gpt4 book ai didi

javascript - DHTMLX 网格列拖放到 DHTMLX 表单文本框中

转载 作者:行者123 更新时间:2023-11-27 22:58:12 25 4
gpt4 key购买 nike

如何从 DHTMLX 网格中选择一行的列并将其拖放到 DHTMLX 表单的文本框中并设置值?

最佳答案

没有标准功能来实现此类用例。

可以将表单注册为放置区域,因此将行从网格拖动到表单将产生一个事件。在事件处理程序中,您将获得有关拖动的行以及表单中发生放置的 HTML 元素的信息

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="//cdn.dhtmlx.com/edge/dhtmlx.css"/>
<script src="//cdn.dhtmlx.com/edge/dhtmlx.js"></script>
<script>
var myGrid, myForm;
function doOnLoad(){
myGrid = new dhtmlXGridObject('gridbox');
myGrid.setImagePath("codebase/imgs/");
myGrid.setHeader("Book Title,Author,Sales");
myGrid.setInitWidths("150,150,80");
myGrid.setColTypes("ed,ed,ed");
myGrid.setColSorting("int,str,str");
myGrid.enableDragAndDrop(true);
myGrid.enableAutoWidth(true);
myGrid.init();
var gridData={
rows:[
{ id:1, data: ["A Time to Kill", "John Grisham", "100"]},
{ id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
{ id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
]
};
myGrid.parse(gridData,"json");
var formData = [
{type: "input", label: "Book Title", value: "", name:"s_inp"},
];
myForm = new dhtmlXForm("myForm", formData);
var drop_inp=myForm.getInput("s_inp");
myGrid.dragger.addDragLanding(drop_inp, new s_control);
}

function s_control(){
this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
targetHtmlObject.style.backgroundColor="";
targetHtmlObject.value=sourceHtmlObject.parentObject.parentNode.cells[0].textContent;
// cells[0] - first column of the grid row
};
this._dragIn=function(htmlObject,shtmlObject){
htmlObject.style.backgroundColor="#fffacd";
return htmlObject;
};
this._dragOut=function(htmlObject){
htmlObject.style.backgroundColor="";
return this;
}
}
</script>
</head>
<body onload="doOnLoad()">
<div id="gridbox" style="width:400px;height:170px;background-color:white;"></div>
<div id="myForm" style="height:150px;"></div>
</body>
</html>

关于javascript - DHTMLX 网格列拖放到 DHTMLX 表单文本框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37389322/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com