Question

我正在使用Gijgo Grid并且我使用cellDataBound事件向网格行添加了一个按钮但是我无法触发按钮点击事件。任何人都知道问题可能是什么？

CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
       if (record.Subscribed === '1') {
           $displayEl.html('<Span style="color: green;">Subscribed</Span>');
       }
       else if (record.Subscribed === '0') {
           $displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
       }
   }
});


 $('#btnCompanyUserSubscribed').on('click', function (e) {
     alert('Button has been clicked')
 })

Answer 1

我认为如果你使用column.renderer这将是最好的。您应该在创建元素后立即分配click事件。

 <table id="grid"></table>
 <script>
     var subscribeRenderer = function (value, record, $cell, $displayEl) {
         var $btn = $('<button type="button" class="btn btn-danger">Renew</button>').on('click', function () {
            alert('clicky');
         });
         $displayEl.empty().append($btn);
     };
     $('#grid').grid({
         dataSource: '/Players/Get',
         columns: [
             { field: 'ID', width: 56 },
             { field: 'Name' },
             { field: 'subscribe', renderer: subscribeRenderer  }
         ]
     });
 </script>

上面的代码对cellDataBound事件也很有用。

Answer 2

在列中提供事件点击功能，并使用cellDataBound。就像这样

 reportGrid = $('#eventReportData').grid({
        primaryKey: 'UserPrivilegeRequestsID',
        autoLoad: false,
        responsive: true,
        bodyRowHeight: 'fixed',
dataSource: '/Admin/GetDiscrepencyReport',
        columns: [
            {
                field: 'UserName', title: 'Trainer', sortable: true,
                events: {
                    'click': function (e) {
                        var userName = e.data.record.UserName;
                        popupGrid(userName);
                    }
                }
            },
            { field: 'Organization', title: 'Organization', sortable: true },
            { field: 'Country', title: 'Country', sortable: true },
            { field: 'Action', width: 170, renderer: editManager }
        ],
        params: { sortBy: 'UserName', direction: 'desc' },
        pager: { limit: 10, sizes: [5, 10, 15, 20] },
    });

    reportGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
        if ('UserName' === column.field) {
            $displayEl.html("<div  data-toggle='modal' data-target='#myModal2' >" + record.UserName + "</div>");

        }
    });
function popupGrid(userName) {
alert(userName);
}

Answer 3

使它成为一个功能并按照这样做：

$(document).ready(function () {
    CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
    if ('Subscribed' === column.field) {
           if (record.Subscribed === '1') {
               $displayEl.html('<Span style="color: green;">Subscribed</Span>');
           }
           else if (record.Subscribed === '0') {
               $displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
               $('#btnCompanyUserSubscribed').on('click', CompanyUserSubscribed);
           }
       }
    });
});


function CompanyUserSubscribed() {
     alert('Button has been clicked');
}

Answer 4

您可以通过以下方式创建按钮：

$(document).ready(function () {
    function Edit(e, type) {  
        alert("Button was clicked for row: " + e.data.record.recid)
    }
    grid = $("#myGrid").grid({    
        dataKey: "recid",
        uiLibrary: "bootstrap",
        dataSource: //SomeURL,
        columns: [
                { field: 'recid', title: 'RecordID', width: 20, resizable: true, align: 'center' },
                { title: 'Edit', field: 'Edit', width: 15, type: 'icon', icon: 'glyphicon-pencil', tooltip: 'Edit', events: { 'click': Edit }, align: 'center' }
            ]
        });    
});

最重要的部分是在此处调用您的Edit函数：

events: { 'click': Edit }

Gijgo Grid按钮单击内部行。

4 个答案: