Я хочу сделать простую таблицу, содержащую пользовательскую кнопку в строке. Когда кнопка нажата, я хочу вывести всплывающее окно с предупреждением. Я прочитал несколько сообщений по этому поводу, например: этот пост а также этот другой пост, и я не понимаю, почему мой код не работает. Кнопки нарисованы, но нажатие на них не дает никакого эффекта.

У меня здесь описаны три попытки.

Версия 1. Нажатие кнопки не срабатывает:

  $(document).ready(function(){
      jQuery("#simpletable").jqGrid({
         datatype: "local",
        colNames:['A','B','Status'],
        colModel:[
        {name:'A',index:'A'},
        {name:'B',index:'B'},
        {name:'status',index:status}
    ],
        data:[ 
        {'A':2,'B':100,'status':"<button  onclick=\"jQuery('#simpletable').saveRow('1', function(){alert('you are in')});\" >in</button>"},
        {'A':1,'B':200,'status':"<button onclick=\"jQuery('#simpletable').saveRow('2', function(){alert('you are in')});\" >in</button>"},
        ],
        caption: "Demo of Custom Clickable Button in Row",
        viewrecords:true,
        editurl:'clientArray',
    });

   });

HTML-код:

<table id="simpletable"></table>

РЕДАКТИРОВАТЬ 8/2/12 - Я узнал кое-что со времени моего исходного сообщения, и здесь я описываю еще две попытки.

Версия 2: использую onCellSelect. Это работает, но не позволяет мне разместить более одной кнопки в ячейке. Кроме того, я сделал код лучше, используя вариант формата, предложенный в одном из комментариев к этому сообщению.

function status_button_maker_v2(cellvalue, options, rowObject){
    return "<button class=\"ver2_statusbutton\">"+cellvalue+"</button>"
};

jQuery("#simpletablev2").jqGrid({
    datatype: "local",
    colNames:['A','B','Status'],
    colModel:[
    {name:'A',index:'A'},
    {name:'B',index:'B'},
    {name:'status',index:status,editable:true,formatter:status_button_maker_v2}
    ],
        data:[ 
    {'A':2,'B':100,'status':"In"},
    {'A':1,'B':200,'status':"Out"}
        ],

    onCellSelect:function(rowid,icol,cellcontent,e){
    if (icol==2){

        alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
    }else{
        return true;
    }
    },

    caption: "Demo of Custom Clickable Button in Row, ver 2",
    viewrecords:true,
});  //end simpletablev2

Разметка:

<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>

Версия 3: я попытался использовать решение для сообщение w4ik, используя" .on "вместо устаревшего" .live ". Это приводит к срабатыванию нажатия кнопки, но я не знаю, как получить идентификатор строки. w4ik тоже боролся с этим, и он написал, что у него получилось, но не как он это сделал. Я могу выбрать последнюю строку, но это всегда будет относиться к предыдущей выбранной строке, потому что кнопка имеет приоритет.

Я бы предпочел это решение, если бы я мог заставить его работать.

jQuery("#simpletablev3").jqGrid({
    datatype: "local",
    colNames:['A','B','Status'],
    colModel:[
    {name:'A',index:'A'},
    {name:'B',index:'B'},
    {name:'status',index:status,editable:true,formatter:status_button_maker_v3}
    ],
        data:[ 
    {'A':2,'B':100,'status':"In"},
    {'A':1,'B':200,'status':"Out"}
        ],
    caption: "Demo of Custom Clickable Button in Row, ver 3",
    viewrecords:true,
    onSelectRow: function(){},
    gridComplete: function(){}
});  //end simpletablev3


$(".ver3_statusbutton").on(
    {
    click: function(){
        //how to get the row id?  the following does not work
        //var rowid = $("#simpletablev3").attr('rowid'); 
        //
        //it also does not work to get the selected row
        //   this is always one click behind:
        //$("#simpletablev3").trigger("reloadGrid");
        rowid = $("#simpletablev3").getGridParam('selrow');
        alert("button pushed! rowid = "+rowid);
    }
    });

