1. 首頁
  2. 問答
  3. 將DHTMLX網格列拖放到DHTMLX表單文本框中

將DHTMLX網格列拖放到DHTMLX表單文本框中

2016-05-23 88 views

回答

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> 
 
\t var myGrid, myForm; 
 
    function doOnLoad(){ 
 
    \t myGrid = new dhtmlXGridObject('gridbox'); 
 
    \t myGrid.setImagePath("codebase/imgs/"); 
 
    \t myGrid.setHeader("Book Title,Author,Sales"); 
 
    \t myGrid.setInitWidths("150,150,80"); 
 
     myGrid.setColTypes("ed,ed,ed"); 
 
    \t myGrid.setColSorting("int,str,str"); 
 
    \t myGrid.enableDragAndDrop(true); 
 
    \t myGrid.enableAutoWidth(true); 
 
    \t myGrid.init(); 
 
     var gridData={ 
 
      rows:[ 
 
      { id:1, data: ["A Time to Kill", "John Grisham", "100"]}, 
 
\t \t  { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]}, 
 
\t \t  { id:3, data: ["The Rainmaker", "John Grisham", "-200"]} 
 
\t \t ] 
 
\t \t }; 
 
\t \t myGrid.parse(gridData,"json"); 
 
     var formData = [ 
 
      {type: "input", label: "Book Title", value: "", name:"s_inp"}, 
 
    \t ]; 
 
    \t myForm = new dhtmlXForm("myForm", formData); 
 
     var drop_inp=myForm.getInput("s_inp"); 
 
     myGrid.dragger.addDragLanding(drop_inp, new s_control); 
 
\t } 
 
    \t \t 
 
    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 
 
     }; 
 
\t this._dragIn=function(htmlObject,shtmlObject){ 
 
     htmlObject.style.backgroundColor="#fffacd"; 
 
     return htmlObject; 
 
\t }; 
 
     this._dragOut=function(htmlObject){ 
 
     htmlObject.style.backgroundColor=""; 
 
     return this; 
 
     } 
 
    \t } 
 
</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>

來源

2016-05-24 16:14:45 sematik

相關問題

 相關問題