带水平滚动条的树表

Question

Codepen 示例

这是演示树table 与组的代码笔：

https://codepen.io/dharmatech/full/mdWGbox

截图

上面树的截图table:

问题

只显示了部分列；还有更多可用的。但是，请注意底部没有显示水平滚动条以显示其他列。

有没有办法打开水平滚动条？

我探索过的方法

这些我都试过了：

scrollX: true,

scroll: 'xy',

但是，他们似乎没有启用滚动条。

树table代码

上面演示的树table代码：

{
    view: "treetable",

    id: "grida",

    columns: [

        //{ id: "Id", },

        //{ id: "Date" },

        {
            id: "Date",

            header: 'Food',


            width: 300,

            template: function (obj, common) {

                if (obj.value) {
                    return common.treetable(obj, common) + obj.value + `<button onclick=' ( function() { console.log( "${obj.value} - ${obj.Date} - ${obj.Time}" ); } )(); '>Add</button>`;
                }
                else {
                    return common.treetable(obj, common) + obj.Food;
                }
            }

        },

        // { id: "Time" },

        // { id: "Food" },

        { id: "Amount", header: 'Amt', width: 50 },

        { id: "Calories",           header: "Cal",           width: 50 },
        { id: "Fat",                header: "Fat",                width: 50 },
        { id: "MonounsaturatedFat", header: "Mono", width: 50 },
        { id: "PolyunsaturatedFat", header: "Poly", width: 50 },
        { id: "Omega3",             header: "Om3",             width: 50 },
        { id: "Omega6",             header: "Om6",             width: 50 },
        { id: "SaturatedFat",       header: "Sat",       width: 50 },
        { id: "TransFat",           header: "Trans",           width: 50 },
        { id: "Cholesterol",        header: "Chole",        width: 50 },
        { id: "Carbohydrates",      header: "Carb",      width: 50 },
        { id: "Fiber",              header: "Fib",              width: 50 },
        { id: "SolubleFiber",       header: "Sol",       width: 50 },
        { id: "InsolubleFiber",     header: "Ins",     width: 50 },
        { id: "Starch",             header: "Star",             width: 50 },
        { id: "Sugars",             header: "Sug",             width: 50 },
        { id: "AddedSugars",        header: "Add",        width: 50 },
        { id: "Protein",            header: "Pro",            width: 50 },
        { id: "VitaminB1",          header: "B1",          width: 50 },
        { id: "VitaminB2",          header: "B2",          width: 50 },
        { id: "VitaminB3",          header: "B3",          width: 50 },
        { id: "VitaminB5",          header: "B5",          width: 50 },
        { id: "VitaminB6",          header: "B6",          width: 50 },
        { id: "VitaminB12",         header: "B12",         width: 50 },
        { id: "Folate",             header: "Fol",             width: 50 },
        { id: "VitaminA",           header: "A",           width: 50 },
        { id: "VitaminC",           header: "C",           width: 50 },
        { id: "VitaminD",           header: "D",           width: 50 },
        { id: "VitaminE",           header: "E",           width: 50 },
        { id: "VitaminK",           header: "K",           width: 50 },
        { id: "Calcium",            header: "Cal",            width: 50 },
        { id: "Copper",             header: "Cop",             width: 50 },
        { id: "Iron",               header: "Iron",               width: 50 },
        { id: "Magnesium",          header: "Mag",          width: 50 },
        { id: "Manganese",          header: "Mang",          width: 50 },
        { id: "Phosphorus",         header: "Pho",         width: 50 },
        { id: "Potassium",          header: "Pot",          width: 50 },
        { id: "Selenium",           header: "Sel",           width: 50 },
        { id: "Sodium",             header: "Sod",             width: 50 },
        { id: "Zinc",               header: "Zinc",               width: 50 },

    ],
    scrollX: true,
    //scroll: 'xy',
    data: data
}

感谢任何建议！

2021-06-11更新

Aquatic 的以下回答在 codepen 中运行良好。（谢谢 Aqauatic！）

但是，当我在具有默认样式的 ASP.NET 核心应用程序中使用这棵树时 table，它看起来像这样：

注意以下几点：

页脚和 table 重叠
滚动条应用于整个页面，而不仅仅是 table。
树视图似乎超出了封闭 div 的范围。

根据 Aquatic 的建议，我有一个 div:

<div style="width: 800px; height: 400px;" id="abc"></div>

然后我从 webix 引用 abc:

webix.ready(function () {
    webix.ui({
        container: "abc",

这是一个代码笔，其中 CSS 从 Chrome 工具中复制过来：

https://codepen.io/dharmatech/pen/LYWgyMN

这是 github 上 ASP.NET 核心 cshtml 文件的 link（以及整个项目的其余部分）：

https://github.com/dharmatech/NutritionTrackerRazorPages-2021-05-27-07-32/blob/8207bbd0f6162c8b1a752d8941ea153dd04a1cef/Pages/FoodRecords/IndexWebix.cshtml

如果我硬编码宽度和高度如下：

{
    view: "treetable",
    //responsive: true,
    id: "grida",

    //autowidth: true,
    //autoheight: true,

    width: 800,
    height: 500,

树视图的边界正确：

但是，它不会随着 window 的大小调整而调整。

欢迎提出任何建议！

Answer 1

您的代码是正确的。并且 TreeTable 确实显示了所有列，您只是错过了网格底部的水平滚动。

要解决这个问题，您需要

init UI 在容器中（目前它附在主体上）。为此，您需要将 container 属性添加到 UI 配置

    <div id="tree_here">
    </div>

            webix.ui({
                container:"tree_here",
                rows: [

一定要定义容器的尺寸

#container{
  width: 100%; 
  height: 300px;
}

https://codepen.io/mkozhukh/pen/MWpPwpP

带水平滚动条的树表

Treetable with horizontal scrollbar

webix

webix-treetable

Codepen 示例

截图

问题

我探索过的方法

树table代码

2021-06-11更新