如何对齐jstree网格列数据“右”或“左”？答案

【问题标题】：How to align jstree grid columns data 'right' or 'left'?如何对齐jstree网格列数据“右”或“左”？
【发布时间】：2018-10-09 08:13:27
【问题描述】：

我正在研究 jsTree 网格。我已经在我的 UI 中成功渲染了网格，但我想将我的列数据对齐到右侧或左侧。我想将 NOOBBILLS 对齐到右侧。下面是我的 JS 代码。请问有这方面知识的人可以帮帮我吗？

$(document).ready(function() {
    $("#formid").submit(function(event) {
        event.preventDefault(); // to stop form being submitted because it reloads the page.
        $.ajax({
            url: "Drilldown",
            method: "GET",
            success: function(data) {
                $("#formid").hide();
                $("div#jstree").jstree({
                    plugins: ["grid", "dnd", "contextmenu", "ui", "themes", "html_data"],
            core: {
                data: data
            },
            // configure tree table
            grid: {
                columns: [{
                    width: 'auto',
                    header: "Outlet"
                }, {
                    width: 'auto',
                    value: "itemcode",
                    header: "NoOfBills"
                }, {
                    width: 'auto',
                    value: "totalAmount",
                    header: "Amount"
                }],
            resizable: true,
            width: 5000,
            height: 3000
        }
    });
 }
 });
 });
});

【问题讨论】：

参考文档链接github.com/deitch/jstree-grid，其中选项如下：cellClass：添加到此列中每个单元格的 CSS 类（标题除外） - 添加到。您可以参考给定的链接以探索更多选项。
@PrasadWargad 兄弟，我找不到任何东西，你能告诉我怎么做吗.. 我被困在这里只有 2 天
这里是 jsTree 中可用选项列表的 github.com/deitch/jstree-grid#options 链接。搜索一个单词“cellClass”你会得到一些线索。
@PrasadWargad 我已经在那里搜索过，但我不知道如何实现这一点

标签： jquery jstree treegrid

【解决方案1】：

CSS 代码：

<style type="text/css">
    .aright {
        // write here your css to make text right align
    }
    .acenter {
        // write here your css to make text center align
    }
    .aleft {
        // write here your css to make text left align
    }
</style>

JS代码：

$(document).ready(function() {
    $("#formid").submit(function(event) {
        event.preventDefault(); // to stop form being submitted because it reloads the page.
        $.ajax({
            url: "Drilldown",
            method: "GET",
            success: function(data) {
                $("#formid").hide();
                $("div#jstree").jstree({
                    plugins: ["grid", "dnd", "contextmenu", "ui", "themes", "html_data"],
                    core: {
                        data: data
                    },
                    // configure tree table
                    grid: {
                        columns: [{
                            width: 'auto',
                            header: "Outlet",
                            cellClass: "aright"
                        }, {
                            width: 'auto',
                            value: "itemcode",
                            header: "NoOfBills",
                            cellClass: "acenter"
                        }, {
                            width: 'auto',
                            value: "totalAmount",
                            header: "Amount",
                            cellClass: "aleft"
                        }],
                        resizable: true,
                        width: 5000,
                        height: 3000
                    }
                });
            }
        });
    });
});

根据文档链接： https://github.com/deitch/jstree-grid#options

“columns”键具有选项“cellClass”，就像它具有其他选项“width”等一样。因此您可以使用“cellClass”选项将单元格文本向右/向左对齐或根据需要居中对齐。

如果它们不存在，您可以创建对齐类。

试一试应该可以的。

【讨论】：

你能不能给它做个小提琴，这有助于解决问题。
bro 问题解决了..我使用的 text-align 仅适用于 div..现在我正在使用 float:right 及其工作 :)
酷，你做到了。