SpreadJS在股票证券系统中的应用示例

收藏

本帖最后由 Fiooona 于 2020-1-16 14:49 编辑

通常，股票证券系统需要为证券交易所提供证券业务（股票、基金、权证、期货等）的管理，包括证券交易系统、行情查询系统、交易委托系统、结算中心系统、银行账户管理系统等等。建立用户与股票交易所的连接，实现实时信息的传输与管理，便于用户在用户终端实现股票交易过程中涉及的股票买卖、账户管理、历史记录查询等功能，在实现以上基本功能的基础上，达到方便股民实时在线操作，方便快捷的实现股票交易的目的。
这类系统对前端展示有极高的要求，数据量大、对页面美观要求高，随手搜到的证券系统页面是这样的：
image.png27372130.png

下面的图是用SpreadJS实现的证券系统的某个页面的示例，接下来介绍该页面中使用到的SpreadJS中的具体功能。
image.png258194884.png

一、黑色主题引入黑色主题的css文件

<link rel="stylesheet" type="text/css" href="css/gc.spread.sheets.excel2016black.13.0.2.css">

复制代码

设置背景色、灰色区域背景色、控制网格线及行头列头不显示：

spread.options.backColor = 'RGB(24,24,24)';
spread.options.grayAreaBackColor = 'RGB(34,34,34)';
sheet.options.gridline.showVerticalGridline = false;
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.rowHeaderVisible = false;

复制代码

二、表格
页面左边绑定了一个表格，表格第一列用了checkbox,后几列中设置了格式、列宽、颜色、对齐方式，主要代码：

var c = new GC.Spread.Sheets.CellTypes.CheckBox();
c.isThreeState(true);
var Info = { name: 'chose', displayName: '', size: 20 ,cellType: c};
var codeInfo = { name: 'ID', displayName: '代码', size: 30 };
var nameInfo = { name: 'Name', displayName: '名称', size: 40, resizable: false };
var priceInfo = { name: 'Info1', displayName: '造价利润', formatter: 'd/M/yy', size: 90 };
var otherInfo = { name: 'Info2', displayName: '折价利润', formatter: 'd/M/yy', size: 90 };
sheet.setDataSource(customers)
sheet.bindColumn(0, Info);
sheet.bindColumn(1, codeInfo);
sheet.bindColumn(2, nameInfo);
sheet.bindColumn(3, priceInfo);
sheet.bindColumn(4, otherInfo);

复制代码

三、列头排序
列头排序用了自定义单元格的方式实现，主要代码：

SortHearderCellType.prototype = new spreadNS.CellTypes.ColumnHeader();
SortHearderCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
spreadNS.CellTypes.ColumnHeader.prototype.paint.apply(this, arguments);
var margin = 3;
var gap = 1;
var color = "red";
var tag = context.sheet.getTag(context.row, context.col, context.sheetArea);
ctx.save();
if(!tag || tag && tag.ascending){
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(x+width-height+margin,y+height/2-gap );
......