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

Stack Overflow用户

提问于 2016-05-23 19:06:07

回答 1查看 283关注 0票数 1

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

javascript

dhtmlx

回答 1

Stack Overflow用户

发布于 2016-05-25 00:14:45

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37389322

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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