Question

我想为Kendo UI网格模板按钮分配ID（来自dataSource），并想知道cilcked_function（）中点击的按钮ID。任何人都可以帮我这样做..

$("#grid").kendoGrid({
        dataSource: App.TempHourlyTargetData,
        columns: [
            { field: "field1", title: "Field 1", width: "25%" }, { field: "field2", title: "Field 2", width: "25%" },  

            {
                template: "<a href='\\\#' onclick='click_function()' id = '" + id_from_datagrid + "' class='deleteBtn'></a>",
                width: "25%"
            }
        ],

        height: 350,
        change: onChange,
        selectable: "multiple cell",//""multiple row"",  ,
    });

Answer 1

是的，您可以通过以下代码实现：删除放置在模板中的onclick标记：

$("#grid").kendoGrid({
        dataSource: App.TempHourlyTargetData,
        columns: [
            { field: "field1", title: "Field 1", width: "25%" }, { field: "field2", title: "Field 2", width: "25%" },  

            {
                template: "<a href='\\\#' id = '" + id_from_datagrid + "' class='deleteBtn'></a>",
                width: "25%"
            }
        ],

        height: 350,
        change: onChange,
        selectable: "multiple cell",//""multiple row"",  ,
    });

下面的代码会给你id：

    $(document).on('click','.deleteBtn',function(){
       var id=$(this).prop('id');
    })

// OR

    $('.deleteBtn').click(function(){
        var id=$(this).prop('id');
    })

Answer 2

关于user3040830答案的注意事项：如果您的元素是动态加载的，那么在加载DOM之后，这将有效 -

$(document).on('click','.deleteBtn',function(){
       var id=$(this).prop('id');
    })

但不是这个：

   $('.deleteBtn').click(function(){
        var id=$(this).prop('id');
    })

Answer 3

       var  grid = $("#GridContainer").kendoGrid({
            columnMenu: false,
            scrollable: true,
            columns: [
                {
                    title: "Button",
                    template: '<div><button id="#= columnNamefromDatabase #" /></div>',
                    width: 80
                },
               {
                   field: Column2,
                   title: "ColumnHeader2",
                   width: 80

               },
               {
                   field: Column3,
                   title: "ColumnHeader3",
                   width: 200
               },

            ],
            resizable: true,
            dataSource: {
                transport: {
                    read: {
                        url: GetDetailsUrl,
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"

                    },
                    parameterMap: function (options) {
                        options.YourModel = YourModelObect;
                        return JSON.stringify(options);

                    }
                },
                schema: {
                    data: function (response) {
                        var griddetails = response.result;
                        return griddetails;

                    },

                },

                serverPaging: false,
                serverSorting: false,
                selectable: "multiple",

            },
            dataBound: function (arg) {
                var results = arg.sender.dataSource.view();
                ResultItems = results;
                 $( ":button" ).click(function(){                        
                    Id=$(this).prop('id')
                 })

            }
        }).data("kendoGrid");

为Kendo UI网格模板按钮分配ID

3 个答案: