<!DOCTYPE html>
<html lang="en">
<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>
<!-- 页面内自定义 CSS-->
<style>
body {
background: rgb(250, 250, 250);
color: #333;
}
#ss {
border: 1px #ccc solid;
}
.container {
width: 90%;
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">
<h4 class="mb0">表格应用</h4>
<p>说明：每次新增填写不一样的表单名，图中默认的表单名是table1</p>
<input id="name" value="table1"/>
<button id="dele">删除表格</button>
<button id="add">新增表格</button>
<div class="option-group">
<input type="checkbox" id="showHeader" checked/>
<label for="showHeader">显示表头</label>
</div>
<div class="option-group">
<input type="checkbox" id="highlightFirstColumn" />
<label for="highlightFirstColumn">第一列高亮</label>
</div>
<div class="option-group">
<input type="checkbox" id="showFooter"/>
<label for="showFooter">显示表尾</label>
</div>
<div class="option-group">
<input type="checkbox" id="highlightLastColumn" />
<label for="highlightLastColumn">最后一列高亮</label>
</div>
<div class="option-group">
<input type="checkbox" id="bandColumns" />
<label for="bandColumns">条纹列样式</label>
</div>
<div class="option-group">
<input type="checkbox" id="bandRows"/>
<label for="bandRows">条纹行样式</label>
</div>
<div class="option-group">
<label for="tableStyles">切换样式:</label>
<select id="tableStyles">
<option value="0">Light1</option>
<option value="1">Light2</option>
<option value="2">Light3</option>
<option value="3">Light4</option>
<option value="4">Light5</option>
<option value="5">Light6</option>
<option value="6">Light7</option>
<option value="7">Light8</option>
<option value="8">Light9</option>
<option value="9">Light10</option>
<option value="10">Light11</option>
<option value="11">Light12</option>
<option value="12">Light13</option>
<option value="13">Light14</option>
<option value="14">Light15</option>
<option value="15">Light16</option>
<option value="16">Light17</option>
<option value="17">Light18</option>
<option value="18">Light19</option>
<option value="19">Light20</option>
<option value="20">Light21</option>
<option value="21">Medium1</option>
<option value="22" selected>Medium2</option>
<option value="23">Medium3</option>
<option value="24">Medium4</option>
<option value="25">Medium5</option>
<option value="26">Medium6</option>
<option value="27">Medium7</option>
<option value="28">Medium8</option>
<option value="29">Medium9</option>
<option value="30">Medium10</option>
<option value="31">Medium11</option>
<option value="32">Medium12</option>
<option value="33">Medium13</option>
<option value="34">Medium14</option>
<option value="35">Medium15</option>
<option value="36">Medium16</option>
<option value="37">Medium17</option>
<option value="38">Medium18</option>
<option value="39">Medium19</option>
<option value="40">Medium20</option>
<option value="41">Medium21</option>
<option value="42">Medium22</option>
<option value="43">Medium23</option>
<option value="44">Medium24</option>
<option value="45">Medium25</option>
<option value="46">Medium26</option>
<option value="47">Medium27</option>
<option value="48">Medium28</option>
<option value="49">Dark1</option>
<option value="50">Dark2</option>
<option value="51">Dark3</option>
<option value="52">Dark4</option>
<option value="53">Dark5</option>
<option value="54">Dark6</option>
<option value="55">Dark7</option>
<option value="56">Dark8</option>
<option value="57">Dark9</option>
<option value="58">Dark10</option>
<option value="59">Dark11</option>
</select>
</div>
</div>
<div class="col col-8 full-height ">
<div id="ss" style="height:680px"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript ">
var spreadNS = GC.Spread.Sheets;
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var examdata = [{"PATIENT_ID":"932418","PATIENT_LOCAL_ID":"10070683","VISIT_ID":1,"EXAM_GROUP":"彩多全天组","EXAM_NO":"688972","EXAM_CLASS":"彩多","EXAM_SUB_CLASS":"心脏彩超","REQ_PHYSICIAN":"谢景军","EXAM_DATE_TIME":"2010-07-11","STUDY_UID":"1.2.80.112","REQ_DATE_TIME":"2010-07-11","RESULT_STATUS":"确认报告"},{"PATIENT_ID":"932418","PATIENT_LOCAL_ID":"100706112","VISIT_ID":1,"EXAM_GROUP":"放射检查组","EXAM_NO":"688525","EXAM_CLASS":"放射","EXAM_SUB_CLASS":"X光摄影","REQ_PHYSICIAN":"谢景军","EXAM_DATE_TIME":"2010-07-12","STUDY_UID":"1.2.80.126","REQ_DATE_TIME":"2010-07-11","RESULT_STATUS":"初步报告"},{"PATIENT_ID":"932418","PATIENT_LOCAL_ID":"100706037","VISIT_ID":1,"EXAM_GROUP":"彩多全天组","EXAM_NO":"684881","EXAM_CLASS":"彩多","EXAM_SUB_CLASS":"腹部彩超","REQ_PHYSICIAN":"张建","EXAM_DATE_TIME":"2010-07-15","STUDY_UID":"1.2.840","REQ_DATE_TIME":"2010-07-13","RESULT_STATUS":"确认报告"}];
var tableStyle = GC.Spread.Sheets.Tables.TableThemes.light1;
var table = sheet.tables.addFromDataSource('table1',0,0, examdata,tableStyle);// tableStyle可选参数
sheet.resumePaint();
//删除
document.getElementById("dele").addEventListener('click',function () {
var table = sheet.tables.findByName(document.getElementById("name").value);
sheet.tables.remove(table);
});
// 新增
document.getElementById("add").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var cr = sheet.getSelections()[0];
if (cr) {
var tableName = document.getElementById("name").value;
console.log(tableName);
sheet.tables.add(tableName, cr.row, cr.col, cr.rowCount, cr.colCount, spreadNS.Tables.TableThemes.light1);
}
});
// 表格移动
sheet.tables.move('table1', 1, 1);
// 表格缩放
// sheet.tables.resize('table1', 4, 3);
/*--------------------------表格样式--------------------------*/
document.getElementById("showHeader").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
table.showHeader(document.getElementById("showHeader").checked);
sheet.invalidateLayout();
sheet.repaint();
}
});
document.getElementById("showFooter").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
table.showFooter(document.getElementById("showFooter").checked);
sheet.invalidateLayout();
sheet.repaint();
}
});
document.getElementById("highlightFirstColumn").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
table.highlightFirstColumn(document.getElementById("highlightFirstColumn").checked);
sheet.invalidateLayout();
sheet.repaint();
}
});
document.getElementById("highlightLastColumn").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
table.highlightLastColumn(document.getElementById("highlightLastColumn").checked);
sheet.invalidateLayout();
sheet.repaint();
}
});
document.getElementById("bandRows").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
table.bandRows(document.getElementById("bandRows").checked);
sheet.invalidateLayout();
sheet.repaint();
}
});
document.getElementById("bandColumns").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
table.bandColumns(document.getElementById("bandColumns").checked);
sheet.invalidateLayout();
sheet.repaint();
}
});
//change table style
document.getElementById("tableStyles").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
var style = getTableStyle();
if (style) {
table.style(style);
sheet.repaint();
}
}
});
function getTableStyle() {
var obj=document.getElementById("tableStyles"),
styleName = obj.options[obj.selectedIndex].text;
if (styleName) {
return spreadNS.Tables.TableThemes[styleName.toLowerCase()];
}
return null;
}
});
</script>
</html>
