- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <meta name="spreadjs culture" content="zh-cn" />
- <link href="js/style/gc.spread.sheets.10.1.0.css" rel="stylesheet" type="text/css" />
- <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
- <script type="text/javascript" src="js/gc.spread.sheets.all.10.1.0.js"></script>
- <!--<script type="text/javascript" src="js/interop/gc.spread.excelio.10.1.0.min.js"></script>-->
- <script type="text/javascript" src="js/resources/zh/gc.spread.sheets.resources.zh.10.1.0.js"></script>
- <script type="text/javascript" src="js/license.js"></script>
- </head>
- <body>
- <div id='ss' style='width:100%; height:400px;'></div>
- </body>
- </html>
- <script type="text/javascript">
- $(document).ready(function() {
- var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
- var sheet = spread.getActiveSheet();
- var datasource = [
- {name: 'Alice',age: 1,birthday: 1497590553000,position: 'PM'},
- {name: 'Alice1',age: 4,birthday: 1497604878000,position: 'PM'},
- {name: 'Alice2',age: 8,birthday: 1497605106000,position: 'PM'},
- {name: 'Alice3',age: 7,birthday: 1497605107000,position: 'PM'},
- {name: 'Alice4',age: 45,birthday: 1497605068000,position: 'PM'},
- {name: 'Alice5',age: 63,birthday: 1497605102000,position: 'PM'},
- {name: 'Alice6',age: 52,birthday: 1497605049000,position: 'PM'},
- {name: 'Alice7',age: 27,birthday: 1497605099000,position: 'PM'},
- {name: 'Alice8',age: 83,birthday: 1497605054000,position: 'PM'},
- {name: 'Alice9',age: 48,birthday: 1497605080000,position: 'PM'},
- {name: 'Alice10',age: 45,birthday: 1497605055000,position: 'PM'},
- {name: 'Alice11',age: 242,birthday: 1497605097000,position: 'PM'}
- ];
- // bindColumn one by one
- var colInfo = [{
- name: 'name',
- displayName: '姓名'
- },
- {
- name: 'age',
- displayName: 'Age',
- formatter: '0.00',
- value: function(row) {
- return row.age+2;
- }
- },
- {
- name: 'birthday',
- displayName: '生日',
- formatter: 'yyyy-MM-dd hh:mm:ss',
- value: function(row) {
- return new Date(row.birthday);
- }
- },
- {
- name: 'position',
- displayName: 'Position',
- isHideFilter:false
- }
- ];
- sheet.autoGenerateColumns = true;
- sheet.setDataSource(datasource);
- sheet.bindColumns(colInfo);
- initSpread(spread);
- resetDefaultStyle(sheet);
- setRowFilter(sheet);
- //表格设置排序,筛选
- function setRowFilter(sheet) {
- var rowCount, colCount;
- rowCount = sheet.getRowCount();
- colCount = sheet.getColumnCount();
- sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(-1, 0, rowCount, colCount)));
- var filter = sheet.rowFilter();
- colInfo.forEach(function (item, index) {
- if (!item.ishideFilter && item.isHideFilter == false) {
- filter.filterButtonVisible(index, false);
- };
- })
- }
- //初始化表格
- function initSpread(spread) {
- // give sheet name more space
- spread.options.setTabStripRatio = 0.8;
- spread.options.scrollbarMaxAlign = true;
- spread.options.scrollbarShowMax = true;
- spread.options.grayAreaBackColor = '#e9eef2';
- spread.options.showVerticalScrollbar = true;
- spread.options.newTabVisible = false;
- spread.options.tabStripVisible = false;
- GC.Spread.Common.CultureManager.culture("zh-cn");
- }
- //重新定义表格默认样式
- function resetDefaultStyle(sheet) {
- // set default style for all cells
- sheet.defaults.rowHeight = 26;
- sheet.defaults.colHeaderRowHeight = 30;
- sheet.defaults.colWidth = 200;
- sheet.options.protectionOptions = {
- allowFilter: true,
- allowSort: true,
- allowResizeRows: true,
- allowResizeColumns: true,
- allowEditObjects: true
- };
- sheet.options.isProtected = true;
- var defaultStyle = sheet.getDefaultStyle();
- // defaultStyle.backColor = "#eaf1f9";
- defaultStyle.foreColor = "#666666";
- defaultStyle.font = '9pt "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif';
- defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
- defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
- sheet.setDefaultStyle(defaultStyle);
- sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.colHeader);
- sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.colHeader);
- }
-
- });
- </script>
复制代码
age一列,使用了,value,排序不对了 |