个人中心
gpt4 book ai didi

javascript - 单击 detailInit 中的列标题编辑剑道网格中的主列标题

转载 作者：行者123 更新时间：2023-11-29 23:57:16 26 4
gpt4 key购买 nike

以下是带有 detailInit 的剑道网格示例:

enter image description here

我的要求是，在对特定子网格 (detailInit) 中的列进行排序时，其标题即 FirstName 字段应如下所示更改:

enter image description here

只是那个特定的子网格的标题应该改变。我尝试在 detailInit 的数据绑定(bind)函数中注册 onclick 事件，但无法找到列标题并更改它:

$("th[role='columnheader']").on("click", function (ev) {

// access clicked column in sub- grid
// change master row's title
    };

请有人建议我一个解决方案，因为我是剑道网格、js、HTML 的新手，所以不了解很多功能。

如有任何帮助，我们将不胜感激。

请在下面找到我的代码:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="grid"></div>
    <script>

        var element = $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
                },
                pageSize: 6,
                serverPaging: true,
                serverSorting: true
            },
            height: 450,
            sortable: true,
            pageable: true,
            detailInit: detailInit,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            columns: [
              {
                  field: "FirstName",
                  title: " "
              }
            ]
        }).on("click", ".btn-refresh", function (e) {
            debugger;
            var childGrid = $(e.target).closest(".k-grid").data("kendoGrid");
            childGrid.dataSource.read();
        });

        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 6,
                    filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                toolbar: [{ text: "Refresh", className: "btn-refresh" }],
                columns: [
                  { field: "OrderID", width: 70 },
                  { field: "ShipCountry", title: "Ship Country", width: 100 },
                  { field: "ShipAddress", title: "Ship Address" },
                  {
                      field: "ShipName", title: "Ship Name", width: 200
                  }
                ]
            });
        }
    </script>
</body>
</html>

最佳答案

至少有两种主要方法可以做到这一点。但是，我不明白你是否想:

a) 清除所有“更新”的文本，只允许最后一次点击

b) 跟踪所有这些，在用户对网格进行排序时放置文本

无论如何，让我们看看这两种策略。

仅使用 jQuery

一)

element.on('click', "th[role='columnheader']", function(e) {
    // always remove all, to put again in the right place
    $("strong[attr-id=updated]").remove(); 

    var firstNameCell = $(this)
        .closest("tr.k-detail-row") // Finds the closest detail row ...
        .prev("tr.k-master-row") // ... in order to get the first previous row of class "k-master-row" (which stores the FirstName)
        .find("td[role='gridcell']"); // and, then, get the td gridcell

    firstNameCell.append("<strong attr-id='updated'> - Address updated</strong>");
});

b)

element.on('click', "th[role='columnheader']", function(e) {
    var firstNameCell = $(this)
        .closest("tr.k-detail-row")
        .prev("tr.k-master-row")
        .find("td[role='gridcell']");

    // Check if the msg already exits, to not duplicate it
    if (!(firstNameCell).find('strong[attr-id=updated]').length) {
        firstNameCell.append("<strong attr-id='updated'> - Address updated</strong>");
    }
});

attr-id 有助于识别页面上的文本元素，一旦使用 id 不是一个好习惯(每页仅一次)。

使用 KendoUI JavaScript 对象

这不是最好的方法，因为您不能像我们使用 jQuery 方法那样append HTML。此外，每次进行排序时，您都必须刷新整个表格。

这就是为什么我只显示案例 b)

element.on('click', "th[role='columnheader']", function(e) {
    var masterRow = $(this)
        .closest("tr.k-detail-row")
        .prev("tr.k-master-row"); // Finds the closest master row ...

    var rowIndex = $("tr.k-master-row").index(masterRow); // ... gets the index of it among all the others
    kendoGrid = element.data('kendoGrid');
    var firstName = kendoGrid.dataSource._data[rowIndex].FirstName; // gets current name based on the index

    if (!firstName.includes('Address updated')) {
        selectedCell = rowIndex; // sets the index to be used when grid refreshes
        kendoGrid.dataSource._data[rowIndex].FirstName = firstName + " - Address updated";
        kendoGrid.refresh(); // refreshed the whole grid
    }
});

仍然，为了使 KendoUI 在每次刷新其网格时扩展正确的行，您必须创建全局变量 selectedCell 并检查 dataBound 函数是否是否有值:

dataBound: function () {
    if (selectedCell) {
        this.expandRow(this.tbody.find("tr.k-master-row:eq(" + selectedCell + ")"));
    } else {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
},

在这里，你可以看到更多关于剑道网格刷新的信息:Reloading/refreshing Kendo Grid

希望对您有所帮助! :)

关于javascript - 单击 detailInit 中的列标题编辑剑道网格中的主列标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41332571/

26 4 0
文章推荐： Mysql加载文件
文章推荐： mySQL:加载从另一个值作为子字符串的 CHAR 值
文章推荐： mysql - 对多个表使用 SUM 会产生意想不到的结果
文章推荐： Mysql56 for Windows 无法识别任何新数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com