数据绑定2

<!DOCTYPE html>

<head>

<title>SpreadJS Demo : 数据绑定</title>

<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>

<h3>SpreadJS Demo : 数据绑定</h3>

</div>

<h5>

<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>

<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>

<p class="m0 " style="width: 90%" >说明：点击下方按钮可以给右侧名为表格绑定的表单绑定不同的数据源</p>

</div>

</div>

</body>

$(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>

数据绑定2

推荐阅读更多精彩内容