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

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

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

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

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

复制代码

四、单元格类型
      示例用应用到的单元格类型有：按钮单元格、复选框单元格、按钮列表、单元按钮等，都是用在线表格编辑器直接设计的模板，例如，添加右上角的单元格按钮（V13版本新特性），可以按下图的方式添加：

五、迷你图
横向条状/竖向柱状函数迷你图可以用来显示数据的变化或范围。用HBARSPARKLINE函数创建：

六、条件格式
下图中的数据小于0.2时用绿色显示，大于0.5时用红色显示：

在线表格编辑器中可以直接添加条件格式：

附件中有该示例的完整代码，需要可以点击下载。