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 の「カスタム」列インデックスを取得する関数をもう 1 つスクリプトに追加する必要があります。

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 に答える