DHTMLXグリッドの列をドラッグしてDHTMLXフォームのテキストボックスにドロップ

DHTMLXグリッドから行の列を選択し、DHTMLX形式のテキストボックスにドラッグアンドドロップして値を設定しますか？DHTMLXグリッドの列をドラッグしてDHTMLXフォームのテキストボックスにドロップ

2016-05-23 abhishek shakya

このような使用例を実現するための標準機能はありません。

フォームをドロップ領域として登録することができます。そのため、グリッドからフォームに行をドラッグするとイベントが生成されます。イベントハンドラでドロップが

<!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>

を発生する上でドラッグした行について、フォームのHTML要素についての情報を、持っています

出典

2016-05-24 16:14:45 sematik

DHTMLXグリッドの列をドラッグしてDHTMLXフォームのテキストボックスにドロップ

答えて

関連する問題