0

我在我的应用程序中使用 Jqgrid。我想创建一个带有 2 个按钮的列。我想在列中，因为按钮可能会根据行的数据而有所不同。我用谷歌搜索它，我只能找到使用自定义格式化程序选项创建一个按钮，但它只出现在双击一行或编辑一行时，但我希望它显示在列本身上。任何包含信息的帮助或链接将不胜感激。下面是我的网格代码。需要创建另一个带有按钮的列。

编辑：

var grid = $(gridId);
grid.jqGrid({
    data: gridData,
    datatype: "local",
    gridview: true,
    colModel: [
        {
            label: 'Employee Name', name: 'employeeName', width: 195, editable:true,
            sortable:true, editrules:{required:true}
        },
        {
            label: 'Address', name: 'address', width: 170, editable:true,
            sortable:true,
            editrules:{required:true}
        },
        {
            label: 'Department', name: 'department', width: 120, editable:true,
            sortable:true,
            edittype:'custom',
            editoptions: {
                'custom_element' : populateReturnTypeAutocomplete,
                'custom_value' : autocomplete_value
                },
            editrules:{required:true}
        },
  });
4

1 回答 1

3

好的，将此添加到您的 colModal

{label: 'My Custom Column', name: 'custom', index:'custom' width: 120}

现在在 gridComplete 或 loadComplete 添加此代码

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




$("<div>",
                            {
                                title: "custombutton 2",
                                mouseover: function() {
                                    $(this).addClass('ui-state-hover');
                                },
                                mouseout: function() {
                                    $(this).removeClass('ui-state-hover');
                                },
                                click: 
                                handle click here
                                }
                          ).css({"margin-left": "5px", float:"left"})
                           .addClass("ui-pg-div ui-inline-custom")
                           .attr('id',"customButton2")
                           .append('<span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>')
                           .appendTo($(this).children("div"));

现在，我在此处添加的这些图标将在 jquery ui.css 中可用，并且您必须在脚本中再添加一个函数，该函数将在上述代码的第一行中为 u 获取“自定义”列索引。

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

我希望这有帮助。

于 2012-08-29T05:39:27.470 回答