Question

如何从DHTMLX网格中选择一行，然后将其拖放到DHTMLX表格的文本框中并设置值？

Answer 1

没有标准功能来实现这种用例。

可以将表单注册为放置区域，因此将行从网格拖动到表单将生成一个事件。在事件处理程序中，您将获得有关拖动行和表单中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>

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

1 个答案: