免费的 jqgrid - jqGrid 警告对话框

Question

全部，

我正在尝试在按下工具栏按钮 [top pager] 时实现自定义警告消息，例如 'Please Select row'。我不想使用警报！！

我遵循了 Oleg 的其中一个示例（至少对我来说是 JqGrid 大师！！） i.e.Whosebug 参考 - jqGrid warning dialog。 Oleg 演示参考 - http://www.ok-soft-gmbh.com/jqGrid/Warning.htm

如果我使用与 Oleg 演示中相同的版本，一切都很好。但是，如果我更改 jqGrid 版本 4.8.0，相同的演示将无法正常工作:(

我用了-

<script type="text/javascript"     src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>

而不是

<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.0/js/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.0/js/i18n/grid.locale-en.js"></script>

知道模式用法在更高版本中是否发生了变化吗？

此致，桑达尔

Answer 1

首先，我建议您使用最新版本的免费 jqGrid。现在是 4.9.2。您可以从 GitHub 下载它或直接从 CDN 使用（参见此处）。相应的网址将是

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.9.2/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.9.2/js/jquery.jqgrid.min.js"></script>

和可选的语言文件

<script src="https://cdn.jsdelivr.net/free-jqgrid/4.9.2/js/i18n/grid.locale-de.js"></script>

不需要包含英文语言环境文件 grid.locale-en.js，因为它现在包含在免费 jqGrid 的主要代码中（jquery.jqgrid.min.js 或 jquery.jqgrid.src.js）。

在我解释旧演示中的问题之前，我建议您使用简化方法 $.jgrid.info_dialog 创建小对话框。对应的代码可以是

$grid.jqGrid("navButtonAdd", {
    caption: "Click me too!",
    onClickButton: function () {
        $.jgrid.info_dialog.call(this,
            "Warning",              // dialog title
            "Please, select row!",  // text inside of dialog
            "Close",                // text in the button
            { left: 100, top: 100 } // position relative to grid
        );
    }
});

显示的对话框如下所示

如果你想使用语言环境文件中的文本元素，那么代码可以修改为以下内容

$grid.jqGrid("navButtonAdd", {
    caption: "Click me too!",
    onClickButton: function () {
        var $self = $(this),
            alertText = $self.jqGrid("getGridRes", "nav.alerttext"),
            alertTitle = $self.jqGrid("getGridRes", "nav.alertcap"),
            bClose = $self.jqGrid("getGridRes", "edit.bClose");
        $.jgrid.info_dialog.call(this,
            alertTitle, // dialog title
            alertText,  // text inside of dialog
            bClose,     // text in the button
            { left: 100, top: 100 } // position relative to grid
        );
    }
});

如果你想显示完全相同的警告对话框，如果没有选择行则显示免费的 jqGrid 那么代码可以特别简单

$grid.jqGrid("navButtonAdd", {
    caption: "Click me!",
    onClickButton: function () {
        this.modalAlert();
    }
});

在不能自定义文字的情况下，其实用法很简单

如果你想像在旧演示中那样使用 createModal 和 viewModal，你应该了解以下内容。免费的 jqGrid 有很多变化。代码中的主要兼容性问题：应该通过将 this 设置为网格的 DOM 来调用 $.jgrid.createModal。所以必须将旧演示中的 $.jgrid.createModal(...) 修改为 $.jgrid.createModal.call(this,...)。旧演示中的下一个问题非常简单。条件 $("#"+alertIDs.themodal).html() === null 在当前版本的 jQuery 中是错误的，最好使用 $("#"+alertIDs.themodal).length === 0 代替。这是旧演示中的下一个主要问题。完整的代码可以是例如以下

$grid.jqGrid("navButtonAdd", {
    caption: "Click me!",
    onClickButton: function () {
        var $self = $(this),
            p = $self.jqGrid("getGridParam"),
            gridId = p.id,
            alertIDs = {
                themodal: "myalertmod_" + gridId,
                modalhead: "myalerthd_" + gridId,
                modalcontent: "myalertcnt_" + gridId
            },
            alertSelector = "#" + $.jgrid.jqID(alertIDs.themodal),
            alertText = $self.jqGrid("getGridRes", "nav.alerttext"),
            alertTitle = $self.jqGrid("getGridRes", "nav.alertcap");
        if ($(alertSelector).length === 0) {
            $.jgrid.createModal.call(this,
                alertIDs,
                "<div>" + alertText + "</div>",
                {
                    gbox: p.gBox,
                    jqModal: true,
                    drag: true,
                    resize: true,
                    caption: alertTitle,
                    top: 100,
                    left: 100,
                    width: 200,
                    height: "auto",
                    closeOnEscape: true,
                    zIndex: null
                },
                "", "", true);
        }
        $.jgrid.viewModal(
            alertSelector,
            {
                gbox: p.gBox,
                toTop: true
            });
    }
});

免费的 jqgrid - jqGrid 警告对话框

free jqgrid - jqGrid warning dialog

jqgrid

free-jqgrid