Разметка:

 <style>.ver3_statusbutton {    color:red;} </style>
 <h3>simple table, ver 3:</h3>
 <table id="simpletablev3"></table>

Таким образом, я борюсь с проблемой нажатия кнопки в нужное время . В версии 1 строка выбирается, и кнопка никогда не нажимается. Версия 2 вообще не использует "кнопку" - она ​​просто обрабатывает щелчок по ячейке. Verion 3 получает нажатие кнопки перед выбором строки (неправильный порядок).

Любая помощь была бы признательна!

0
jpl 31 Июл 2012 в 19:45
Лучше использовать событие jquery click () в таком случае, сделайте jsfiddle, и я покажу вам, как
 – 
zb'
31 Июл 2012 в 19:59
Вам не нужно добавлять разметку к своим данным, вместо этого вы можете использовать customFormatter для столбца, чтобы сгенерировать кнопку с вашим значением статуса. trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter < / а>
 – 
DisplayName
31 Июл 2012 в 20:20

1 ответ

Лучший ответ

Здесь вы можете использовать средство форматирования действий с каждой строкой и сделать кнопку редактирования и удаления как false в параметрах formatOptions, например:

formatoptions: {editbutton:false,delbutton:false}}

И следите за этими двумя демонстрациями:

http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm

http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm

И при нажатии на эти настраиваемые кнопки отображается ваше предупреждение:

ИЗМЕНИТЬ

var getColumnIndexByName = function (grid, columnName) {

                var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;

                for (i = 0; i < l; i++) {

                    if (cm[i].name === columnName) {

                        return i; // return the index

                    }

                }

                return -1;

            },

function () {

                var iCol = getColumnIndexByName(grid, 'act');

                $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")

                    .each(function() {

                        $("<div>", {

                            title: "Custom",

                            mouseover: function() {

                                $(this).addClass('ui-state-hover');

                            },

                            mouseout: function() {

                                $(this).removeClass('ui-state-hover');

                            },

                            click: function(e) {

                                alert("'Custom' button is clicked in the rowis="+

                                    $(e.target).closest("tr.jqgrow").attr("id") +" !");

                            }

                        }

                      ).css({"margin-right": "5px", float: "left", cursor: "pointer"})

                       .addClass("ui-pg-div ui-inline-custom")

                       .append('<span class="ui-icon ui-icon-document"></span>')

                       .prependTo($(this).children("div"));

                });

            }

Если вы проверите этот код, я пытаюсь узнать значение индекса, указав имя столбца как «act», вы можете получить индекс для любого другого столбца, указав другое имя столбца.

var iCol = getColumnIndexByName(grid, 'Demo'); and the rest of the code will be same for you. //demo is the column name where u want to add custom button

И напишите событие нажатия для этой кнопки.

Сообщите мне, работает ли это для вас или нет.

4
mutlei 17 Мар 2015 в 21:31
Спасибо за ответ. Я изучил ваш код. Если я правильно понимаю, ваш код показывает, как настроить средства форматирования действий. Но я хочу сделать свою собственную кнопку - может быть, даже таблицу с кнопками в каждой ячейке. Я не понимаю, как использовать ваши идеи для этого. Является ли это возможным? (Я знаю, что у меня там есть saveRow - я не думаю, что он должен быть там - я получил его от копирования кода в другом сообщении SO.)
 – 
jpl
2 Авг 2012 в 21:21
Приятель, проверьте эти ссылки, я использую настраиваемую кнопку с кнопками средства форматирования действий, давая ссылку на столбец действия ... таким же образом вы можете указать идентификатор для других столбцов и добавить с ними настраиваемую кнопку.
 – 
Piyush Sardana
3 Авг 2012 в 06:24
Большое спасибо! Теперь я лучше понимаю, что делает ваш код, и у меня это работает с моей настраиваемой кнопкой. Это именно то, что я искал!
 – 
jpl
6 Авг 2012 в 06:53