['Ext JS]Grid中的超链接列及其功能实现| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

['Ext JS]Grid中的超链接列及其功能实现

## Grid中的超链接列及其功能实现
### 需要实现功能的规格描述
Grid中的某一列是超链接点击的效果
点击之后调用js 方法创建或显示新的组件。

效果图类似：
![](/upload/picture/2022-10-10/upload_3fd70da355575dec5860bf0ca68efb26.png)
![](/upload/picture/2022-10-10/upload_8e41769eeb4e659bd26e4746752ddf12.png)
### 框架实现思考
在Grid的Column的配置中，可以使用renderer配置项对该列中显示的值进行渲染。包括加上额外的HTML标签元素。
HTML的 超链接标签毫无疑问可以实现超链接的效果。但是在href属性中配置的是一个页面地址，点击之后或覆盖原页面，或新开一个窗口显示新的链接页面。
Grid具备cellclick事件监听， 可以捕捉Grid中的每个单元格点击的动作（各行各列）。
### 方案思路
在某一列的配置中，使用renderer渲染超链接， href的值设为“##”，指向一个空链接。
关于HTML空链接，参考： HTML a标签之空链接 https://blog.csdn.net/oscar999/article/details/106799535
添加Grid的cellclick事件监听，当单个格事件触发时，判断该单元格所在列是否是超链接的那一列（判断列的dataIndex是否与预期的相等），如果是的话，触发相应的JS方法。JS方法里面就可以随意做任何事情了。
### 示例
这里以快速测试方式演示点击Grid中的某一列，打开一个窗口的效果。示例效果如开篇所示，代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Chen Xueming">
<title>Grid中自定义点击功能的超链接列</title>
<script type="text/javascript" src="../../ext/build/ext-all-debug.js"></script>
<link href="../../build/development/Ext7DemoApp/classic/resources/Ext7DemoApp-all.css" rel="stylesheet"        type="text/css"/>
<script>//类型定义</script>
<script>//执行脚本
	var users ={
	"total":2,
	"datas":[{
	"id":"1",
	"name":"曹操",
	"city":"豫州"
	},{
	"id":"2",
	"name":"刘备",
	"city":"荆州"}
	]};       
	Ext.onReady(function(){   
	Ext.create(Ext.grid.Panel,{   
	title:'Grid中自定义点击功能的超链接列', 
	columns:[{           
	text:'姓名',          
	dataIndex:'name',        
	flex:1,                  
	renderer:function(value){
		return" "+ value +"";//空链接用于显示超链接的效果}},{   
		text:'城池',        
		dataIndex:'city',        
		flex:1}],             
		listeners:{         
		cellclick:function(thisview, td, cellIndex, record, tr, rowIndex, e, eOpts){//实现点击动能
		if(thisview.getColumnManager().getColumns()[cellIndex].dataIndex =="name"){//点击超链接列的单元格才触发                           
		Ext.Msg.alert("Edit Dialog","Click Grid Cell");}}}, 
		store: users.datas,      
		renderTo: Ext.getBody()})});
</script>
</head>
<body>
</body>
</html>
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

['Ext JS]Grid中的超链接列及其功能实现

网站导航