还有一个问题 加载时 Loading条无法显示
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href="http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20153.0.css" rel="stylesheet" type="text/css" />
<script src="http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/external/external/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/external/spreadjs/gcspread.sheets.all.9.40.20153.0.min.js"></script>
<style type="text/css">
.loading {
font-family: Arial, sans-serif;
color: #4f4f4f;
background: #ffffff;
border: 1px solid #a8a8a8;
border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
font-size: 20px;
padding: 0.4em;
position: absolute;
}
</style>
<script type="text/javascript">
var spreadNS = GcSpread.Sheets;
$(document).ready(function ()
{
var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
initSpread(spread);
});
function initSpread(spread)
{
showLoading();
var sheet = spread.getSheet(0);
sheet.isPaintSuspended(true);
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 170);
datas = [{table_line_xh:1, lrrq:1423584000000, xgrq:1423584000000},
{ table_line_xh:2, lrrq:1423584000000, xgrq:1423584000000}];
sheet.setDataSource(datas);
sheet.getCell(0, 0).value("列1");
sheet.getCell(0, 1).value("列2");
sheet.getCell(0, 2).value("列3");
sheet.isPaintSuspended(false);
window.setTimeout(function () {
hideLoading();
}, 80000);
};
function showLoading() {
var $container = $("#ctl00_WidgetTabs"), width = $container.width(), height = $container.height();
$("<span id='delaySpan'><span id='icon' class='ui-icon ui-icon-clock' style='display:inline-block'></span>Loading...</span>")
.addClass("loading")
.css("left", width / 2 - 70)
.css("top", height / 2 - 30)
.insertAfter("#ss");
$("<div id='delayDiv'></div>")
.css("background", "#2D5972")
.css("opacity", 0.3)
.css("position", "absolute")
.css("top", 0)
.css("left", 0)
.css("width", width)
.css("height", height)
.insertAfter("#ss");
}
function hideLoading() {
$("#delayDiv").remove();
$("#delaySpan").remove();
}
</script>
</head>
<body>
<div class="container">
<div class="header">
<h2>SpreadJS 销售商品成本</h2>
</div>
<div class="main demo">
<div id="ss" style="width:100%; height:620px;border: 1px solid gray;" class="keyItem"></div>
</div>
<div class="footer demo-description">
<p>
COST OF GOODS SOLD (也叫做 Cost of Sales 或者 COGS): 商品销售成本直接关系到生产或者购买你的产品或服务。
</p>
</div>
</div>
</body>
</html> |