免费的jqgrid - jqGrid警告对话框

Question

全,

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

我跟随了奥列格的一个例子(JqGrid古鲁，至少对我来说！)i.e.Stackoverflow参考文献- jqGrid警告对话框.Oleg演示参考- http://www.ok-soft-gmbh.com/jqGrid/Warning.htm

所有的工作，如果我使用相同的版本，在奥列格演示。但是，如果我更改了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直接使用它(参见这里)。相应的URL将是

<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
        );
    }
});

显示的对话框如下所示

​

​

如果希望使用locale文件中的文本元素，则可以将代码修改为以下内容

$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中有许多变化。代码中的主要兼容性问题:应该通过将$.jgrid.createModal设置为网格的DOM来调用this。因此，必须将旧演示中的$.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
            });
    }
});