时间戳

首页 > 解决方案 > 如何对齐jstree网格列数据“右”或“左”？

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

问题描述

我正在研究 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
        }
    });
 }
 });
 });
});

标签： jqueryjstreetreegrid

解决方案

代码：

<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”选项将单元格文本对齐到右/左或居中对齐。

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

试一试应该可以的。

推荐阅读