<!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>
<script type="text/javascript" src="patlist.js"></script>
<!-- 页面内自定义 CSS-->
<style>
body {
background: rgb(250, 250, 250);
color: #333;
}
#ss {
border: 1px #ccc solid;
}
.container {
width: 95%;
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 style="width: 90%"class="m0 ">说明：右侧名为数据绑定的表单中绑定了一组数据，每列的信息可以进行特殊设定，例如出生年月一列设置了特殊的展示样式，过敏原一列用checkbox的样式来展示。</p>
<h4 class="mb0" >单元格级别绑定</h4>
<p style="width: 90%"class="m0 ">说明：右侧名为单元格绑定的表单展示了几个单元格级别绑定的数据，
点击单元格，下方可显示该单元格绑定的路径
</p>
<p class="m0 " >点击的单元格绑定的路径是：</p>
<label id="bindingPath" style="color:red"></label>
<h4 class="mb0" >表格绑定</h4>
<p class="m0 " style="width: 90%" >说明：点击下方按钮可以给右侧名为表格绑定的表单绑定不同的数据源</p>
<input type="button" id="bind" value='绑定数据源'/>
</div>
<div class="col col-8 full-height ">
<div id="ss" style="height:680px"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript ">
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = new GC.Spread.Sheets.Worksheet('表单绑定');
spread.options.tabStripRatio = 0.7;
sheet.autoGenerateColumns = true;// 自动生成绑定列
sheet.setDataSource(patlist);
spread.addSheet(0,sheet);
// 将数据字段绑定到指定列
var colInfos = [
{ name: 'PATIENT_ID', displayName: '病人ID', size: 70, visible: false },
{ name: 'VISIT_ID', displayName: '访问次数', size: 70, visible: false },
{ name: 'INP_NO', displayName: '住院号', size: 80 , visible: false},
{ name: 'WARD_CODE', displayName: '科室号', size: 50, visible: false,resizable: false },
{ name: 'WARD_NAME', displayName: '科室名', size: 120 },
{ name: 'PATIENT_NAME', displayName: '姓名', size: 60 },
{ name: 'SEX', displayName: '性别', size: 40 },
{ name: 'DATE_OF_BIRTH', displayName: '出生日期', formatter:'yyyy/m/d',size: 130 },
{ name: 'CHARGE_TYPE', displayName: '医保类型', size: 120 },
{ name: 'ADDRESS', displayName: '家庭住址', size: 190 },
{ name: 'AGE', displayName: '年龄', size: 120 },
{ name: 'LEAVE_TIME', displayName: '出院时间', size: 150 },
{ name: 'NURSE_IN_CHARGE', displayName: '责任护士', size: 120 },
{ name: 'BALANCE', displayName: '余额', size: 100 },
{ name: 'DIAGNOSIS', displayName: '诊断', size: 160 },
{ name: 'ISALLERGY', displayName: '过敏史',cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 },
{ name: 'CURRENT_TEMP', displayName: '当前体温', size: 60 }, ];
sheet.bindColumns(colInfos);
console.log(sheet.getDataItem(0)); // 获取指定行数据
/*----------------------单元格级别绑定--------------*/
var sheetCellbind = new GC.Spread.Sheets.Worksheet('单元格绑定');
// 表格绑定和单元格绑定数据源，需要用SpreadJS的CellBindingSource包装一下
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(patlist[0]);
sheetCellbind.suspendPaint();
sheetCellbind.setBindingPath(1,1,'PATIENT_NAME');
sheetCellbind.setBindingPath(1,2,'SEX');
sheetCellbind.setBindingPath(1,3,'NURSE_IN_CHARGE');
sheetCellbind.setDataSource(source);
sheetCellbind.setValue( 3,1,'getBindingPath:');
sheetCellbind.addSpan(3,1,1,2);
spread.addSheet(1,sheetCellbind);
sheetCellbind.setSelection(1,1,1,1);
var path = sheetCellbind.getBindingPath(1,1);
document.getElementById("bindingPath").innerHTML=path || "";
sheetCellbind.bind(GC.Spread.Sheets.Events.SelectionChanged, function(){
var activeCell = sheetCellbind.getSelections()[0];
var path = sheetCellbind.getBindingPath(activeCell.row,activeCell.col);
document.getElementById('bindingPath').innerHTML = path || '';
sheetCellbind.setValue( 3,3,path);
});
sheetCellbind.resumePaint();
/*-------------------------表格绑定------------------*/
var sheetbind = new GC.Spread.Sheets.Worksheet('表格绑定');
spread.addSheet(2,sheetbind);
var table = sheetbind.tables.add('myTable',1,1,5,6);
var table1 = sheetbind.tables.add('myTable1',10,1,5,6);
// 第一个数据源
var data = { name: 'Jones', region: '西北地区',
sales: [
{ 时间: '2019/4/1', 项目: '项目1', 数量: 3, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目2', 数量: 35, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目3', 数量: 96, 花费: 1.99 },
],
sales1: [
{ 时间: '2019/4/1', 项目: '项目11', 数量: 3, 花费: 1.99 },
{ 时间: '2019/4/1', 项目: '项目12', 数量: 35, 花费: 1.99 },
]};
// 第二个数据源
var data1 = { name: 'Fiona', region: '东北地区',
sales: [
{ 时间: '2019/4/2', 项目: '项目4', 数量: 44, 花费: 1239 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目5', 数量: 45, 花费: 49 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目6', 数量: 95, 花费: 59 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目7', 数量: 64, 花费: 6 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目8', 数量: 34, 花费: 46 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目9', 数量: 34, 花费: 46 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目10', 数量: 34, 花费: 46 ,备注:''},
],
sales1: [
{ 时间: '2019/4/2', 项目: '项目14', 数量: 44, 花费: 1239 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目15', 数量: 45, 花费: 49 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目16', 数量: 95, 花费: 59 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目17', 数量: 64, 花费: 6 ,备注:''},
{ 时间: '2019/4/2', 项目: '项目18', 数量: 34, 花费: 46 ,备注:''},
]};
// 设定绑定路径，实际上就是指定table绑定数据源的哪个字段
table.bindingPath('sales');
table1.bindingPath('sales1');
// 表格绑定和单元格绑定数据源，需要用SpreadJS的CellBindingSource包装一下
source =new GC.Spread.Sheets.Bindings.CellBindingSource(data);
source1 =new GC.Spread.Sheets.Bindings.CellBindingSource(data1);
sheetbind.setDataSource(source);
sheetbind.setValue(0,0,data.name);
document.getElementById('bind').addEventListener('click', function(){
if(sheetbind.getDataSource() ==source){
sheetbind.setDataSource(source1);
sheetbind.setValue(0,0,data1.name);
}else{
sheetbind.setDataSource(source);
sheetbind.setValue(0,0,data.name);
}
});
});
</script>
</html>
