第12章[12.3] Ext JSGrid中的超链接列及其功能实现| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

第12章[12.3] Ext JSGrid中的超链接列及其功能实现

文章目录
需要实现功能的规格描述
框架实现思考
方案思路
示例
# 需要实现功能的规格描述
1.  Grid中的某一列是超链接点击的效果
1. 点击之后调用js 方法创建或显示新的组件。
![](https://img-blog.csdnimg.cn/20200813223452512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29zY2FyOTk5,size_16,color_FFFFFF,t_70#pic_center)

框架实现思考
在Grid的Column的配置中，可以使用renderer配置项对该列中显示的值进行渲染。包括加上额外的HTML标签元素。
HTML的 <a>超链接标签毫无疑问可以实现超链接的效果。但是在href属性中配置的是一个页面地址，点击之后或覆盖原页面，或新开一个窗口显示新的链接页面。
Grid具备cellclick事件监听， 可以捕捉Grid中的每个单元格点击的动作（各行各列）。
方案思路
在某一列的配置中，使用renderer渲染超链接， href的值设为“##”，指向一个空链接。
关于HTML空链接，参考： HTML a标签之空链接 https://blog.csdn.net/oscar999/article/details/106799535
添加Grid的cellclick事件监听，当单个格事件触发时，判断该单元格所在列是否是超链接的那一列（判断列的dataIndex是否与预期的相等），如果是的话，触发相应的JS方法。JS方法里面就可以随意做任何事情了。
示例
这里以快速测试方式演示点击Grid中的某一列，打开一个窗口的效果。示例效果如开篇所示，代码如下：

<!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 " <a href='#'>" + value + "</a>"; //空链接用于显示超链接的效果
                        }
                    }, {
                        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开发大全

第12章[12.3] Ext JSGrid中的超链接列及其功能实现

网站导航