3

我正在使用 Ignite UI 网格。

这些列是从数据库中动态构建的，如下所示：-

 $.post('/Main/GetColumns',function(data){

      $("#mygrid").igGrid({
                         columns: data,
                         width: "100%",
                         height: "100%", 
                         })
  });

问题是我不知道哪一列的数据类型为数字，因为数据来自数据库的列，我必须右对齐数字列。

我发现的唯一代码是

args.owner.element.find("tr td:nth-child(3)").css("text-align", "right");

将第三列设置为右对齐。由于我不知道列顺序，我只剩下检查数据类型并右对齐列，

有没有办法根据数据类型或任何其他方法来对齐列？

4

3 回答 3

5

列用于表示（格式化）和编辑行为时的数据类型，但没有生成可用于定位样式的额外标记。

但是，您正在构建列定义服务器端，在创建列定义时您确切知道每列是什么类型，不是吗？

更新：距离原始答案已经有一段时间了，为了将来参考，您可以使用columnCssClass将您的类应用于实际的 TD 而不是模板。后者仍然是高级修补的有效选项。

我能想到的最简单的方法是通过列模板- 这样您就可以向列添加任何样式/格式。例如，根据您需要的任何逻辑，您将一些列返回为：

{
    key: 'status',
    dataType: 'bool',
    headerText: 'Status',
    template: '<div class="rightAlign"> ${status} </div>'
}

您应用“文本对齐：右；” 尽管该类并跳过为应该具有默认外观的列添加模板。由于此定义是在服务器上生成的（假设我的示例使用 Node.js :P），您可以将这些模板设为静态，或者每次都以不同的方式创建它们——这取决于您。

JSFiddle：http: //jsfiddle.net/damyanpetev/wsZ8c/

注意：确保在这种情况下使用块 (div,p)，因为您需要占用整个网格单元格的东西来对齐内部的文本。

如果该解决方案不适合，您将不得不通过列并以您考虑的类似方式在客户端上应用样式。

于 2013-11-12T18:39:58.707 回答
0

以下是我如何根据数据类型动态对齐 infragistics igHierarchicalGrid 中的列中的文本：

$("#grid1").on("iggriddatarendered", function (event, args) {

        var columns = $("#grid1").igHierarchicalGrid("option", "columns");
         //var RDate = $("#grid1").igHierarchicalGrid("getCellValue", 1, 1);
        var columnIndex = 0;
        var trtd = 2;
        for (var idx = 0; idx < columns.length; idx++) {
            if (columns[idx].dataType == "number" || columns[idx].dataType == "double")
                args.owner.element.find("tr td:nth-child(" + trtd + ")").css("text-align", "right");
            if (columns[idx].dataType == "string" || columns[idx].dataType == "date")
                args.owner.element.find("tr td:nth-child(" + trtd + ")").css("text-align", "left");

            columnIndex++;
            trtd = columnIndex + 2; 
        }
    });

正如您所看到的，我从这里开始，vartd = 2这是因为在网格中的列可用之前，表格中有 2 个元素（我使用分层网格）。您必须调试并调查在您的情况下网格的列是在第二个 DOM 元素之后还是在第一个之后。

于 2014-03-27T13:22:32.820 回答
0

以简单的方式，您可以将 css 添加到columnCssClass属性中并应用到您定义列信息的网格中

风格：

<style>
        .right-align {
            text-align: right;
        }

        .left-align {
            text-align: left;
        }

        .center-align {
            text-align: center;
        }
</style>

和网格代码片段：

{ headerText: 'Option', key: "Option", dataType: "string", width: "10%", hidden: true },
{ headerText: 'ID', key: "Program_Id", dataType: "string", width: "10%", columnCssClass: "right-align" },
{ headerText: 'Desc', key: "Program_Des", dataType: "string", width: "10%", columnCssClass: "left-align" },
{ headerText: 'Status', key: "program_Status", dataType: "Bool", width: "10%", columnCssClass: "center-align" },
于 2020-08-28T07:44:43.337 回答