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

wdzwdz

浏览: 32074 次
性别:
来自: 杭州

最近访客更多访客>>

hz2005_2009

qq20062008

xxkwanglei

鹿目圆香

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

XML HTML prototype Yahoo

附件 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;

eXcell_popWin.rar (735 Bytes)
下载次数: 165

dhtmlxgrid-ModalWinDialog.rar (159.5 KB)
下载次数: 249

查看图片附件

分享到：

javascript格式化工具 | dhtmlx 扩展eXcell 实现多个超级链接

2009-01-25 19:54
浏览 3072
评论(2)
论坛回复 / 浏览 (2 / 4469)
查看更多

2 楼 wdzwdz 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>

1 楼 wdzwdz 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> </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>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论