jQuery EasyUI 数据网格 - 创建列组合
jQuery EasyUI 数据网格 - 创建列组合
简介
jQuery EasyUI 数据网格是一个功能强大的、易于使用的JavaScript库。它可以快速地将数据展示在一个网格中。EasyUI数据网格提供了许多功能，使展示数据变得简单而有趣。本文档将会介绍EasyUI数据网格中如何创建列组合。
列组合
列组合是指将多个列合并在一起，形成一个新的列。这个新的列可以用来显示一组相似的数据，也可以用来根据业务需要做某些操作。EasyUI数据网格提供了非常灵活的方式来创建列组合。
创建列组合的步骤
创建列组合需要以下几个步骤：
- 定义需要组合的列
- 创建列组合
- 显示列组合
定义需要组合的列
首先，我们需要定义需要组合的列。下面的代码展示了如何定义这些列。
var columns = [[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:100},
{field:'listprice',title:'List Price',width:80,align:'right',formatter:formatPrice},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',formatter:formatPrice},
{field:'attr1',title:'Attribute',width:120},
{field:'status',title:'Status',width:60,align:'center',
formatter:function(value){
if (value==0){
return '<span style="color:red">Pending</span>';
} else {
return '<span style="color:green">Registered</span>';
}
}
},
]];
创建列组合
下一步是创建列组合。这可以使用colspan和rowspan属性轻松完成。下面的代码展示了如何创建列组合。
var frozenColumns = [[
{field:'itemid',title:'Item ID',width:80,rowspan:2,sortable:true},
{field:'productid',title:'Product ID',width:100,rowspan:2},
{title:'Item Details',colspan:4},
],[
{field:'listprice',title:'List Price',width:80,align:'right',formatter:formatPrice},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',formatter:formatPrice},
{field:'attr1',title:'Attribute',width:120},
{field:'status',title:'Status',width:60,align:'center',
formatter:function(value){
if (value==0){
return '<span style="color:red">Pending</span>';
} else {
return '<span style="color:green">Registered</span>';
}
}
}
]];
显示列组合
最后一步是将列组合显示出来。可以使用datagrid函数创建EasyUI数据网格，而不需要对列组合做特别处理。下面的代码展示了如何将列组合显示出来。
$(function(){
$('#datagrid').datagrid({
url:'get_data.php',
columns:[columns,frozenColumns],
width:'100%',
height:350
});
});
总结
通过本文档，您学习了如何在EasyUI数据网格中创建列组合。总体来说，创建列组合是一个非常简单的过程。您只需要定义要组合的列、创建列组合，再将它们显示出来就可以了。