Previous topicNext topic
WebBuilderX > 子页面组件元素 > 表格类元素 > 列模板 >
数值型列

WebBuilderX对数值型列的模板处理,主要包括2个方面:小数位数和千位分隔符。如下图:

这里添加的是年龄列。在没有设置小数位数的时候,点击“列模板/列工具栏”页签,就会发现WebBuilderX已经为它自动生成了模板代码。该字符模板采用了另外一种写法,也就是加了if判断。由于if语句是单纯的js流程语句,所以开始一行和最后一行都用“{{#”开头:

此时你无需做任何操作,只要保存并重新生成代码,页面刷新一下就能看到新增加的年龄列,没有任何小数:

如果你把基本属性中的“小数位数”填写为2,那么列模板就会自动修改,如下图:

没有网页编程基础的用户,乍看这里的代码貌似与之前并没有什么不同。其实,已经变了,toFixed后面的括弧里多了个2。这就表示,该数据列要保留2位小数,没有小数时用0代替。以下是刷新后的页面效果:

之前的字符模板代码如果改用三元运算符的写法,可以这样:

{{ d.年龄 ? Number(d.年龄).toFixed(2) : '' }}

页面刷新效果是完全一样的。

如果同时勾选“千位分隔符”,则列模板自动改为函数形式。这是因为,千位分割符需要用到正则表达式,而字符串模板对正则表达式的解析支持很弱,只能使用函数形式的模板,而且函数模板可以处理任意复杂的逻辑,非常强大。如下图所示:

可能有的用户会说:既然模板都是自动生成的,这里还有必要把它显示出来吗?岂不是徒增学习难度?其实不然。如果你没有网页开发基础,那么就用自动生成的模板即可;如果你有基础或者有更加个性化的需求,可以自行修改模板以实现更加复杂的功能。例如,我现在希望年龄达到40岁或者以上的员工,用红色背景突出显示,怎么办?那就可以自定义模板,如下图:

由于这是自定义模板,为避免受到基本属性设置对它的影响,请务必勾选“固定已经设置好的列模板”。以下是重新生成代码后的页面刷新效果: