JQGrid

Question

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

我觉得配个图会更清楚:

Form pop-up model

这里是我的网格代码：


            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]')) 恢复我想要实现弹出窗口的所有 edit/add 按钮，它 return 什么都没有...

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

Answer 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:

JQGrid - 弹出 edit/add 个按钮

JQGrid - Pop up for edit/add buttons

javascript

jquery

dialog

popup