jQuery EasyUI使用教程之在数据网格中创建列组
来源:互联网 发布:手机虚拟陀螺仪软件 编辑:程序博客网 时间:2024/06/05 16:46
<jQuery EasyUI最新试用版免费下载>
该easyui的数据网格可以创建列组合,如下所示:
查看jQuery EasyUI演示
在本实例中,我们使用平面数据来填充数据网格的数据,并把listprice、unitcost、addr1、status列组合在一个单一的列下。
为了创建列组合,您应该定义数据网格插件的columns数据。列的每个元素是定义一组可使用rowspan或colspan属性来进行组合的单元格。
下面的代码实现上面的例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<
table
id
=
"tt"
title
=
"Column Group"
class
=
"easyui-datagrid"
style
=
"width:550px;height:250px"
url
=
"data/datagrid_data.json"
singleselect
=
"true"
iconcls
=
"icon-save"
rownumbers
=
"true"
>
<
thead
>
<
tr
>
<
th
rowspan
=
"2"
field
=
"itemid"
width
=
"80"
>Item ID</
th
>
<
th
rowspan
=
"2"
field
=
"productid"
width
=
"80"
>Product ID</
th
>
<
th
colspan
=
"4"
>Item Details</
th
>
</
tr
>
<
tr
>
<
th
field
=
"listprice"
width
=
"80"
align
=
"right"
>List Price</
th
>
<
th
field
=
"unitcost"
width
=
"80"
align
=
"right"
>Unit Cost</
th
>
<
th
field
=
"attr1"
width
=
"100"
>Attribute</
th
>
<
th
field
=
"status"
width
=
"60"
align
=
"center"
>Stauts</
th
>
</
tr
>
</
thead
>
</
table
>
下载该EasyUI示例:easyui-datagrid-demo.zip
有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程!
0 0
- jQuery EasyUI使用教程之在数据网格中创建列组
- jQuery EasyUI使用教程之在数据网格中创建列组
- jQuery EasyUI使用教程之动态改变数据网格列
- jQuery EasyUI使用教程之格式化数据网格列
- jQuery EasyUI使用教程之在数据网格中添加一个分页
- jQuery EasyUI使用教程之在数据网格中添加搜索功能
- jQuery EasyUI使用教程之在数据网格中自定义排序
- jQuery EasyUI使用教程之在数据网格中扩展行显示详细信息
- jQuery EasyUI使用教程之创建具有主数据网格的子网格
- jQuery EasyUI使用教程之设置数据网格的冻结列
- jQuery EasyUI使用教程之创建一个属性网格
- jQuery EasyUI使用教程之创建基本的树网格
- jQuery EasyUI使用教程之创建复杂的树网格
- jQuery EasyUI使用教程之创建数据网格的自定义视图
- jQuery EasyUI使用教程之添加工具栏到数据网格
- jQuery EasyUI使用教程之自定义数据网格分页
- jQuery EasyUI使用教程之启用数据网格内联编辑
- jQuery EasyUI使用教程之扩展数据网格的编辑器
- ssh 工具查看日记的几个命令
- 实例讲解ARM指令集
- Tomcat安装步骤
- log4j工作原理
- 判断任意两台计算机的IP地址是否属于同一子网络(华为OJ)
- jQuery EasyUI使用教程之在数据网格中创建列组
- java设计模式之单例模式
- 使用android 调用震动的例子
- Deep Learning Face Representation from Predicting 10,000 Classes
- 探究android:largeHeap
- [C#]横竖都是4九宫格算法
- CoreMotion(简介)
- MFC、Socket
- CMSensorRecorder