Question

我正在jsTree网格上工作。我已经在用户界面中成功渲染了网格，但是我想将列数据左右对齐。我想将NOOFBILLS右对齐。以下是我的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
        }
    });
 }
 });
 });
});

Answer 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

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

如果尚不存在，可以创建用于对齐的类。

尝试一下就可以了。

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

1 个答案: