<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- disable IE compatible view -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" , user-scalable=no" />
<title>SpreadJS Demo : 绑定数据源增加行</title>
<!-- CDN Reference -->
<link rel="icon" type="image/png" href="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/icon.ico" />
<link rel=" stylesheet" type="text/css" href="https://cdn.grapecity.com.cn/spreadjs/css/basscss.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com.cn/spreadjs/css/gc.spread.sheets.excel2013white.12.0.6.css" />
<script type="text/javascript" src="https://cdn.grapecity.com.cn/spreadjs/scripts/gc.spread.sheets.all.12.0.6.min.js"></script>
<script type="text/javascript" src="https://cdn.grapecity.com.cn/spreadjs/scripts/resources/zh/gc.spread.sheets.resources.zh.12.0.6.min.js"></script>
<script type="text/javascript" src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/js/spread/license.js"></script>
<!-- Local Reference
<link rel="icon" type="image/png" href="images/icon.ico" />
<link rel="stylesheet" type="text/css" href="css/basscss.min.css ">
<link rel="stylesheet" type="text/css" href=" css/gc.spread.sheets.excel2013white.12.0.6.css">
<script type="text/javascript" src="scripts/gc.spread.sheets.all.12.0.6.min.js"></script>
<script type="text/javascript" src="/scripts/gc.spread.sheets.resources.zh.12.0.6.min.js"></script>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/js/spread/license.js"></script>
-->
<!-- 页面内自定义 CSS-->
<style>
body {
background: rgb(250, 250, 250);
color: #333;
}
#ss {
border: 1px #ccc solid;
}
.container {
width: 80%;
background: rgb(250, 250, 250);
margin: 0 auto;
height: 600px;
}
.full-height {
height: 100%;
}
.left{
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="clearfix border-bottom">
<div class="col col-8">
<h3>SpreadJS Demo : 绑定数据源增加行</h3>
</div>
<div class="col col-4 right-align align-middle">
<h5>
<ul class="list-reset">
<li class="inline-block mr1"><a class="btn" href="https://www.grapecity.com.cn/developer/spreadjs "
target="_blank ">产品官网</a></li>
<li class="inline-block mr1"><a class="" href="https://gcdn.grapecity.com.cn/showforum-185-1.html "
target="_blank ">论坛求助</a></li>
<li class="inline-block mr1"><a class="" href="https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples "
target="_blank ">更多示例</a></li>
</ul>
</h5>
</div>
</div>
<div class="full-height clearfix mt2">
<div class="col col-4 left">
<button id="click">addRowAndaddDataSource</button>
</div>
<div class="col col-8 full-height ">
<div id="ss" style="height:480px"></div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var customers = [
{ ID:0, Name:'A', Info1:'Info0' },
{ ID:1, Name:'B', Info1:'Info1' },
{ ID:2, Name:'C', Info1:'Info2' },
];
sheet.autoGenerateColumns = true;
sheet.setDataSource(customers);
$("#click").click(function(){
var rowcount = sheet.getRowCount();
sheet.addRows(rowcount,1);
var datasource = sheet.getDataSource();
datasource[rowcount] = {ID:rowcount,Name:"new",Info1:"Info"+rowcount};
sheet.repaint();
});
});
</script>
