摘要:本篇教程介绍了jQuery教程之jQuery EasyUI DataGrid 纵向(转置)表格插件 TransposedView,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程之jQuery EasyUI DataGrid 纵向(转置)表格插件 TransposedView,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
<
在页面上显示表格时,有时会遇到有些表格的列非常多,而行却比较少。例如财务报表,往往有几十列,行却只有最多三行,显示在页面上的话页面会被极大地拉宽,体验不好。通常的做法是把这种表格改为纵向显示,像矩阵的转置一样,行变成‘列’,列变成‘行’。该插件即可为DataGrid添加纵向排列表格的功能。
效果图如下:
使用步骤:
Step 1: 创建页面
<head>
<script type="text/javascript" src="datagrid-transposedview.js"></script>
</head>
<body>
<table id="tt"></table>
</body>
Step 2: 添加表格
$(‘#tt‘).datagrid({
view:transposedview,
title:‘DataGrid - TransposedView - Profit & Loss Statement‘,
width:500,
height:250,
singleSelect:true,
nowrap:false,
data:{
"total":3,
"rows":[
{
"Year":"2012",
"Product sales":"$12,000",
"Service sales":"$3,000",
"Total Operating Revenue":"$15,000",
"Cost of goods sold":"$7,000",
"Gross Profit":"$8,000",
"Rent":"$1,500",
"Insurance":"$250",
"Office suppliese":"$150",
"Utilities":"$100",
"Total Overhead":"$2,000",
"Operating Income":"$6,000",
"Loan interest":"($500)",
"Earnings Before Income Taxes":"$5,500",
"Income Taxes":"$500",
"Net Earnings":"$5,000"
},
{
"Year":"2013",
"Product sales":"$15,000",
"Service sales":"$4,000",
"Total Operating Revenue":"$16,000",
"Cost of goods sold":"$8,000",
"Gross Profit":"$9,000",
"Rent":"$2,500",
"Insurance":"$250",
"Office suppliese":"$150",
"Utilities":"$200",
"Total Overhead":"$3,100",
"Operating Income":"$7,000",
"Loan interest":"($800)",
"Earnings Before Income Taxes":"$6,500",
"Income Taxes":"$700",
"Net Earnings":"$5,500"
},
{
"Year":"2014",
"Product sales":"$20,000",
"Service sales":"$6,000",
"Total Operating Revenue":"$25,000",
"Cost of goods sold":"$11,000",
"Gross Profit":"$12,000",
"Rent":"$2,500",
"Insurance":"$550",
"Office suppliese":"$350",
"Utilities":"$500",
"Total Overhead":"$7,000",
"Operating Income":"$12,000",
"Loan interest":"($900)",
"Earnings Before Income Taxes":"$8,500",
"Income Taxes":"$700",
"Net Earnings":"$9,000"
}
]
},
columns:[[
{field:‘Year‘,title:‘Year‘,align:‘right‘},
{field:‘Product sales‘,title:‘Product ID‘,align:‘right‘},
{field:‘Service sales‘,title:‘List Price‘,align:‘right‘},
{field:‘Total Operating Revenue‘,title:‘Total Operating Revenue‘,align:‘right‘},
{field:‘Cost of goods sold‘,title:‘Unit Cost‘,align:‘right‘},
{field:‘Gross Profit‘,title:‘Gross Profit‘,align:‘right‘},
{field:‘Rent‘,title:‘Attribute‘,align:‘right‘},
{field:‘Insurance‘,title:‘Status‘,align:‘right‘},
{field:‘Office suppliese‘,title:‘Office suppliese‘,align:‘right‘},
{field:‘Utilities‘,title:‘Utilities‘,align:‘right‘},
{field:‘Total Overhead‘,title:‘Total Overhead‘,align:‘right‘},
{field:‘Operating Income‘,title:‘Operating Income‘,align:‘right‘},
{field:‘Loan interest‘,title:‘Loan interest‘,align:‘right‘},
{field:‘Earnings Before Income Taxes‘,title:‘Earnings Before Income Taxes‘,align:‘right‘},
{field:‘Income Taxes‘,title:‘Income Taxes‘,align:‘right‘},
{field:‘Net Earnings‘,title:‘Net Earnings‘,align:‘right‘}
]]
});
参数列表:
名称
类型
描述
headerWidth
number
表头的宽度。由于变为纵表,所有表头都一样宽。
itemWidth
number
每行的宽度。由于变为纵表,所有行都一样宽。
在下载的文件中有完整例子。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号