在Extjs中的网格内呈现空(Null)列是指在网格控件中显示空值的列。通常情况下,网格控件会自动将空值显示为一个空白单元格。然而,有时候我们希望能够明确地显示空值,以便用户能够清楚地看到该列的数据是否为空。
为了在Extjs中的网格内呈现空列,可以通过以下步骤实现:
以下是一个示例代码,演示了如何在Extjs中的网格内呈现空列:
// 定义列模型
var columnModel = new Ext.grid.ColumnModel([
{header: '姓名', dataIndex: 'name'},
{header: '年龄', dataIndex: 'age', renderer: function(value) {
if (value === null || value === undefined) {
return '空';
}
return value;
}},
{header: '性别', dataIndex: 'gender'}
]);
// 定义数据源
var store = new Ext.data.Store({
fields: ['name', 'age', 'gender'],
data: [
{name: '张三', age: 20, gender: '男'},
{name: '李四', age: null, gender: '女'},
{name: '王五', age: 30, gender: '男'}
]
});
// 创建网格控件
var grid = new Ext.grid.GridPanel({
store: store,
cm: columnModel,
renderTo: 'grid-container'
});
在上述示例中,我们定义了一个包含姓名、年龄和性别三列的网格控件。在年龄列的renderer函数中,判断值是否为空,如果为空则返回"空",否则返回原始值。最后,将列模型应用到网格控件中,并指定数据源,即可在网格内呈现空列。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
ExtJs的Grid组件虽然不管从哪一方面来讲,都称得上是很好很强大,但是总会有一些应用场景并不需要这么多功能,比如网站的留言列表,开发者只想要一个简单的 领取专属 10元无门槛券 手把手带您无忧上云列表而已,这时候XTemplate就显得很有用了。
本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能)
1.先做一些准备工作,写一个通用的类(改编自老张的PageData),用于WCF向ExtJs返回分页数据
Code
扫码
相关资讯
活动推荐