自定义超链接行为

问题：如何自定义超链接的行为

解决思路

1、超链接

SpreadJS提供类Excel的超链接功能，可以实现点击超链接跳转到指定表单、网页等。

除此之外，SpreadJS也提供了自定义跳转命令，可以借助此功能实现点击超链接的跳转行为。

2、实现弹窗

可以利用SpreadJS的命令来定义点击超链接的跳转行为，也可以通过函数来定义点击超链接的跳转行为，以下分别介绍两种方式的代码。

（1）利用SpreadJS的命令来定义点击超链接的跳转行为：

var command = {
    canUndo: false,
    execute: function (context, options, isUndo) {
        var Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
            Commands.undoTransaction(context, options);
            return true;
        } else {
            Commands.startTransaction(context, options);

            // 打开弹窗
            console.log("自定义跳转命令");
            $('#subEditor').modal('show')

            Commands.endTransaction(context, options);
            return true;
        }
    }
};
//注册命令
spread.commandManager().register("customHyperlink", command);
sheet.setValue(3, 3, "自定义超链接")
sheet.setHyperlink(3, 3, { command: "customHyperlink" });

（2）通过函数来定义点击超链接的跳转行为

sheet.setValue(3, 3, "自定义超链接")
sheet.setHyperlink(3, 3, { command: function() {
    console.log("自定义跳转命令");
    $('#subEditor').modal('show')
}});

Demo 如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.16.1.4.css"
        rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
        crossorigin="anonymous"></script>
    <script type="text/javascript"
        src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.16.1.4.min.js"></script>
    <script type="text/javascript"
        src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.16.1.4.min.js"></script>
</head>

<body>
    <div class="sample-tutorial">
        <div id="ss" style="width:100%;height:100%"></div>
    </div>

    <div class="modal fade" id="subEditor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        gcUIElement="gcEditingInput">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">x</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New Spread</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <label for="recipient-name" class="control-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="setValue">Set Value</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
                sheetCount: 1
            });
            var dialog = new GC.Spread.Sheets.Workbook(document.getElementById('dia'));

            var spreadNS = GC.Spread.Sheets;
            var sheet = spread.getActiveSheet();
            sheet.options.isProtected = true;

            /* //定义命令
            var command = {
                canUndo: false,
                execute: function (context, options, isUndo) {
                    var Commands = GC.Spread.Sheets.Commands;
                    if (isUndo) {
                        Commands.undoTransaction(context, options);
                        return true;
                    } else {
                        Commands.startTransaction(context, options);

                        // 打开弹窗
                        console.log("自定义跳转命令");
                        $('#subEditor').modal('show')

                        Commands.endTransaction(context, options);
                        return true;
                    }
                }
            };
            //注册命令
            spread.commandManager().register("customHyperlink", command);
            sheet.setValue(3, 3, "自定义超链接")
            sheet.setHyperlink(3, 3, { command: "customHyperlink" }); */

            //设置超链接
            sheet.setValue(3, 3, "自定义超链接")
            sheet.setHyperlink(3, 3, {
                command: function () {
                    console.log("自定义跳转命令");
                    $('#subEditor').modal('show')
                }
            });

            $("#setValue").click(function () {
                console.log($('#recipient-name').val());
                $('#subEditor').modal('hide')
            })
        });
    </script>
</body>

</html>

作者: GrapeCity China | 审核：AlexZ | 更新时间：2023.09.26