JQGrid - 弹出编辑/添加按钮答案

【问题标题】：JQGrid - Pop up for edit/add buttonsJQGrid - 弹出编辑/添加按钮
【发布时间】：2020-05-18 09:17:14
【问题描述】：

我正在使用 JQGrid 来管理数据库中的一些数据。我有一列用于编辑或添加新数据。当我点击这些按钮时，我希望弹出一个包含所有必要字段的表单。

我觉得有图会更清楚：

所以这里是我的网格的代码：


            if (gridCtrp.length) {
                gridCtrp.jqGrid({
                    url: "{{ url('/') }}/contreparties/projet/{{ $ID_PROJET }}",
                    mtype: "GET",
                    datatype: 'json',
                    colNames: ["ID","Famille","Libellé","Détail","Précision","Valorisation","Tranche Mini","Tranche Maxi"],
                    colModel: [
                        {name: "ID_CONTREPARTIE", sortable: false, align:"center", hidden: true},
                        {name: "LIBCOD", align: "center",width: 100},
                        {name: "LIBEL_CTRPRT",align: "center", sortable: false, width: 100},
                        {name: "DETAIL_CTRPRT",align:"center", width: 100},
                        {name: "PRECISION_TRCH",align:"center",width: 150},
                        {name: "CORRES_MONETAIRE",align:"center", width: 150},
                        {name: "NUM_MINI", align:"center", width: 100},
                        {name: "NUM_MAXI", align: "center", width: 150}
                    ],
                    loadtext: "Chargement...",
                    viewrecords: true,
                    emptyrecords: "Aucune contrepartie",
                    width: 850,
                    height: 300,
                    scrollerbar: true,
                    rowNum: 100,
                    sortable: true,
                    loadonce: true,
                    hidegrid: false,
                    multipleSearch: true,
                    shrinkToFit: false,
                    gridview: true,
                    autoencode: false,
                    gridComplete: function() { 
                        var ids = gridCtrp.jqGrid('getDataIDs');
                        var tabData = gridCtrp.jqGrid('getRowData');
                        for (var i = 0; i < ids.length; i++) {
                            var id = ids[i];
                            var updateButton = "<a id='editButtonCtrp' rel='popover' data-toggle='popover' title='Popover Header'><i class='fa fa-pencil' aria-hidden='true'></i></a>";
                            var deleteButton = "<a href='' title='Supprimer'><i class='fa fa-trash' aria-hidden='true'></i></a>";
                            gridCtrp.jqGrid('setRowData',ids[i],{NUM_MAXI: tabData[i].NUM_MAXI + ' ' +  updateButton + ' ' + deleteButton });
                        }
                    }
                })
            }
        });

我已尝试使用 Bootstrap 4 弹出框和 JQuery-UI 对话框，但没有任何东西对我有用....此外，当我注意到当我运行 console.log($('a[rel=popover]')) 以恢复我想要实现弹出窗口的所有编辑/添加按钮时，它什么也没返回...

有没有人已经实现了类似的东西？提前致谢。

【问题讨论】：

标签： javascript jquery dialog jqgrid popup

【解决方案1】：

在您的 gridComplete 代码中缺少按钮的绑定操作 - 您应该将操作绑定到它。这段代码在哪里以及如何尝试运行它。

下面的代码很旧，但可以正常工作：

gridComplete: function() {
    var ids = jQuery("#rowed2").jqGrid('getDataIDs');
    for(var i=0;i < ids.length;i++){
        var cl = ids[i];
        be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\"  />"; 
        se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\"  />"; 
        ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />"; 
        jQuery("#rowed2").jqGrid('setRowData',ids[i],{act:be+se+ce});
    }
}

此外，这是一种非常古老的方法，为了优化您的代码，我强烈建议您使用自定义格式化程序 - 这将使您的代码速度提高 10 倍。

为此，您需要阅读一些docs here：

【讨论】：