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;
}
表格应用
说明:每次新增填写不一样的表单名,图中默认的表单名是table1
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;
}
});