如何在单击剑道网格每一行时调用单个函数

Posted 2023-05-09

【中文标题】如何在单击剑道网格每一行时调用单个函数

【英文标题】：How to call a Single function on clicking Kendo grid each row

【发布时间】：2021-07-02 20:52:03

【问题描述】：

我有一个剑道网格“mysubmissionsGrid”，我需要在单击每一行时通过单击或双击调用一个函数。我怎样才能做到这一点？

<div class="col-xs-12 col-nopadding-left col-nopadding-right" style="padding-bottom:20px;">
                        <!-- start my submissions grid -->
                        <div kendo-tooltip k-options="toolTipOptions">
                            <div data-grid-id="mysubmissionsGrid" id="mysubmissionsGrid" kendo-grid="mysubmissionsGrid" k-options="mysubmissionsGridOptions()">
                            </div>
                        </div>
                        <!-- end my submissions grid -->
                    </div>

这是我在用户单击每个剑道网格行时尝试调用的函数 -

function showDetails(e) 
            var grid = $("#mysubmissionsGrid").data("kendoGrid");
            $(grid.tbody).on("click", "td", function (e) 
                var result;
                var row = $(this).closest("tr");
                var rowIdx = $("tr", grid.tbody).index(row);
                var colIdx = $("td", row).index(this);
             );

这是我的 .js 文件

$scope.mySubmissionGridModel = ;

$scope.mysubmissionsGridOptions = function () 
    return 
        dataSource: $scope.generateMySubmissionDataSource(),

        autoBind: false,
        editable: false,
        filterable: true,
        groupable: true,
        pageable: 
            pageSizes: [10, 15, 20, 50, "all"],
            numeric: false,
            change: function (e) 
                changePage(e, "mysubmissionsGrid");
            
        ,
        reorderable: true,
        resizable: true,
        scrollable: true,
        sortable: true,
        toolbar: ['excel'],
        excel: 
            allPages: true,
            fileName: "MySubmissions.xlsx"
        ,
        columns: $scope.getMySubmissionColumns(),
        filterMenuInit: function (e) 
            $scope.filterMenuInit(e, "MySubmissionsGrid");
        
    ;
;

这里是 getMySubmissionColumns 配置。看起来由于某种原因，如果我单击该提交按钮，然后单击行 showDetails() 被正确调用，但不确定为什么第一次它永远不会被调用。有什么想法吗？

 $scope.getMySubmissionColumns = function () 
            var regularColumns = [
                
                    headerTemplate: "<input class='checkboxall' type='checkbox' title='Select All' onchange='selectAllRows(\"mysubmissionsGrid\")' />",
                    hidden: true,
                    template: "<input class='checkbox' type='checkbox' onchange='selectRow(\"mysubmissionsGrid\")' /> <br> <input class='submit' type='submit' value='Details' onclick='showDetails(\"mysubmissionsGrid\")' />",
                    width: "130px"
                ,
                
                    attributes:  "class": "subgrid-datacell" , headerAttributes:  "class": "subgrid-headercell" ,
                    hidden: false,
                    title: "Details #",
                    width: "90px",
                    template: "<input class='submit' type='submit' value='Details' onclick='showDetails(\"mysubmissionsGrid\")' />",
                ,
                
                    attributes: "class":"subgrid-datacell", headerAttributes: "class":"subgrid-headercell",
                    field: "SubmissionCode",
                    title: "ID #",
                    hidden: true,
                ,
                
                    attributes: "class":"subgrid-datacell", headerAttributes: "class":"subgrid-headercell",
                    field: "Title",
                    title: "Title",
                    hidden: true,
                    template: "<a href='/Submission/EditSubmission/#=SubmissionID#'>#=Title#</a>",
                ,
                
                    attributes: "class":"subgrid-datacell", headerAttributes: "class":"subgrid-headercell",
                    field: "EntityOrganization",
                    title: "Entity & Organization",
                    hidden: true,
                ,
                
                    attributes: "class":"subgrid-datacell", headerAttributes: "class":"subgrid-headercell",
                    field: "SubmitterActionRequired",
                    title: "Submitter Action Required",
                    hidden: true,
                
    ];

【参考方案1】：

我终于找到了答案，以实现我所寻找的。我使用了 selectable: true, change: function (e) 并调用了 showDetails() 函数。像这样 -

$scope.mysubmissionsGridOptions = function () 
        return 
            dataSource: $scope.generateMySubmissionDataSource(),

            autoBind: false,
            editable: false,
            filterable: true,
            groupable: true,
            pageable: 
                pageSizes: [10, 15, 20, 50, "all"],
                numeric: false,
                change: function (e) 
                    changePage(e, "mysubmissionsGrid");
                
            ,
            selectable: true,
            change: function (e) 
                // Get your row's data
                var selectedRows = this.select();
                var selectedDataItems = [];
                for (var i = 0; i < selectedRows.length; i++) 
                    var dataItem = this.dataItem(selectedRows[i]);
                    showDetails(dataItem);
                
            ,
            reorderable: true,
            resizable: true,
            scrollable: true,
            sortable: true,
            toolbar: ['excel'],
            excel: 
                allPages: true,
                fileName: "MySubmissions.xlsx"
            ,
            columns: $scope.getMySubmissionColumns(),
            filterMenuInit: function (e) 
                $scope.filterMenuInit(e, "MySubmissionsGrid");
            
        ;