免费jqgrid-jqgrid警告对话框

Question

全部的

我试图在按下工具栏按钮[顶部寻呼机]时实现自定义警告消息，如“请选择行”。我不想使用警报！！

我遵循了Oleg的一个例子（至少对我来说是JqGrid大师！！）i、 e.Stackoverflow参考-jqGrid警告对话框。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>

知道在后来的版本中模态用法是否改变了吗？

向你问好，Sundar

Answer 1

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

html prettyprint-override"><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>

包括英文语言环境文件网格。语言环境（英语）。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）. long===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
            });
    }
});