论坛首页 → Web前端技术论坛 →

dhtmlxgrid cell采用 模态窗口输入数据

浏览 4466 次
锁定老帖子 主题：dhtmlxgrid cell采用 模态窗口输入数据
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • wdzwdz
  • 等级: 初级会员
  • 性别:
  • 文章: 18
  • 积分: 80
  • 来自: 杭州
   发表时间：2009-01-25   最后修改：2009-01-25
附件 eXcell_popWin.rar 是定义的 eXcell_popWin
附件 dhtmlxgrid-ModalWinDialog.rar 是整个例子的文件


参考
http://www.iteye.com/topic/73776 如何给dhtmlxgrid加弹出窗口  <BR> http://www.iteye.com/topic/320483 扩展eXcell 实现多个超级链接


大致思路：
  <1>先定一个用于dhtmlxgrid弹出窗口用的eXcell,也就是 eXcell_popWin，参考eXcell_popWin.js
  <2>定义dhtmlxgrid使用的xml文件：grid2.xml   ,参考附件图片 image1.jpg
  <3>定义主页面：oWin2.html 参考 附件图片 image2.jpg
  <4>定义弹出窗口页面:win2.html 参考 附件图片 image3.jpg

/***----------------------------------------------------------*****/

1.定义相应eXcell:eXcell_popWin
/*********
主题：如何给dhtmlxgrid加弹出窗口
@see http://www.iteye.com/topic/73776
@see http://www.iteye.com/topic/320483

example
  <cell>myvalue^http://news.sina.com.cn^select</cell>
*******/


function eXcell_popWin(cell)
{
  var cellVal="";
  try
  {
   this.cell = cell;
    this.grid = this.cell.parentNode.grid;
  }catch(er){}



this.getValue = function(){
    var valsAr = this.cell.val.split("^");
    return   valsAr[0];
}



this.setValue = function(val){
   var valsAr = val.split("^");
   if(valsAr.length==1)
     valsAr[0] = "";

   var popMethod = valsAr[1];
   this.cell.val = val;
   var rowid = this.cell.parentNode.idd;
   var  colIdx =  this.cell._cellIndex;

   //alert('rowid=' + rowid +",colIdx=" +colIdx);
   //alert('popMethod' +popMethod);

   popMethod =   popMethod + "(" + rowid + "," + colIdx+ ")";
   //alert('popMethod' +popMethod);
   var buttonLabel = '...';

   if(valsAr[2]){
    buttonLabel  = valsAr[2];
   }

   this.cell.buttonLabel = buttonLabel;

   var div ="<div>" +valsAr[0] +"  <input type='button' value='" + buttonLabel + "' onclick='" + popMethod +  "'>" + "</div>";
   //alert('div' +div);
   this.cell.innerHTML = div;
   this.cell.link = valsAr[1];
}

this.getLink =function (){
     return   this.cell.link;
  }

this.getButtonLabel = function (){
return   this.cell.buttonLabel;
}
}


eXcell_popWin.prototype = new eXcell;


  • 大小: 14.2 KB
  • 大小: 9.7 KB
  • 大小: 2.8 KB
返回顶楼
         
  • wdzwdz
  • 等级: 初级会员
  • 性别:
  • 文章: 18
  • 积分: 80
  • 来自: 杭州
   发表时间：2009-01-25  
2.主页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>DHTML Grid samples. dhtmlXGrid - Initialize object on page</title>
<meta name="KEYWORDS" content="dhtmlxgrid, dhtml grid, javascript grid, javascript, DHTML, grid, grid control, dynamical scrolling, xml, AJAX, API, cross-browser, checkbox, XHTML, compatible, gridview, navigation, script, javascript navigation, web-site, dynamic, javascript grid, dhtml grid, dynamic grid, item, row, cell, asp, .net, jsp, cold fusion, custom tag, loading, widget, checkbox, drag, drop, drag and drop, component, html, scand">

<meta name="DESCRIPTION" content="Cross-browser DHTML grid with XML support and powerful API. This DHTML JavaScript grid can load its content dynamically from server using AJAX technology.">

</head>
<style>
body {font-size:12px}
.{font-family:arial;font-size:12px}
h1 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
div.hdr{
background-color:lightgrey;
margin-bottom:10px;
padding-left:10px;
}
</style>
<body>
<div class="hdr">dhtmlxgrid open window sample<p><B>Author:</B>rautinee <B>Email:</B>rautinee@yahoo.com.cn</div>

<link rel="STYLESHEET" type="text/css" href="css/dhtmlXGrid.css">
<script  src="js/dhtmlXCommon.js"></script>
<script  src="js/dhtmlXGrid.js"></script>
<script  src="js/dhtmlXGridCell.js"></script>
<script  src="js/eXcell_popWin.js"></script>

<table width="600">
<tr>
<td>
<div id="gridbox" width="100%" height="250px" style="background-color:white;overflow:hidden"></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<hr>

<script>
function modUserName(rowid,colIdx)
{
  //这个函数就是我们在xml中需要调用的
  var cell  = mygrid.cells(rowid,colIdx);
  //能弹出模态窗口； 
  var res =  window.showModalDialog("win2.html", "选择","width=400,height=350");
// window.showModalDialog("testpp1.html","Dialog   Arguments   Value","dialogHeight:   400px;   dialogWidth:   400px");
  //alert('res=' +res);
  var link  = cell.getLink();
  var val = res + "^" +  link + "^" + cell.getButtonLabel();

  //根据结果处理
  cell.setValue(val);

}

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("imgs/");
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("100,250")
mygrid.setColAlign("center,center")
mygrid.setColTypes("ro,popWin");
mygrid.setColSorting("int,str")
mygrid.enableMultiselect(true)
mygrid.init();
mygrid.loadXML("grid2.xml");
</script>


</body>
</html>
返回顶楼
          回帖地址
0 请登录后投票
  • wdzwdz
  • 等级: 初级会员
  • 性别:
  • 文章: 18
  • 积分: 80
  • 来自: 杭州
   发表时间：2009-01-25  
3.弹出窗口

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script>
function updateData()
{
//opener.mygrid.cell.innerHTML=document.getElementById('content').value;
//opener.mygrid.cell.val=document.getElementById('content').value+"^modUserName('"+document.getElementById('content').value+"')"
//if(opener){
  // opener.result = document.getElementById('content').value;
//}
this.window.returnValue =document.getElementById('content').value;
window.close();
}
</script>
content:<INPUT TYPE="text" NAME="content" id="content">
<INPUT TYPE="button" onclick="updateData()" value="提交">
</BODY>
</HTML>
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics