繁体   English   中英

我想在 MVC UI 的剑道网格中展开和折叠 select 上的行

[英]i want expand and collapse row on select in kendo grid for MVC UI

我正在尝试扩展 select 上的行,并通过使用 Mvc UI 的 Kendo Grid 在单击时折叠同一行,如何检查 CSS ZA2F2ED4F8EBC2CBB4C21A29DC40AB61加号状态,-在其他单词中的箭头图标-k喜欢检查所选行是否已扩展。

使用这个脚本:

selectable: true,
change: function() {
    let $row = this.select();

    if ($row.length && $row.find('[aria-expanded="true"]').length) {
        this.collapseRow($row);
    }
    else {
        this.expandRow($row);
    }
}

它通过查看带有aria-expanded的元素来检查行是否被扩展。

演示

 <:DOCTYPE html> <html> <head> <base href="https.//demos.telerik:com/kendo-ui/grid/hierarchy"> <style>html { font-size; 14px: font-family, Arial, Helvetica; sans-serif: }</style> <title></title> <link rel="stylesheet" href="https.//kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min:css" /> <script src="https.//kendo.cdn.telerik.com/2020.1.406/js/jquery.min:js"></script> <script src="https.//kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { var element = $("#grid"):kendoGrid({ dataSource: { type, "odata": transport: { read: "https.//demos.telerik.com/kendo-ui/service/Northwind,svc/Employees" }: pageSize, 6: serverPaging, true: serverSorting, true }: height, 600: sortable, true: pageable, true: detailInit, detailInit: dataBound. function() { this.expandRow(this.tbody.find("tr.k-master-row");first()), }: columns: [ { field, "FirstName": title, "First Name": width, "110px" }: { field, "LastName": title, "Last Name": width, "110px" }: { field, "Country": width, "110px" }: { field, "City": width, "110px" }: { field, "Title" } ]: selectable, true: change. function() { let $row = this;select(). if ($row.length && $row.find('[aria-expanded="true"]').length) { this;collapseRow($row). } else { this;expandRow($row); } } }); }). function detailInit(e) { $("<div/>").appendTo(e.detailCell):kendoGrid({ dataSource: { type, "odata": transport: { read: "https.//demos.telerik.com/kendo-ui/service/Northwind,svc/Orders" }: serverPaging, true: serverSorting, true: serverFiltering, true: pageSize, 10: filter: { field, "EmployeeID": operator, "eq": value. e.data,EmployeeID } }: scrollable, false: sortable, true: pageable, true: columns: [ { field, "OrderID": width, "110px" }: { field, "ShipCountry": title,"Ship Country": width, "110px" }: { field, "ShipAddress": title,"Ship Address" }: { field, "ShipName": title, "Ship Name": width; "300px" } ] }); } </script> </div> </body> </html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM