CFGRID：如何双击cfgrid行打开cfwindow

最新推荐文章于 2024-09-25 20:26:56 发布

cunchi8090

最新推荐文章于 2024-09-25 20:26:56 发布

阅读量125

点赞数

文章标签： python js java vue html ViewUI

原文链接：https://www.experts-exchange.com/articles/5910/CFGRID-How-to-open-a-cfwindow-on-double-click-of-a-cfgrid-row.html

版权

PROBLEM: How to open a cfwindow or run a function on double click of a cfgrid row.

问题：如何在双击cfgrid行时打开cfwindow或运行功能。

One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items in a sub window. ( I tried posting a question in the forums to no avail and finally came up with my own solution after an extensive session of searching on google )

我的一位客户希望能够双击行项目以获取有关交易的更多详细信息，并能够在子窗口中修改行项目。（我尝试在论坛上发表问题无济于事，经过广泛的谷歌搜索之后，我终于提出了自己的解决方案）

For something that seems quite simple it would have been nice to avoid that nuisance so I decided to create an article for anyone else who might be looking to do something similar. At the end of this article I have included a full page source which will require minimal modifications to work ( explained in detail below ).

对于看起来很简单的事情，最好避免这种麻烦，所以我决定为可能正在寻求类似工作的其他任何人创建一篇文章。在本文的结尾，我提供了一个整页的源代码，仅需很少的修改即可工作（下面将详细介绍）。

Step by step solution using CFGrid Event Listeners:

使用CFGrid事件监听器的分步解决方案：

( skip to the bottom if you want the full source – requires minimal modification )

（如果需要完整的源代码，请跳到底部–只需很少的修改即可）

Step 1:

第1步：

Example:

例：

<cfgrid name="YourGridName"

<cfgrid name =“ YourGridName”

format="html"

format =“ html”

pagesize="10"

pagesize =“ 10”

selectmode=“row”

selectmode =“行”

striperows="yes"

striperows =“是”

bind="…">

bind =“…”>

Here is a great <cfgrid> tutorial if you require assistance on creating a <cfgrid> as I will not be covering that here:

如果您需要有关创建<cfgrid>的帮助，那么这是一个很棒的<cfgrid>教程，因为我在这里不做介绍：

http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids

Step 2:

第2步：

- Place the following <cfwindow> inside the <body> tag after your <cfgrid>:

-将以下<cfwindow>放在<cfgrid>之后的<body>标记内：

<cfwindow 
	closable="true"
	draggable="true" 
	height="300" 
	name="YourCFWindowName"
	resizable="false"
	title="My Window"
	width="300"
	x="100"
	y="100"
>

<table><tr><td>YAY! It works :-)</td></tr></table>

</cfwindow>

Step 3:

第三步：

- It is important that the following <script> be placed inside of the <head> </head> tags of your page:

-将以下<script>置于页面的<head> </ head>标记内非常重要：

("YourGridName" should be replaced with the name of your cfgrid, and "YourCFWindowName" should be replaced with the name of your cfwindow. )

（“ YourGridName”应替换为cfgrid的名称，“ YourCFWindowName”应替换为cfwindow的名称。）

NOTE: You could replace the "showWin" function with any other function you want to run on double click of a row.

注意：您可以将“ showWin”功能替换为要在双击某行时运行的任何其他功能。

<script>
	init=function(){
		grid = ColdFusion.Grid.getGridObject("YourGridName");
		grid.addListener("rowdblclick",showWin);
	}

	function showWin(){
		ColdFusion.Window.show('YourCFWindowName')
	}
</script>

Step 4:

第4步：

- Calling your init script - place the following code after your <cfwindow> inside the <body> tag:

-调用初始化脚本-在<body>标记内的<cfwindow>之后放置以下代码：

<cfset ajaxOnLoad("init")>

CONCLUSION:

结论：

Using the script provided you should be able to fire any function you would like on a double click of a row item, and should you decide you want it to be single click you can change “rowdblclick” to “rowclick”.

使用提供的脚本，您应该能够在双击行项目时触发您想要的任何功能，并且如果您决定使其为单击状态，则可以将“ rowdblclick”更改为“ rowclick”。

I have attached a demo page below but you will need to replace the <cfgrid> with your own, and "YourGridName" in the init function to make it work

我在下面附加了一个演示页，但是您需要用自己的<cfgrid>替换它，并在init函数中替换“ YourGridName”以使其正常工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to open a cfwindow on double click of a grid row</title>

<script>
	init=function(){
		grid = ColdFusion.Grid.getGridObject("YourGridName");
		grid.addListener("rowdblclick",showWin);
	}
	
	function showWin(){
		ColdFusion.Window.show('YourCFWindowName')
	}
</script>
</head>

<body>

<cfform name="YourGridFormName">

<!--- Replace the following cfgrid with your cfgrid, this one is only here as a placeholder --->
<cfgrid name="YourGridName"
         format="html"
         pagesize="25"
         striperows="yes"
         gridlines="yes"
         selectmode="row"
         bind="cfc:yourCFC_Name.yourLoadFunctionName({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection})"
         onchange="cfc:yourCFC_Name.yourFunctionName({cfgridaction},
                                 {cfgridrow},
                                 {cfgridchanged})">
      <cfgridcolumn name="myCol1" header="Column 1" width="100"/>
      <cfgridcolumn name="myCol2" header="Column 2" width="100"/>
      <cfgridcolumn name="myCol3" header="Column 3" width="100"/>
   </cfgrid>

</cfform>


<cfwindow 
	closable="true"
	draggable="true" 
	height="300" 
	name="YourCFWindowName"
	resizable="false"
	title="My Window"
	width="300"
	x="100"
	y="100"
>

<table><tr><td>YAY! It works :-)</td></tr></table>

</cfwindow>

<cfset ajaxOnLoad("init")>


</body>
</html>