jqGrid模态形式与答案

【问题标题】：jqGrid modal form withjqGrid模态形式与
【发布时间】：2012-08-24 01:30:11
【问题描述】：

我正在尝试查找具有以下功能的 jqgrid 示例。

每行都有一个编辑图标
每行上都有一个删除图标（最好在编辑图标的单独列中）。
本地数据
模态编辑表单而不是内联编辑

This 示例是我见过的最接近的示例，但它没有功能 1 和 2。有人可以给我看一个包含所有这些功能的例子吗？

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

好吧，我假设你有这样的 colNames，例如

['名称'、'公司'、'编辑'、'删除']

现在在编辑列中，您想要一个自定义编辑按钮的每一行，删除也一样，对吧？

我要为自定义按钮编写代码，如果您不想要自定义按钮，那么您可以选择action formatter。为此我也会写代码。

单独列中的自定义编辑和删除按钮。

function callMeOnLoadComplete(){
 var iCol = getColumnIndexByName(grid,'Edit'); // 'Edit' - name of the actions column
         grid.children("tbody")
                .children("tr.jqgrow")
                .children("td:nth-child("+(iCol+1)+")")
                .each(function() {
                 $("<div>",
                        {
                            title: "Save",
                            mouseover: function() {
                                $(this).addClass('ui-state-hover');
                            },
                            mouseout: function() {
                                $(this).removeClass('ui-state-hover');
                            },
                            click: 
                            do sth
                            }
                      ).css({"margin-left": "5px", float:"left"})
                       .addClass("ui-pg-div ui-inline-save")
                       .attr('id',"saveEdits")
                       .append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>')
                       .appendTo($(this).children("div"));

}

在jqgrid的loadComplete或gridComplete参数中调用上述函数。这适用于编辑列，同样您也可以对删除列执行此操作。

 var getColumnIndexByName = function(grid,columnName) {
                var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
                for (; i<l; i+=1) {
                    if (cm[i].name===columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

我假设您有 jquery 自定义 ui.css，因为这些图标将从随附的图像中挑选出来。

Edit and Delete Button with action formatter

使用您的 colModal，为 Edit Column 执行类似的操作。

{ name: 'Edit', index: 'Edit', formatter: 'actions',formatoptions: {keys: true,delbutton:false}}

我给出 delbutton:false 的原因是因为你想要删除列中的删除按钮。如果您希望它在同一列中，请删除此属性，否则您也可以在 Delete 列中使用相同的操作格式化程序并在此处设置 editbutton:false。

【讨论】：