Question

我正在开发一个项目，其中IU在Cx，基于新React的FrontEnd框架中完成。 https://cxjs.io/
我在每个列的顶部都有一个带过滤字段的网格例如，这是Number Column and Field：

{
    field: 'score', sortable: true,
    header: {
        style: 'width: 150px',
        items: <cx>
            <div>
                Score
                <br />
                <NumberField style="width:100%;margin-top:5px" value:bind="$page.filter.score"
                    reactOn="enter blur"/>
            </div>
        </cx>
    },
},

但价值在左侧，我需要在右侧。我希望网格和过滤器字段值都在右侧，但保留列名称在左侧。就像它通常在Excel中一样。另外如何设置自定义小数，例如2？

Answer 1

NumberField小部件允许通过inputStyle在输入元素上设置其他样式。使用format完成格式化。网格列标题可以仅使用style设置自己的样式。

考虑到所有这些，它应该是这样的：

{
    field: "score",
    sortable: true,
    header: {
      style: "width: 150px; text-align: left",
      items: (
        <cx>
          <div>
            Score
            <br />
            <NumberField
              value:bind="$page.filter.score"
              format="n;2"
              style="width:100%;margin-top:5px"
              inputStyle="text-align: right"
              reactOn="enter blur"
            />
          </div>
        </cx>
      )
    }
  }

Cx框架：如何在NumberField上设置align：right和decimal precision

1 个答案: