剑道网格过滤/层次问题

Kendo grid filtering/Hierarchy issue

本文关键字：层次 问题 过滤 网格      更新时间：2023-09-26

我们在实现层次网格方面遇到了问题，因为我们在使用自定义数据源复制功能时遇到了一些困难，如下图所示：

var DataSource1 = [
  { ID: “1” , FirstName: “John”, Lastname: “Smith”, Title: “Mr”},
  { ID: “2” , FirstName: “Jane”, Lastname: “Doe”, Title: “Miss”},
  { ID: “3” , FirstName: “Bruce”, Lastname: “Wayne”, Title: “MR”} 
];

var DataSource2 = [
  { ID: “1” , Data1: “1001”, Data2: “2900”, Data3 “Y”},
  { ID: “2” , Data1: “1002”, Data2: “2901”, Data3 “Y”},
  { ID: “3” , Data1: “1003”, Data2: “2902”, Data3 “N”} 
];

我们需要以下问题的帮助：-

我们如何根据ID创建详细的链接，即当客户端单击Tab按钮时，它只显示ID 1的数据源？

+--------------+---+------+-------+----+ 
|              | 1 | John | Smith | MR | 
+--------------+---+------+-------+----+
| Detailed Tab | 1 | 1001 | 2900  | Y  |
+--------------+---+------+-------+----+

你能告诉我们如何用本地数据源实现这一点吗？我们正在用Java脚本开发HTML。

请在下面找到我们的示例代码，我们正在尝试让过滤器工作

<!DOCTYPE html>
<html>
<head>
    <title>Detail template</title>
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>

    <script>
    </script>
</head>
<body>
            <script type="text/x-kendo-template" id="template">
                <div class="tabstrip">
                    <ul>
                        <li class="k-state-active">
                           Orders
                        </li>
                    </ul>
                    <div>
                        <div class="orders"></div>
                    </div>
                </div>
            </script>

<div id="grid1"></div>
    <script>
                var DataSource1 = [
                { ID: "1" ,Fristname: "Jhon", Lastname: "Smith", Title: "Mr"},
                { ID: "2" ,Fristname: "Jane", Lastname: "Doe", Title: "Miss"},
                { ID: "3" ,Fristname: "Bruce", Lastname: "Wayne", Title: "MR"}, ];
                var DataSource2 = [
                { ID: "1" , Data1: "1001", Data2: "2900", Data3: "Y"},
                { ID: "2" , Data1: "1002", Data2: "2901", Data3: "Y"},
                { ID: "3" , Data1: "1003", Data2: "2902", Data3: "N"}, ];
                $("#grid1").kendoGrid({
                    dataSource: DataSource1,
                    detailInit: detailInit,
                    detailTemplate: kendo.template($("#template").html()),
                    toolbar: ["save", "cancel"],
                    columns: [
                    { field:"ID",title:"ID" },
                    { field:"Fristname",title:"Fristname" },
                    { field:"Lastname",title:"Lastname" },
                    { field:"Title",title:"Title" },
                    ],
                    editable : true,
                });
                function detailInit(e) {
                    var detailRow = e.detailRow;
                    detailRow.find(".tabstrip").kendoTabStrip({
                        animation: {
                            open: { effects: "fadeIn" }
                        }
                    });
                    detailRow.find(".orders").kendoGrid({
                        dataSource: DataSource2,
                        filter: { field: "ID", operator: "eq", value: e.data.ID },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                        { field:"ID",title:"ID" },
                        { field:"Data1",title:"Data1" },
                        { field:"Data2",title:"Data2" },
                        { field:"Data3",title:"Data3" },
                        ],
                        editable : true,
                    });
                }
</script>


</body>
</html>

谢谢，

您需要放置两个剑道网格来实现这一点，父网格和子网格。

第一个网格（父网格）

@(Html.Kendo().Grid<XYZ.Models.ViewModels.ABCMODEL>()
   .Name("ParentGrid")
    .Columns(columns =>
    {
        columns.Bound(e => e.A).Title("ABC").Width(30);
        columns.Bound(e => e.B).Title("EFG").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.C).Title("IJK").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.D).Title("MNO").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.E).Title("XYZ.").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
    })
    //.Scrollable()
    .DetailTemplateId("template")
        .HtmlAttributes(new { style = "height:100%;  background-color: #fcfedf;" })
        .HtmlAttributes(new { @class = "tableMain" })
    .DataSource(dataSource => dataSource
        .Ajax()
        // .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_ABC", "Profit"))
    )
    .Events(events => events.DataBound("dataBound"))
    //.ColumnMenu()
    // .Scrollable()
    //.Sortable()
    //.Pageable()
)

第二个网格（子网格）。正如您所看到的，子网格从函数中获取"#=Cid"层次结构绑定_XYZ"

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>()
        .Name("grid_#=CId#")
        .Columns(columns =>
        {
            columns.Bound(e => e.a).Title("123").Width(30);
            columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(30);
            columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(30);
            columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(30);
            columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(30);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            // .PageSize(5)
            .Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId =      "#=CId#" }))
        )
        .ToTemplate()
)

</script>

要添加的额外代码：-

<script>
    function dataBound() {
        var grid = this;

        $(".k-hierarchy-cell").css({ width: 8 });     
       $(".k-hierarchy-col").css({ width: 8 });
    }
</script>

    <style>
.k-grid tbody .k-grid .k-grid-header
{
    display: none;
}

希望这对你有帮助。祝你好运：）

相关文章：