Question

我正在使用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");

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

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

Answer 1

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

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

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

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

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

您申请“text-align：right;”虽然类和跳过为应该默认的列添加模板。由于此定义是在服务器上生成的（假设我的示例使用Node.js：P），您可以将这些模板设置为静态，或者每次都创建不同的模板 - 这取决于您。

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

注意：在这种情况下，请确保使用块（div，p），因为您需要占用整个网格单元格的内容以便在文本内部对齐。

如果该解决方案不合适，您将必须以与您想象的类似的方式浏览列并在客户端上应用样式。

Answer 2

以下是根据数据类型动态调整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元素之后或第一个之后。

Answer 3

您可以轻松地将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" },

右对齐iggrid中数据类型编号的动态列

3 个答案: