Merge branch 'master' of http://smartcost.f3322.net:3000/SmartCost/ConstructionCost

lib/global.js

@@ -3,10 +3,11 @@ function autoFlashHeight(){
     var headerHeight = $(".header").height();
     var toolsbarHeight = $(".toolsbar").height();
     var bottomContentHeight = $(".bottom-content").height();
-    $(".content").height($(window).height()-headerHeight);
-    $(".main-side").height($(window).height()-headerHeight-toolsbarHeight-2);
-    $(".top-content").height($(window).height()-headerHeight-toolsbarHeight-bottomContentHeight-1);
-    $(".fluid-content").height($(window).height()-headerHeight-toolsbarHeight-1);
+    var sidebarToolsBarHeight = $(".sidebar-tools-bar").height();
+    $(".main-data-side-f").height($(window).height()-headerHeight-toolsbarHeight-2);
+    $(".main-data-side-s").height($(window).height()-headerHeight-toolsbarHeight-sidebarToolsBarHeight-2);
+    $(".main-data-top").height($(window).height()-headerHeight-toolsbarHeight-bottomContentHeight-1);
+    $(".main-data-full").height($(window).height()-headerHeight-toolsbarHeight-1);
     $(".side-content").height($(window).height()-headerHeight );
     $(".poj-list").height($(window).height()-headerHeight-toolsbarHeight);
     $(".form-list").height($(window).height()-headerHeight-50 );

modules/bills/controllers/billsControllers.js

@@ -26,7 +26,6 @@ module.exports = {
     createStdBillsLib: function(req, res){
         var data = JSON.parse(req.body.data);
         var billsLibName = data.name;
-        //to do 以服务器时间为准 new Date();
          billsDao.createStdBillsLib(data, function(err, message, info){
             callback(req, res, err, message, info);
          });

modules/bills/model/interfaces.js

@@ -370,4 +370,4 @@ billsDao.prototype.deleteItemCharacter = function(itemId, callback){
 
 //-----------------------------
 
-module.exports = new billsDao();
+module.exports = new billsDao();

modules/bills/model/schemas.js

@@ -1,11 +1,13 @@
 var mongoose = require('mongoose');
-//�嵥������Ŀ��
+
 var stdBillsLibSchema =mongoose.Schema({
     billsLibId: Number,
     billsLibName: String,
     createDate: Date
-});
-//�嵥
+},
+    {versionKey: false}
+);
+
 var billsSchema = mongoose.Schema({
     //serialNo: Number,
     ID: Number,
@@ -16,27 +18,33 @@ var billsSchema = mongoose.Schema({
     unit: String,
     ruleText: String,
     Expression: String,
-    jobs: Array,//�嵥��������
-    items: Array,//�嵥��Ŀ����
-    recharge:String,//�嵥��ע
-    billsLibId: Number//������Ŀ��
-});
-//��������
+    jobs: Array,
+    items: Array,
+    recharge:String,
+    billsLibId: Number
+},
+    {versionKey: false}
+);
+
 var jobContentSchema = mongoose.Schema({
     id: Number,
     code: String,
     content: String,
-    billsLibId: Number//������Ŀ��
-});
-//��Ŀ����
+    billsLibId: Number
+},
+    {versionKey: false}
+);
+
 var itemCharacterSchema = mongoose.Schema({
     id: Number,
     code: String,
     character: String,
     itemValue: Array,
-    billsLibId: Number//������Ŀ��
-});
-/*//����ֵ
+    billsLibId: Number
+},
+    {versionKey: false}
+);
+/*
 var eigenvalueSchema = mongoose.Schema({
     eigenvalId: Number,
     eigenvalContent: String

modules/reports/util/excel_base_files/theme1.xml

@@ -0,0 +1,281 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Office 主题">
+	<a:themeElements>
+		<a:clrScheme name="Office">
+			<a:dk1>
+				<a:sysClr val="windowText" lastClr="000000"/>
+			</a:dk1>
+			<a:lt1>
+				<a:sysClr val="window" lastClr="FFFFFF"/>
+			</a:lt1>
+			<a:dk2>
+				<a:srgbClr val="1F497D"/>
+			</a:dk2>
+			<a:lt2>
+				<a:srgbClr val="EEECE1"/>
+			</a:lt2>
+			<a:accent1>
+				<a:srgbClr val="4F81BD"/>
+			</a:accent1>
+			<a:accent2>
+				<a:srgbClr val="C0504D"/>
+			</a:accent2>
+			<a:accent3>
+				<a:srgbClr val="9BBB59"/>
+			</a:accent3>
+			<a:accent4>
+				<a:srgbClr val="8064A2"/>
+			</a:accent4>
+			<a:accent5>
+				<a:srgbClr val="4BACC6"/>
+			</a:accent5>
+			<a:accent6>
+				<a:srgbClr val="F79646"/>
+			</a:accent6>
+			<a:hlink>
+				<a:srgbClr val="0000FF"/>
+			</a:hlink>
+			<a:folHlink>
+				<a:srgbClr val="800080"/>
+			</a:folHlink>
+		</a:clrScheme>
+		<a:fontScheme name="Office">
+			<a:majorFont>
+				<a:latin typeface="Cambria"/>
+				<a:ea typeface=""/>
+				<a:cs typeface=""/>
+				<a:font script="Jpan" typeface="ＭＳ Ｐゴシック"/>
+				<a:font script="Hang" typeface="맑은 고딕"/>
+				<a:font script="Hans" typeface="宋体"/>
+				<a:font script="Hant" typeface="新細明體"/>
+				<a:font script="Arab" typeface="Times New Roman"/>
+				<a:font script="Hebr" typeface="Times New Roman"/>
+				<a:font script="Thai" typeface="Tahoma"/>
+				<a:font script="Ethi" typeface="Nyala"/>
+				<a:font script="Beng" typeface="Vrinda"/>
+				<a:font script="Gujr" typeface="Shruti"/>
+				<a:font script="Khmr" typeface="MoolBoran"/>
+				<a:font script="Knda" typeface="Tunga"/>
+				<a:font script="Guru" typeface="Raavi"/>
+				<a:font script="Cans" typeface="Euphemia"/>
+				<a:font script="Cher" typeface="Plantagenet Cherokee"/>
+				<a:font script="Yiii" typeface="Microsoft Yi Baiti"/>
+				<a:font script="Tibt" typeface="Microsoft Himalaya"/>
+				<a:font script="Thaa" typeface="MV Boli"/>
+				<a:font script="Deva" typeface="Mangal"/>
+				<a:font script="Telu" typeface="Gautami"/>
+				<a:font script="Taml" typeface="Latha"/>
+				<a:font script="Syrc" typeface="Estrangelo Edessa"/>
+				<a:font script="Orya" typeface="Kalinga"/>
+				<a:font script="Mlym" typeface="Kartika"/>
+				<a:font script="Laoo" typeface="DokChampa"/>
+				<a:font script="Sinh" typeface="Iskoola Pota"/>
+				<a:font script="Mong" typeface="Mongolian Baiti"/>
+				<a:font script="Viet" typeface="Times New Roman"/>
+				<a:font script="Uigh" typeface="Microsoft Uighur"/>
+			</a:majorFont>
+			<a:minorFont>
+				<a:latin typeface="Calibri"/>
+				<a:ea typeface=""/>
+				<a:cs typeface=""/>
+				<a:font script="Jpan" typeface="ＭＳ Ｐゴシック"/>
+				<a:font script="Hang" typeface="맑은 고딕"/>
+				<a:font script="Hans" typeface="宋体"/>
+				<a:font script="Hant" typeface="新細明體"/>
+				<a:font script="Arab" typeface="Arial"/>
+				<a:font script="Hebr" typeface="Arial"/>
+				<a:font script="Thai" typeface="Tahoma"/>
+				<a:font script="Ethi" typeface="Nyala"/>
+				<a:font script="Beng" typeface="Vrinda"/>
+				<a:font script="Gujr" typeface="Shruti"/>
+				<a:font script="Khmr" typeface="DaunPenh"/>
+				<a:font script="Knda" typeface="Tunga"/>
+				<a:font script="Guru" typeface="Raavi"/>
+				<a:font script="Cans" typeface="Euphemia"/>
+				<a:font script="Cher" typeface="Plantagenet Cherokee"/>
+				<a:font script="Yiii" typeface="Microsoft Yi Baiti"/>
+				<a:font script="Tibt" typeface="Microsoft Himalaya"/>
+				<a:font script="Thaa" typeface="MV Boli"/>
+				<a:font script="Deva" typeface="Mangal"/>
+				<a:font script="Telu" typeface="Gautami"/>
+				<a:font script="Taml" typeface="Latha"/>
+				<a:font script="Syrc" typeface="Estrangelo Edessa"/>
+				<a:font script="Orya" typeface="Kalinga"/>
+				<a:font script="Mlym" typeface="Kartika"/>
+				<a:font script="Laoo" typeface="DokChampa"/>
+				<a:font script="Sinh" typeface="Iskoola Pota"/>
+				<a:font script="Mong" typeface="Mongolian Baiti"/>
+				<a:font script="Viet" typeface="Arial"/>
+				<a:font script="Uigh" typeface="Microsoft Uighur"/>
+			</a:minorFont>
+		</a:fontScheme>
+		<a:fmtScheme name="Office">
+			<a:fillStyleLst>
+				<a:solidFill>
+					<a:schemeClr val="phClr"/>
+				</a:solidFill>
+				<a:gradFill rotWithShape="1">
+					<a:gsLst>
+						<a:gs pos="0">
+							<a:schemeClr val="phClr">
+								<a:tint val="50000"/>
+								<a:satMod val="300000"/>
+							</a:schemeClr>
+						</a:gs>
+						<a:gs pos="35000">
+							<a:schemeClr val="phClr">
+								<a:tint val="37000"/>
+								<a:satMod val="300000"/>
+							</a:schemeClr>
+						</a:gs>
+						<a:gs pos="100000">
+							<a:schemeClr val="phClr">
+								<a:tint val="15000"/>
+								<a:satMod val="350000"/>
+							</a:schemeClr>
+						</a:gs>
+					</a:gsLst>
+					<a:lin ang="16200000" scaled="1"/>
+				</a:gradFill>
+				<a:gradFill rotWithShape="1">
+					<a:gsLst>
+						<a:gs pos="0">
+							<a:schemeClr val="phClr">
+								<a:shade val="51000"/>
+								<a:satMod val="130000"/>
+							</a:schemeClr>
+						</a:gs>
+						<a:gs pos="80000">
+							<a:schemeClr val="phClr">
+								<a:shade val="93000"/>
+								<a:satMod val="130000"/>
+							</a:schemeClr>
+						</a:gs>
+						<a:gs pos="100000">
+							<a:schemeClr val="phClr">
+								<a:shade val="94000"/>
+								<a:satMod val="135000"/>
+							</a:schemeClr>
+						</a:gs>
+					</a:gsLst>
+					<a:lin ang="16200000" scaled="0"/>
+				</a:gradFill>
+			</a:fillStyleLst>
+			<a:lnStyleLst>
+				<a:ln w="9525" cap="flat" cmpd="sng" algn="ctr">
+					<a:solidFill>
+						<a:schemeClr val="phClr">
+							<a:shade val="95000"/>
+							<a:satMod val="105000"/>
+						</a:schemeClr>
+					</a:solidFill>
+					<a:prstDash val="solid"/>
+				</a:ln>
+				<a:ln w="25400" cap="flat" cmpd="sng" algn="ctr">
+					<a:solidFill>
+						<a:schemeClr val="phClr"/>
+					</a:solidFill>
+					<a:prstDash val="solid"/>
+				</a:ln>
+				<a:ln w="38100" cap="flat" cmpd="sng" algn="ctr">
+					<a:solidFill>
+						<a:schemeClr val="phClr"/>
+					</a:solidFill>
+					<a:prstDash val="solid"/>
+				</a:ln>
+			</a:lnStyleLst>
+			<a:effectStyleLst>
+				<a:effectStyle>
+					<a:effectLst>
+						<a:outerShdw blurRad="40000" dist="20000" dir="5400000" rotWithShape="0">
+							<a:srgbClr val="000000">
+								<a:alpha val="38000"/>
+							</a:srgbClr>
+						</a:outerShdw>
+					</a:effectLst>
+				</a:effectStyle>
+				<a:effectStyle>
+					<a:effectLst>
+						<a:outerShdw blurRad="40000" dist="23000" dir="5400000" rotWithShape="0">
+							<a:srgbClr val="000000">
+								<a:alpha val="35000"/>
+							</a:srgbClr>
+						</a:outerShdw>
+					</a:effectLst>
+				</a:effectStyle>
+				<a:effectStyle>
+					<a:effectLst>
+						<a:outerShdw blurRad="40000" dist="23000" dir="5400000" rotWithShape="0">
+							<a:srgbClr val="000000">
+								<a:alpha val="35000"/>
+							</a:srgbClr>
+						</a:outerShdw>
+					</a:effectLst>
+					<a:scene3d>
+						<a:camera prst="orthographicFront">
+							<a:rot lat="0" lon="0" rev="0"/>
+						</a:camera>
+						<a:lightRig rig="threePt" dir="t">
+							<a:rot lat="0" lon="0" rev="1200000"/>
+						</a:lightRig>
+					</a:scene3d>
+					<a:sp3d>
+						<a:bevelT w="63500" h="25400"/>
+					</a:sp3d>
+				</a:effectStyle>
+			</a:effectStyleLst>
+			<a:bgFillStyleLst>
+				<a:solidFill>
+					<a:schemeClr val="phClr"/>
+				</a:solidFill>
+				<a:gradFill rotWithShape="1">
+					<a:gsLst>
+						<a:gs pos="0">
+							<a:schemeClr val="phClr">
+								<a:tint val="40000"/>
+								<a:satMod val="350000"/>
+							</a:schemeClr>
+						</a:gs>
+						<a:gs pos="40000">
+							<a:schemeClr val="phClr">
+								<a:tint val="45000"/>
+								<a:shade val="99000"/>
+								<a:satMod val="350000"/>
+							</a:schemeClr>
+						</a:gs>
+						<a:gs pos="100000">
+							<a:schemeClr val="phClr">
+								<a:shade val="20000"/>
+								<a:satMod val="255000"/>
+							</a:schemeClr>
+						</a:gs>
+					</a:gsLst>
+					<a:path path="circle">
+						<a:fillToRect l="50000" t="-80000" r="50000" b="180000"/>
+					</a:path>
+				</a:gradFill>
+				<a:gradFill rotWithShape="1">
+					<a:gsLst>
+						<a:gs pos="0">
+							<a:schemeClr val="phClr">
+								<a:tint val="80000"/>
+								<a:satMod val="300000"/>
+							</a:schemeClr>
+						</a:gs>
+						<a:gs pos="100000">
+							<a:schemeClr val="phClr">
+								<a:shade val="30000"/>
+								<a:satMod val="200000"/>
+							</a:schemeClr>
+						</a:gs>
+					</a:gsLst>
+					<a:path path="circle">
+						<a:fillToRect l="50000" t="50000" r="50000" b="50000"/>
+					</a:path>
+				</a:gradFill>
+			</a:bgFillStyleLst>
+		</a:fmtScheme>
+	</a:themeElements>
+	<a:objectDefaults/>
+	<a:extraClrSchemeLst/>
+</a:theme>

modules/reports/util/rpt_excel_util.js

@@ -0,0 +1,276 @@
+/**
+ * Created by Tony on 2017/4/1.
+ */
+var JV = require('../rpt_component/Jpc_ValueDefine');
+var fs = require('fs');
+var jpcCmnHelper = require('../rpt_component/helper/Jpc_Helper_Common');
+var DPI = jpcCmnHelper.getScreenDPI()[0];
+const dftHeadXml = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
+
+function writeContentTypes(sheets) {
+    var rst = [];
+    rst.push(dftHeadXml + '\r\n');
+    rst.push('<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">');
+    //...
+    rst.push('<Override PartName="/xl/theme/theme1.xml" ContentType="application/vnd.openxmlformats-officedocument.theme+xml"/>');
+    rst.push('<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>');
+    rst.push('<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>');
+    rst.push('<Default Extension="xml" ContentType="application/xml"/>');
+    rst.push('<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>');
+    rst.push('<Override PartName="/docProps/app.xml" ContentType="application/vnd.openxmlformats-officedocument.extended-properties+xml"/>');
+    rst.push('<Override PartName="/xl/sharedStrings.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml"/>');
+    for (var i = 0; i < sheets.length; i++) {
+        rst.push('<Override PartName="/xl/worksheets/' + sheets[i].sheetName + '.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>')
+    }
+    rst.push('<Override PartName="/docProps/core.xml" ContentType="application/vnd.openxmlformats-package.core-properties+xml"/>');
+    rst.push('</Types>');
+    return rst;
+}
+function writeRootRels(){
+    var rst = [];
+    rst.push(dftHeadXml + '\r\n');
+    rst.push('<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">');
+    rst.push('<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>');
+    rst.push('<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/>');
+    rst.push('<Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties" Target="docProps/app.xml"/>');
+    rst.push('</Relationships>');
+    return rst;
+}
+function writeApp(sheets) {
+    var rst = [];
+    rst.push(dftHeadXml + '\r\n');
+    rst.push('<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes">');
+    rst.push('<Application>Microsoft Excel</Application>');
+    rst.push('<DocSecurity>0</DocSecurity>');
+    rst.push('<ScaleCrop>false</ScaleCrop>');
+    rst.push('<HeadingPairs>');
+    rst.push('<vt:vector size="2" baseType="variant">');
+    rst.push('<vt:variant><vt:lpstr>¹¤×÷±í</vt:lpstr></vt:variant>');
+    rst.push('<vt:variant><vt:i4>' + sheets.length + '</vt:i4></vt:variant>');
+    rst.push('</vt:vector>');
+    rst.push('</HeadingPairs>');
+    rst.push('<TitlesOfParts>');
+    rst.push('<vt:vector size="' + sheets.length + '" baseType="lpstr">');
+    for (var i = 0; i < sheets.length; i++) {
+        rst.push('<vt:lpstr>' + sheets[i].sheetName + '</vt:lpstr>')
+    }
+    rst.push('</vt:vector>');
+    rst.push('</TitlesOfParts>');
+    rst.push('<Company>SmartCost</Company>');
+    rst.push('<LinksUpToDate>false</LinksUpToDate>');
+    rst.push('<SharedDoc>false</SharedDoc>');
+    rst.push('<HyperlinksChanged>false</HyperlinksChanged>');
+    rst.push('<AppVersion>12.0000</AppVersion>');
+    //rst.push('');
+    rst.push('</Properties>');
+    return rst;
+}
+function writeCore() {
+    var rst = [];
+    p_fillZero = function(val){
+        var rst = val;
+        if (val < 10) {
+            rst = '0' + val;
+        }
+        return rst;
+    };
+    rst.push(dftHeadXml + '\r\n');
+    rst.push('<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dcmitype="http://purl.org/dc/dcmitype/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">');
+    rst.push('<dc:creator>SmartCost</dc:creator>');
+    rst.push('<cp:lastModifiedBy>SmartCost</cp:lastModifiedBy>');
+    var dt = new Date(), dtStr = dt.getFullYear() + '-' + p_fillZero(dt.getMonth()) + '-' + p_fillZero(dt.getDate()) + 'T' +
+        p_fillZero(dt.getHours()) + ':' + p_fillZero(dt.getMinutes()) + ':' + p_fillZero(dt.getSeconds()) + 'Z';
+    rst.push('<dcterms:created xsi:type="dcterms:W3CDTF">' + dtStr + '</dcterms:created>');
+    rst.push('<dcterms:modified xsi:type="dcterms:W3CDTF">' + dtStr + '</dcterms:modified>');
+    //rst.push('');
+    rst.push('</cp:coreProperties>');
+    return rst;
+}
+function writeXlWorkBook(sheets){
+    var rst = [];
+    rst.push(dftHeadXml + '\r\n');
+    rst.push('<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">');
+    rst.push('<fileVersion appName="xl" lastEdited="4" lowestEdited="4" rupBuild="4505"/>');
+    rst.push('<workbookPr defaultThemeVersion="124226"/>');
+    rst.push('<bookViews><workbookView xWindow="360" yWindow="345" windowWidth="14655" windowHeight="4305"/></bookViews>');
+    rst.push('<sheets>');
+    for (var i = 0; i < sheets.length; i++) {
+        rst.push('<sheet name="' + sheets[i].sheetName + '" sheetId="' + (i + 1) + 'r:id="rId' + (i + 1) + '1"/>')
+    }
+    rst.push('</sheets>');
+    rst.push('<calcPr calcId="124519"/>');
+    //rst.push('');
+    rst.push('</workbook>');
+    return rst;
+}
+function writeXlRels(sheets){
+    var rst = [], idx = 1;
+    rst.push(dftHeadXml + '\r\n');
+    rst.push('<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">');
+    for (var i = 0; i < sheets.length; i++) {
+        rst.push('<Relationship Id="rId' + idx + '" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/' + sheets[i].sheetName + '.xml/>"')
+        idx++;
+    }
+    rst.push('<Relationship Id="rId' + idx + '" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme" Target="theme/theme1.xml"/>');
+    idx++;
+    rst.push('<Relationship Id="rId' + idx + '" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/>');
+    idx++;
+    rst.push('<Relationship Id="rId' + idx + '" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings" Target="sharedStrings.xml"/>');
+    //rst.push('');
+    rst.push('</Relationships>');
+    return rst;
+}
+function writeTheme(){
+    var rst = fs.readFileSync('./excel_base_files/theme1.xml', 'utf8', 'r');
+    return rst;
+}
+function writeStyles(pageData){
+    //
+}
+function writeSharedString(pageData){
+    //
+}
+function writeSheets(pageData){
+    var rst = [], sharedStrList = [];
+    for (var i = 0; i < pageData.items.length; i++) {
+        //
+    }
+}
+function writeSheet(sheetData, sharedStrList, styleList){
+    var rst = [], xPos = [0], yPos = [0], headerStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    private_pre_analyze_pos = function(){
+        var cell, pos;
+        sheetData.cells.sort(function(cell1, cell2) {
+            var rst = 0;
+            if (cell1[JV.PROP_AREA][JV.PROP_TOP] > cell2[JV.PROP_AREA][JV.PROP_TOP]) {
+                rst = 1;
+            } else if (cell1[JV.PROP_AREA][JV.PROP_TOP] < cell2[JV.PROP_AREA][JV.PROP_TOP]) {
+                rst = -1;
+            } else {
+                if (cell1[JV.PROP_AREA][JV.PROP_LEFT] > cell2[JV.PROP_AREA][JV.PROP_LEFT]) {
+                    rst = 1;
+                } else if (cell1[JV.PROP_AREA][JV.PROP_LEFT] < cell2[JV.PROP_AREA][JV.PROP_LEFT]) {
+                    rst = -1;
+                }
+            }
+        });
+        for (var i = 0; i < sheetData.cells.length; i++) {
+            cell = sheetData.cells[i];
+            pos = cell[JV.PROP_AREA][JV.PROP_LEFT];
+            if (xPos.indexOf(pos) < 0) xPos.push(pos);
+            pos = cell[JV.PROP_AREA][JV.PROP_RIGHT];
+            if (xPos.indexOf(pos) < 0) xPos.push(pos);
+            pos = cell[JV.PROP_AREA][JV.PROP_TOP];
+            if (yPos.indexOf(pos) < 0) yPos.push(pos);
+            pos = cell[JV.PROP_AREA][JV.PROP_BOTTOM];
+            if (yPos.indexOf(pos) < 0) yPos.push(pos);
+        }
+        xPos.sort();
+        yPos.sort();
+    };
+    private_getCellIdxStr = function(idx){
+        var rst = 'A';
+        if (idx < 26) {
+            rst = headerStr[idx];
+        } else if (idx < 26*26+26) {
+            var ti = Math.floor(idx / 26), tj = idx % 26;
+            rst = headerStr[ti - 1] + headerStr[tj];
+        } else if (idx < 26*26*26+26) {
+            var ti = Math.floor(idx / (26*26)), tj = Math.floor((idx - ti * 26*26) / 26), tk = idx % 26;
+            rst = headerStr[ti - 1] + headerStr[tj-1] + headerStr[tk];
+        }
+        return rst;
+    };
+    private_getSharedStrIdx = function(val) {
+        var rst = sharedStrList.indexOf(val);
+        if (rst < 0) {
+            sharedStrList.push(val);
+            rst = sharedStrList.length - 1;
+        }
+        return rst;
+    };
+    private_getStyleIdx = function(cell) {
+        var rst = 1;
+        //
+        return rst;
+    };
+    private_setCols = function(){
+        rst.push('<cols>');
+        var w = 0;
+        for (var i = 1; i < xPos.length; i++) {
+            w = 1.0 * (xPos[i] - xPos[i - 1]) / DPI;
+            w = Math.round(w * 1000) / 1000;
+            rst.push('<col min="1" max="1" width="' + w + '" customWidth="1"/>');
+        }
+        rst.push('</cols>');
+    };
+    private_setMergedCells = function() {
+        var cell, idxR, idxL, idxT, idxB, cnt = 0;
+        rst.push('<mergeCells count="?">');
+        var startIdx = rst.length - 1;
+        for (var i = 0; i < sheetData.cells.length; i++) {
+            cell = sheetData.cells[i];
+            idxR = xPos.indexOf(cell[JV.PROP_AREA][JV.PROP_RIGHT]);
+            idxL = xPos.indexOf(cell[JV.PROP_AREA][JV.PROP_LEFT]);
+            idxB = yPos.indexOf(cell[JV.PROP_AREA][JV.PROP_BOTTOM]);
+            idxT = yPos.indexOf(cell[JV.PROP_AREA][JV.PROP_TOP]);
+            if (idxR - idxL > 1 || idxB - idxT > 1) {
+                rst.push('<mergeCell ref="' + private_getCellIdxStr(idxL - 1) + idxT + ':' + private_getCellIdxStr(idxR - 2) + (idxB - 1) + '"/>');
+                cnt++;
+            }
+        }
+        rst[startIdx] = '<mergeCells count="' + cnt + '">';
+        rst.push('</mergeCells>');
+    };
+    private_setSheetData = function(){
+        rst.push('<sheetData>');
+        var spanX = xPos.length - 1, cellIdx = 0, h = 0, hasMoreCols = true;
+        for (var i = 0; i < yPos.length - 1; i++) {
+            if (i === 0) {
+                h = 1.0 * (yPos[i]) / DPI;
+            } else {
+                h = 1.0 * (yPos[i] - yPos[i - 1]) / DPI;
+            }
+            h = Math.round(h * 1000) / 1000;
+            rst.push('<row r="' + (i+1) + '" spans="1:' + spanX + '" ht="' + h + '" customHeight="1">');
+            //then put the cells of this row
+            var colIdxStr = '';
+            for (var j = 0; j < xPos.length; j++) {
+                colIdxStr = private_getCellIdxStr(j);
+                if (hasMoreCols) {
+                    var ridx = yPos.indexOf(sheetData.cells[cellIdx][JV.PROP_AREA][JV.PROP_TOP]);
+                } else {
+                    rst.push('<c r="' + colIdxStr + (i+1) + '" s="1"/>');
+                }
+            }
+            rst.push('</row');
+        }
+        //sheetData.cells.length
+        rst.push('</sheetData>');
+    };
+    private_pre_analyze_pos();
+    rst.push(dftHeadXml + '\r\n');
+    rst.push('<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">');
+    var colStr = private_getCellIdxStr(xPos.length - 2);
+    rst.push('<dimension ref="A1:' + colStr + '' + yPos.length + '"/>');
+    rst.push('<sheetViews><sheetView tabSelected="1" workbookViewId="0">');
+    rst.push('<selection sqref="A1:' + colStr + '1"/>');
+    rst.push('</sheetView></sheetViews>');
+    rst.push('<sheetFormatPr defaultRowHeight="13.5"/>');
+    private_setCols
+    private_setSheetData();
+    private_setMergedCells();
+    rst.push('<phoneticPr fontId="1" type="noConversion"/>');
+    rst.push('<pageMargins left="0.315" right="0.215" top="0.315" bottom="0.315" header="0" footer="0"/>');
+    //rst.push('<pageSetup paperSize="9" fitToWidth="0" fitToHeight="0" orientation="landscape" horizontalDpi="300" verticalDpi="300"/>');
+    rst.push('<headerFooter alignWithMargins="0"/>');
+    rst.push('</worksheet>');
+    //rst.push('');
+    return rst;
+}
+
+module.exports = {
+    exportExcel: function (pageData, options) {
+        var rptOptions = (options || {singlePage: false, fileName: 'report'});
+    }
+}

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "bluebird": "^3.5.0",
     "excel-export": "^0.5.1",
+    "jszip": "^3.1.3",
     "xlsx": "^0.9.6"
   }
 }

public/web/idTree.js

@@ -0,0 +1,448 @@
+/**
+ * Created by Mai on 2017/3/17.
+ */
+var idTree = {
+    createNew: function (setting) {
+        var _setting = {
+            id: 'id',
+            pid: 'pid',
+            nid: 'nid',
+            rootId: -1
+        };
+
+        var tools = {
+            findNode: function (nodes, check) {
+                for (var i = 0; i < nodes.length; i++) {
+                    if (check(nodes[i])) {
+                        return nodes[i];
+                    }
+                }
+                return null;
+            },
+            reSortNodes: function (nodes, recursive) {
+                var temp = [], first;
+                var findFirstNode = function (nodes) {
+                    return tools.findNode(nodes, function (node) {
+                        return node.preSibling === null;
+                    });
+                };
+                var moveNode = function (node, orgArray, newArray, newIndex) {
+                    var next;
+                    orgArray.splice(orgArray.indexOf(node), 1);
+                    newArray.splice(newIndex, 0, node);
+                    if (node.getNextSiblingID() !== -1) {
+                        next = node.nextSibling;
+                        if (next && (orgArray.indexOf(next) >= 0)) {
+                            moveNode(next, orgArray, newArray, newIndex + 1);
+                        }
+                    }
+                };
+                if (nodes.length === 0) {
+                    return nodes;
+                }
+                if (recursive) {
+                    nodes.forEach(function (node) {
+                        node.children = tools.reSortNodes(node.children, recursive);
+                    });
+                }
+                while (nodes.length > 0) {
+                    first = findFirstNode(nodes);
+                    first = first ? first : nodes[0];
+                    moveNode(first, nodes, temp, temp.length);
+                }
+                nodes = null;
+                tools.reSiblingNodes(temp);
+                return temp;
+            },
+            reSiblingNodes: function (nodes) {
+                var i;
+                for (i = 0; i < nodes.length; i++) {
+                    nodes[i].preSibling = (i === 0) ? null : nodes[i - 1];
+                    nodes[i].nextSibling = (i === nodes.length - 1) ? null : nodes[i + 1];
+                }
+            },
+            // 在nodes中，从iIndex（包括）开始全部移除
+            removeNodes: function (tree, parent, iIndex, count) {
+                var children = parent ? parent.children : tree.roots;
+                var pre = (iIndex < 0 || iIndex >= children.length) ? null : children[iIndex].preSibling;
+                var next = (pre && iIndex + count - 1 < children.length) ? children[iIndex + count] : null;
+                if (pre) {
+                    pre.nextSibling = next;
+                }
+                if (next) {
+                    next.preSibling = pre;
+                }
+                if (arguments.length === 4) {
+                    children.splice(iIndex, count);
+                } else {
+                    children.splice(iIndex, children.length - iIndex);
+                }
+            },
+            // 在nodes中增加addNodes, 位置从index开始
+            addNodes: function (tree, parent, nodes, iIndex) {
+                var children = parent ? parent.children : tree.roots;
+                var pre, next, i;
+                if (nodes.length === 0) { return; }
+                if (arguments.length === 4) {
+                    pre = (iIndex <= 0 || iIndex > children.length) ? null : children[iIndex - 1];
+                    next = pre ? pre.nextSibling : null;
+                } else if (arguments.length === 3) {
+                    pre = children.length === 0 ? null : children[children.length - 1];
+                    next = null;
+                }
+                if (pre) {
+                    pre.nextSibling = nodes[0];
+                }
+                nodes[0].preSibling = pre;
+                if (next) {
+                    next.preSibling = nodes[nodes.length - 1];
+                }
+                nodes[nodes.length - 1].nextSibling = next;
+                for (i = 0; i < nodes.length; i++) {
+                    if (arguments.length === 4) {
+                        children.splice(iIndex + i, 0, nodes[i]);
+                    } else if (arguments.length === 3) {
+                        children.push(nodes[i]);
+                    }
+                    nodes[i].parent = parent;
+                }
+            },
+            sortTreeItems: function (tree) {
+                var addItems = function (items) {
+                    var i;
+                    for (i = 0; i < items.length; i++) {
+                        tree.items.push(items[i]);
+                        addItems(items[i].children);
+                    }
+                };
+                tree.items.splice(0, tree.items.length);
+                addItems(tree.roots);
+            }
+        };
+
+        var Node = function (tree, data) {
+            // 以下的属性，本单元外均不可直接修改
+            this.tree = tree;
+            this.data = data;
+            this.children = [];
+
+            this.parent = null;
+            this.nextSibling = null;
+            this.preSibling = null;
+
+            this.expanded = true;
+            this.visible = true;
+
+            this.visible = true;
+
+            this.isUpdate = false;
+            this.isNew = false;
+        };
+
+        Node.prototype.getID = function () {
+            return this.data[this.tree.setting.id];
+        };
+        Node.prototype.getParentID = function () {
+            return this.parent ? this.parent.getID() : -1;
+        };
+        Node.prototype.getNextSiblingID = function () {
+            return this.nextSibling ? this.nextSibling.getID() : -1;
+        };
+
+        Node.prototype.firstChild = function () {
+            return this.children.length === 0 ? null : this.children[0];
+        };
+        Node.prototype.depth = function () {
+            return this.parent ? this.parent.depth() + 1 : 0;
+        };
+        Node.prototype.isFirst = function () {
+            if (this.parent) {
+                return this.parent.children.indexOf(this) === 0 ? true : false;
+            } else {
+                return this.tree.roots.indexOf(this) === 0 ? true : false;
+            }
+        };
+        Node.prototype.isLast = function () {
+            if (this.parent) {
+                return this.parent.children.indexOf(this) === this.parent.children.length - 1 ? true : false;
+            } else {
+                return this.tree.roots.indexOf(this) === this.tree.roots.length - 1 ? true : false;
+            }
+        };
+        Node.prototype.siblingIndex = function () {
+            return this.parent ? this.parent.children.indexOf(this) : this.tree.roots.indexOf(this);
+        }
+        Node.prototype.posterityCount = function () {
+            var iCount = 0;
+            if (this.children.length !== 0) {
+                iCount += this.children.length;
+                this.children.forEach(function (child) {
+                    iCount += child.posterityCount();
+                });
+            }
+            return iCount;
+            /*return (node.children.length === 0) ? 0 : node.children.reduce(function (x, y) {
+                return x.posterityCount() + y.posterityCount();
+            }) + node.children.count;*/
+        };
+
+        Node.prototype.setExpanded = function (expanded) {
+            var setNodesVisible = function (nodes, visible) {
+                nodes.forEach(function (node) {
+                    node.visible = visible;
+                    setNodesVisible(node.children, visible && node.expanded);
+                })
+            };
+            this.expanded = expanded;
+            setNodesVisible(this.children, expanded);
+        };
+        /*Node.prototype.vis = function () {
+            return this.parent ? this.parent.vis() && this.parent.expanded() : true;
+        };*/
+        Node.prototype.serialNo = function () {
+            return this.tree.items.indexOf(this);
+        }
+        /*Node.prototype.serialNo = function () {
+            if (this.preSibling) {
+                return this.preSibling.serialNo() + this.preSibling.posterityCount() + 1;
+            } else if (this.parent) {
+                return this.parent.serialNo() + 1;
+            } else {
+                return 0;
+            }
+        };*/
+
+        Node.prototype.addChild = function (node) {
+            var preSibling = this.children.length === 0 ? null : this.children[this.children.length - 1];
+            node.parent = this;
+            if (preSibling) {
+                preSibling.nextSibling = node;
+            }
+            node.preSibling = preSibling;
+            this.children.push(node);
+        };
+        Node.prototype.removeChild = function (node) {
+            var preSibling = node.preSibling, nextSibling = node.nextSibling;
+            if (preSibling) {
+                preSibling.nextSibling = nextSibling;
+            }
+            if (nextSibling) {
+                nextSibling.preSibling = preSibling;
+            }
+            this.children.splice(this.children.re)
+        };
+
+        Node.prototype.canUpLevel = function () {
+            return this.parent ? true : false;
+        };
+        Node.prototype.canDownLevel = function () {
+            return !this.isFirst();
+        };
+        Node.prototype.canUpMove = function () {
+            return !this.isFirst();
+        };
+        Node.prototype.canDownMove = function () {
+            return !this.isLast();
+        }
+
+        Node.prototype.upLevel = function () {
+            var success = false,
+                iIndex = this.parent.children.indexOf(this), orgParent = this.parent, newNextSibling = this.parent.nextSibling;
+            if (this.canUpLevel) {
+                // NextSiblings become child
+                tools.addNodes(this.tree, this, this.parent.children.slice(iIndex + 1));
+                // Orginal Parent remove node and nextSiblings
+                tools.removeNodes(this.tree, this.parent, iIndex);
+                // New Parent add node
+                tools.addNodes(this.tree, this.parent.parent, [this], this.parent.siblingIndex() + 1);
+                if (!this.expanded) {
+                    this.setExpanded(true);
+                }
+                success = true;
+            }
+            return success;
+        };
+        Node.prototype.downLevel = function () {
+            var success = false, iIndex = this.parent ? this.parent.children.indexOf(this) : this.tree.roots.indexOf(this);
+            var newParent = this.preSibling;
+            if (this.canDownLevel()) {
+                tools.removeNodes(this.tree, this.parent, this.siblingIndex(), 1);
+                tools.addNodes(this.tree, this.preSibling, [this]);
+                if (!newParent.expanded) {
+                    newParent.setExpanded(true);
+                }
+                success = true;
+            }
+            return success;
+        };
+        Node.prototype.upMove = function () {
+            var success = false;
+            var iIndex = this.siblingIndex(), belongArray = this.parent ? this.parent.children : this.tree.roots, orgPre = this.preSibling;
+            if (this.canUpMove()) {
+                orgPre.nextSibling = this.nextSibling;
+                this.preSibling = orgPre.preSibling;
+                orgPre.preSibling = this;
+                this.nextSibling = orgPre;
+                belongArray.splice(iIndex, 1);
+                belongArray.splice(iIndex - 1, 0, this);
+                tools.sortTreeItems(this.tree);
+                success = true;
+            }
+            return success;
+        };
+        Node.prototype.downMove = function () {
+            var success = false;
+            var iIndex = this.siblingIndex(), belongArray = this.parent ? this.parent.children : this.tree.roots, orgNext = this.nextSibling;
+            if (this.canDownMove()) {
+                orgNext.preSibling = this.preSibling;
+                this.nextSibling = orgNext.nextSibling;
+                orgNext.nextSibling = this;
+                this.preSibling = orgNext;
+                belongArray.splice(iIndex, 1);
+                belongArray.splice(iIndex + 1, 0, this);
+                tools.sortTreeItems(this.tree);
+                success = true;
+            }
+            return success;
+        }
+
+        var Tree = function (setting) {
+            this.nodes = {};
+            this.roots = [];
+            this.items = [];
+            this.setting = setting;
+            this.prefix = 'id_';
+            this.selected = null;
+        };
+
+        Tree.prototype.maxNodeID = (function () {
+            var maxID = 0;
+            return function (ID) {
+                if (arguments.length === 0) {
+                    return maxID;
+                } else {
+                    maxID = Math.max(maxID, ID);
+                }
+            };
+        })();
+        Tree.prototype.rangeNodeID = (function () {
+            var rangeID = -1;
+            return function (ID) {
+                if (arguments.length === 0) {
+                    return rangeID;
+                } else {
+                    rangeID = Math.max(rangeID, ID);
+                }
+            }
+        })();
+        Tree.prototype.newNodeID = function () {
+            if (this.rangeNodeID() === -1) {
+                return this.maxNodeID() + 1;
+            } else {
+                if (this.maxNodeID() >= this.rangeNodeID()) {
+                    return this.maxNodeID() + 1;
+                } else {
+                    return -1;
+                }
+            }
+            /*if (this.maxID >= this.rangeNodeID() || this.rangeNodeID === -1) {
+                return -1;
+            } else {
+                return this.maxNodeID() + 1;
+            }*/
+        };
+
+        Tree.prototype.loadDatas = function (datas) {
+            var prefix = this.prefix, i, node, parent, next, that = this;
+            // prepare index
+            datas.forEach(function (data) {
+                var node = new Node(that, data);
+                that.nodes[prefix + data[that.setting.id]] = node;
+                that.maxNodeID(data[that.setting.id]);
+            });
+            // set parent by pid, set nextSibling by nid
+            datas.forEach(function (data) {
+                node = that.nodes[prefix + data[that.setting.id]];
+                if (data[that.setting.pid] === that.setting.rootId) {
+                    that.roots.push(node);
+                } else {
+                    parent = that.nodes[prefix + data[that.setting.pid]];
+                    if (parent) {
+                        node.parent = parent;
+                        parent.children.push(node);
+                    }
+                }
+                if (data[that.setting.nid] !== that.setting.rootId) {
+                    next = that.nodes[prefix + data[that.setting.nid]];
+                    if (next) {
+                        node.nextSibling = next;
+                        next.preSibling = node;
+                    }
+                }
+            })
+            // sort by nid
+            this.roots = tools.reSortNodes(this.roots, true);
+            tools.sortTreeItems(this);
+        };
+        Tree.prototype.firstNode = function () {
+            return this.roots.length === 0 ? null : this.roots[0];
+        };
+        Tree.prototype.findNode = function (id) {
+            return this.nodes[this.prefix + id];
+        };
+        Tree.prototype.count = function () {
+            var iCount = 0;
+            if (this.roots.length !== 0) {
+                iCount += this.roots.length;
+                this.roots.forEach(function (node) {
+                    iCount += node.posterityCount();
+                });
+            }
+            return iCount;
+        };
+
+        Tree.prototype.insert = function (parentID, nextSiblingID) {
+            var newID = this.newNodeID(), node = null, data = {};
+            var parent = parentID === -1 ? null : this.nodes[this.prefix + parentID];
+            var nextSibling = nextSiblingID === -1 ? null: this.nodes[this.prefix + nextSiblingID];
+            if (newID !== -1) {
+                data = {};
+                data[this.setting.id] = newID;
+                data[this.setting.pid] = parentID;
+                data[this.setting.nid] = nextSiblingID;
+                node = new Node(this, data);
+                if (nextSibling) {
+                    tools.addNodes(this, parent, [node], nextSibling.siblingIndex());
+                } else {
+                    tools.addNodes(this, parent, [node]);
+                }
+                this.nodes[this.prefix + newID] = node;
+                tools.sortTreeItems(this);
+                this.maxNodeID(newID);
+            }
+            return node;
+        };
+        Tree.prototype.delete = function (node) {
+            var success = false;
+            if (node) {
+                delete this.nodes[this.prefix + node.getID()];
+                if (node.preSibling) {
+                    node.preSibling.nextSibling = node.nextSibling;
+                }
+                if (node.nextSibling) {
+                    node.nextSibling.preSibling = node.preSibling;
+                }
+                if (node.parent) {
+                    node.parent.children.splice(node.siblingIndex(), 1);
+                } else {
+                    this.roots.splice(node.siblingIndex(), 1);
+                }
+                tools.sortTreeItems(this);
+                success = true;
+            }
+            return success;
+        }
+
+        return new Tree(setting);
+    }
+};

public/web/tree_sheet_controller.js

@@ -0,0 +1,104 @@
+/**
+ * Created by Mai on 2017/4/1.
+ */
+
+var TREE_SHEET_CONTROLLER = {
+    createNew: function (tree, sheet, setting) {
+        var controller = function () {
+            this.tree = tree;
+            this.sheet = sheet;
+            this.setting = setting;
+        };
+
+        controller.prototype.showTreeData = function () {
+            var that = this;
+            TREE_SHEET_HELPER.loadSheetHeader(this.setting, this.sheet);
+            TREE_SHEET_HELPER.showTreeData(this.setting, this.sheet, this.tree);
+
+            this.sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
+                that.tree.selected = that.tree.findNode(info.sheet.getTag(info.newSelections[0].row, info.newSelections[0].col));
+            });
+        };
+
+        controller.prototype.insert = function () {
+            var newNode = null, that = this;
+            if (this.tree && this.tree.selected) {
+                newNode = this.tree.insert(this.tree.selected.getParentID(), this.tree.selected.getNextSiblingID());
+                if (newNode) {
+                    TREE_SHEET_HELPER.massOperationSheet(this.sheet, function () {
+                        var sels = that.sheet.getSelections();
+                        var iRow = sels[0].row, newNodeRow = iRow + that.tree.selected.posterityCount() + 1;
+                        that.sheet.addRows(newNodeRow, 1);
+                        TREE_SHEET_HELPER.refreshTreeNodeData(that.setting, that.sheet, [newNode], false);
+                        that.tree.selected = newNode;
+                        that.sheet.setSelection(newNode.serialNo(), sels[0].col, 1, 1);
+                        that.sheet.showRow(newNode.serialNo(), GC.Spread.Sheets.VerticalPosition.center)
+                    })
+                }
+            }
+        };
+        controller.prototype.delete = function () {
+            var that = this;
+            if (this.tree.selected) {
+                if (this.tree.delete(this.tree.selected)) {
+                    TREE_SHEET_HELPER.massOperationSheet(this.sheet, function () {
+                        var sels = that.sheet.getSelections();
+                        var iRow = sels[0].row;
+                        that.sheet.deleteRows(iRow, that.tree.selected.posterityCount() + 1);
+                        that.tree.selected = that.tree.findNode(that.sheet.getTag(iRow, 0, GC.Spread.Sheets.SheetArea.viewport));
+                    });
+                }
+            }
+        };
+        controller.prototype.upLevel = function () {
+            var that = this;
+            if (this.tree.selected) {
+                if (this.tree.selected.upLevel()) {
+                    TREE_SHEET_HELPER.massOperationSheet(this.sheet, function () {
+                        TREE_SHEET_HELPER.refreshNodesVisible([that.tree.selected], that.sheet, true);
+                        that.sheet.showRow(that.tree.selected.serialNo(), GC.Spread.Sheets.VerticalPosition.center);
+                    });
+                }
+            }
+        };
+        controller.prototype.downLevel = function () {
+            var that = this;
+            if (this.tree.selected) {
+                if (this.tree.selected.downLevel()) {
+                    TREE_SHEET_HELPER.massOperationSheet(that.sheet, function () {
+                        TREE_SHEET_HELPER.refreshNodesVisible([that.tree.selected.parent], that.sheet, true);
+                        that.sheet.showRow(that.tree.selected.serialNo(), GC.Spread.Sheets.VerticalPosition.center);
+                    });
+                }
+            }
+        };
+        controller.prototype.upMove = function () {
+            var that = this;
+            if (this.tree.selected) {
+                if (this.tree.selected.upMove()) {
+                    TREE_SHEET_HELPER.massOperationSheet(this.sheet, function () {
+                        var sels = that.sheet.getSelections();
+                        var iRow = sels[0].row;
+                        TREE_SHEET_HELPER.refreshTreeNodeData(that.setting, that.sheet, [that.tree.selected, that.tree.selected.nextSibling], true);
+                        that.sheet.setSelection(that.tree.selected.serialNo(), sels[0].col, 1, 1);
+                    });
+                }
+            }
+        };
+        controller.prototype.downMove = function () {
+            var that = this;
+            if (this.tree.selected) {
+                if (this.tree.selected.downMove()) {
+                    TREE_SHEET_HELPER.massOperationSheet(this.sheet, function () {
+                        var sels = that.sheet.getSelections();
+                        var iRow = sels[0].row;
+                        TREE_SHEET_HELPER.refreshTreeNodeData(that.setting, that.sheet, [that.tree.selected, that.tree.selected.preSibling], true);
+                        that.sheet.setSelection(that.tree.selected.serialNo(), sels[0].col, 1, 1);
+                    });
+                }
+            }
+        };
+
+        return new controller();
+    }
+};

public/web/tree_sheet_helper.js

@@ -0,0 +1,234 @@
+/**
+ * Created by Mai on 2017/4/1.
+ */
+
+var TREE_SHEET_HELPER = {
+    getSheetCellStyle: function (setting) {
+        var style = new GC.Spread.Sheets.Style();
+        style.locked = setting.readOnly;
+        style.name = setting.id;
+        style.font = setting.data.font;
+        style.hAlign = setting.data.hAlign;
+        style.vAlign = setting.data.vAlign;
+        //style.wordWrap = setting.data.wordWrap;
+        return style;
+    },
+    loadSheetHeader: function (setting, sheet) {
+        sheet.setColumnCount(setting.cols.length);
+        sheet.setRowCount(setting.headRows, GC.Spread.Sheets.SheetArea.colHeader);
+        setting.headRowHeight.forEach(function (rowHeight, index) {
+            sheet.setRowHeight(index, rowHeight, GC.Spread.Sheets.SheetArea.colHeader);
+        });
+        setting.cols.forEach(function (col, index) {
+            var i, iRow = 0, cell;
+            for (i = 0; i < col.head.spanCols.length; i++) {
+                if (col.head.spanCols[i] !== 0) {
+                    cell = sheet.getCell(iRow, index, GC.Spread.Sheets.SheetArea.colHeader);
+                    cell.value(col.head.titleNames[i]).font(col.head.font).hAlign(col.head.hAlign[i]).vAlign(col.head.vAlign[i]);
+                }
+                if (col.head.spanCols[i] > 1 || col.head.spanRows[i] > 1) {
+                    sheet.addSpan(iRow, index, col.head.spanRows[i], col.head.spanCols[i], GC.Spread.Sheets.SheetArea.colHeader);
+                }
+                iRow += col.head.spanRows[i];
+            };
+            sheet.setColumnWidth(index, col.width);
+        });
+    },
+    protectdSheet: function (sheet) {
+        var option = {
+            allowSelectLockedCells: true,
+            allowSelectUnlockedCells: true,
+            allowResizeRows: true,
+            allowResizeColumns: true
+        };
+
+        sheet.options.protectionOptions = option;
+        sheet.options.isProtected = true;
+    },
+    massOperationSheet: function (sheet, Operation) {
+        sheet.suspendPaint();
+        sheet.suspendEvent();
+        Operation();
+        sheet.resumeEvent();
+        sheet.resumePaint();
+    },
+    refreshNodesVisible: function (nodes, sheet, recursive) {
+        nodes.forEach(function (node) {
+            var iRow;
+            iRow = node.serialNo();
+            sheet.setRowVisible(iRow, node.visible, GC.Spread.Sheets.SheetArea.viewport);
+            if (recursive) {
+                TREE_SHEET_HELPER.refreshNodesVisible(node.children, sheet, recursive);
+            }
+        })
+    },
+    refreshTreeNodeData: function (setting, sheet, nodes, recursive) {
+        nodes.forEach(function (node) {
+            setting.cols.forEach(function (colSetting, iCol) {
+                var iRow = node.serialNo();
+                var cell = sheet.getCell(iRow, iCol, GC.Spread.Sheets.SheetArea.viewport);
+                if (node.data[colSetting.data.field]) {
+                    cell.value(node.data[colSetting.data.field]);
+                } else {
+                    cell.text('');
+                }
+                sheet.setTag(iRow, iCol, node.getID());
+            });
+            if (recursive) {
+                TREE_SHEET_HELPER.refreshTreeNodeData(setting, sheet, node.children, recursive);
+            }
+        });
+    },
+    showTreeData: function (setting, sheet, tree) {
+        var indent = 20;
+        var halfBoxLength = 5;
+        var halfExpandLength = 3;
+
+        var TreeNodeCellType = function () {
+        };
+        TreeNodeCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
+        TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
+            // 画布，(x1, y1)起点(横, 竖), (x2, y2)终点(横, 竖), 颜色
+            var drawLine = function (canvas, x1, y1, x2, y2, color) {
+                ctx.save();
+                // 修正偏移量
+                ctx.translate(0.5, 0.5);
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+                ctx.lineTo(x2, y2);
+                ctx.strokeStyle = color;
+                ctx.stroke();
+                ctx.restore();
+            };
+            var drawExpandBox = function (ctx, x, y, w, h, centerX, centerY, expanded) {
+                var rect = {}, h1, h2, offset = 1;
+                rect.top = centerY - halfBoxLength;
+                rect.bottom = centerY + halfBoxLength;
+                rect.left = centerX - halfBoxLength;
+                rect.right = centerX + halfBoxLength;
+
+                if (rect.left < x + w) {
+                    rect.right = Math.min(rect.right, x + w);
+
+                    ctx.save();
+                    // 修正偏移量
+                    ctx.translate(0.5, 0.5);
+                    ctx.strokeStyle = 'black';
+                    ctx.beginPath();
+                    ctx.moveTo(rect.left, rect.top);
+                    ctx.lineTo(rect.left, rect.bottom);
+                    ctx.lineTo(rect.right, rect.bottom);
+                    ctx.lineTo(rect.right, rect.top);
+                    ctx.lineTo(rect.left, rect.top);
+                    ctx.stroke();
+                    ctx.fillStyle = 'white';
+                    ctx.fill();
+                    ctx.restore();
+
+                    // Draw Horizontal Line
+                    h1 = centerX - halfExpandLength;
+                    h2 = Math.min(centerX + halfExpandLength, x + w);
+                    if (h2 > h1) {
+                        drawLine(ctx, h1, centerY, h2, centerY, 'black');
+                    }
+                    // Draw Vertical Line
+                    if (!expanded && (centerX < x + w)) {
+                        drawLine(ctx, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, 'black');
+                    }
+                }
+            }
+            var node = tree.findNode(options.sheet.getTag(options.row, options.col, options.SheetArea));
+            var showTreeLine = true;
+
+            if (!node) { return; }
+
+            var iLevel = node.depth();
+            var centerX = Math.floor(x) + node.depth() * indent + indent / 2;
+            var x1 = centerX + indent / 2;
+            var centerY = Math.floor((y + (y + h)) / 2);
+            var y1;
+            // Draw Sibling Line
+            if (showTreeLine) {
+                // Draw Horizontal Line
+                if (centerX < x + w) {
+                    drawLine(ctx, centerX, centerY, Math.min(x1, x + w), centerY, 'gray');
+                }
+                // Draw Vertical Line
+                if (centerX < x + w) {
+                    y1 = node.isLast() ? centerY : y + h;
+                    if (node.isFirst() && !node.parent) {
+                        drawLine(ctx, centerX, centerY, centerX, y1, 'gray');
+                    } else {
+                        drawLine(ctx, centerX, y, centerX, y1, 'gray');
+                    }
+                }
+            }
+            // Draw Expand Box
+            if (node.children.length > 0) {
+                drawExpandBox(ctx, x, y, w, h, centerX, centerY, node.expanded);
+            }
+            // Draw Parent Line
+            if (showTreeLine) {
+                var parent = node.parent, parentCenterX = centerX - indent;
+                while (parent) {
+                    if (!parent.isLast()) {
+                        if (parentCenterX < x + w) {
+                            drawLine(ctx, parentCenterX, y, parentCenterX, y + h, 'gray');
+                        }
+                    }
+                    parent = parent.parent;
+                    parentCenterX -= indent;
+                }
+            };
+            // Draw Text
+            x = x + (node.depth() + 1) * indent;
+            GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments);
+        };
+        TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
+            return {
+                x: x,
+                y: y,
+                row: context.row,
+                col: context.col,
+                cellStyle: cellStyle,
+                cellRect: cellRect,
+                sheetArea: context.sheetArea
+            };
+        }
+        TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
+            var offset = -1;
+            var node = tree.findNode(hitinfo.sheet.getTag(hitinfo.row, hitinfo.col, hitinfo.sheetArea));
+            tree.selected = node;
+            if (!node || node.children.length === 0) { return; }
+            var centerX = hitinfo.cellRect.x + offset + node.depth() * indent + indent / 2;
+            var centerY = (hitinfo.cellRect.y + offset + (hitinfo.cellRect.y + offset + hitinfo.cellRect.height)) / 2;
+
+            if (hitinfo.x > centerX - halfBoxLength && hitinfo.x < centerX + halfBoxLength && hitinfo.y > centerY - halfBoxLength && hitinfo.y < centerY + halfBoxLength) {
+                node.setExpanded(!node.expanded);
+                TREE_SHEET_HELPER.massOperationSheet(hitinfo.sheet, function () {
+                    var iCount = node.posterityCount(), i, child;
+                    for (i = 0; i < iCount; i++) {
+                        child = tree.findNode(hitinfo.sheet.getTag(hitinfo.row + i + 1, hitinfo.col, hitinfo.sheetArea));
+                        hitinfo.sheet.setRowVisible(hitinfo.row + i + 1, child.visible, hitinfo.sheetArea);
+                        //hitinfo.sheet.setRowVisible(hitinfo.row + i + 1, child.vis(), hitinfo.sheetArea);
+                    }
+                    hitinfo.sheet.invalidateLayout();
+                });
+                hitinfo.sheet.repaint();
+            }
+        };
+
+        TREE_SHEET_HELPER.protectdSheet(sheet);
+        TREE_SHEET_HELPER.massOperationSheet(sheet, function () {
+            sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
+            sheet.showRowOutline(false);
+            sheet.setRowCount(tree.count() + setting.emptyRows, GC.Spread.Sheets.SheetArea.viewport);
+            setting.cols.forEach(function (colSetting, iCol) {
+                sheet.setStyle(-1, iCol, TREE_SHEET_HELPER.getSheetCellStyle(colSetting));
+            });
+            sheet.getRange(-1, setting.treeCol, -1, 1).cellType(new TreeNodeCellType());
+            TREE_SHEET_HELPER.refreshTreeNodeData(setting, sheet, tree.roots, true);
+            TREE_SHEET_HELPER.refreshNodesVisible(tree.roots, sheet, true);
+        });
+    }
+};

server.js

@@ -87,13 +87,13 @@ app.use("/rationLibEditor",rations_Router);
 //-----------------------------------------------------------------end
 //----------------
 
-//app.get("/stdBillsEditor/main", function(req, res){
-//    res.render("bills/html/main.html");
-//});
+
 app.get("/stdBillsmain", function(req, res){
     res.render("bills/html/main.html");
 });
-
+app.get("/stdBills", function(req, res){
+    res.render("bills/html/qingdan.html");
+});
 var billsRouter = require("./modules/bills/routes/billsRoutes");
 app.use("/stdBillsEditor", billsRouter);
 //-----------------
@@ -105,7 +105,6 @@ app.use(function(err, req, res, next) {
     console.error(err.stack);
     res.status(500).send('500 Error');
 });
-
 app.listen(6060);
 
 

test/demo/demo.js

@@ -11,4 +11,27 @@ test('basic arithmetic', function (t) {
     //t.equal(isNaN(10.1), true);
     t.equal(Math.round(10.4999), 10);
     t.end();
-});
+});
+
+test('', function(t){
+    var dt = new Date();
+    p_fillZero = function(val){
+        var rst = val;
+        if (val < 10) {
+            rst = '0' + val;
+        }
+        return rst;
+    };
+    console.log(dt.getFullYear() + '-' + p_fillZero(dt.getMonth()) + '-' + p_fillZero(dt.getDate()) + 'T' +
+        p_fillZero(dt.getHours()) + ':' + p_fillZero(dt.getMinutes()) + ':' + p_fillZero(dt.getSeconds()) + 'Z');
+    t.pass('just pass');
+    t.end();
+})
+
+test('default sorting...', function(t){
+    var arrSimple=new Array(1,8,7,6);
+    arrSimple.sort();
+    console.log(arrSimple);
+    t.pass('just pass');
+    t.end();
+})

test/tmp_data/bills_grid_setting.js

@@ -0,0 +1,198 @@
+/**
+ * Created by Mai on 2017/4/1.
+ */
+var BillsGridSetting = {
+    cols: [
+        {
+            head: {
+                titleNames: ['编号'],
+                spanCols: [1],
+                spanRows: [2],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'Code',
+                vAlign: 1,
+                hAlign: 0,
+                font: '9px Arial'
+            },
+            width: 150
+        },
+        {
+            head: {
+                titleNames: ['清单编号'],
+                spanCols: [1],
+                spanRows: [2],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'B_Code',
+                vAlign: 1,
+                hAlign: 0,
+                font: '9px Arial'
+            },
+            width: 100
+        },
+        {
+            head: {
+                titleNames: ['名称'],
+                spanCols: [1],
+                spanRows: [2],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'Name',
+                vAlign: 1,
+                hAlign: 0,
+                font: '9px Arial'
+            },
+            width: 150
+        },
+        {
+            head: {
+                titleNames:[ '单位'],
+                spanCols: [1],
+                spanRows: [2],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'Units',
+                vAlign: 1,
+                hAlign: 1,
+                font: '9px Arial'
+            },
+            width: 40
+        },
+        {
+            head: {
+                titleNames:[ '工程量'],
+                spanCols: [1],
+                spanRows: [2],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'Quantity',
+                vAlign: 1,
+                hAlign: 2,
+                font: '9px Arial'
+            },
+            width: 60
+        },
+        {
+            head: {
+                titleNames: ['单价'],
+                spanCols: [1],
+                spanRows: [2],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'UnitPrice',
+                vAlign: 1,
+                hAlign: 2,
+                font: '9px Arial'
+            },
+            width: 60
+        },
+        {
+            head: {
+                titleNames: ['设计数量', '数量1'],
+                spanCols: [2, 1],
+                spanRows: [1, 1],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'DesignQuantity',
+                vAlign: 1,
+                hAlign: 2,
+                font: '9px Arial'
+            },
+            width: 60
+        },
+        {
+            head: {
+                titleNames: ['', '数量2'],
+                spanCols: [0, 1],
+                spanRows: [1, 1],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'DesignQuantity2',
+                vAlign: 1,
+                hAlign: 2,
+                font: '9px Arial'
+            },
+            width: 60
+        },
+        {
+            head: {
+                titleNames: ['ID', ''],
+                spanCols: [1, 0],
+                spanRows: [2, 0],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'ID',
+                vAlign: 1,
+                hAlign: 2,
+                font: '9px Arial'
+            },
+            width: 60
+        },
+        {
+            head: {
+                titleNames: ['ParentID', ''],
+                spanCols: [1, 0],
+                spanRows: [2, 0],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'ParentID',
+                vAlign: 1,
+                hAlign: 2,
+                font: '9px Arial'
+            },
+            width: 60
+        },
+        {
+            head: {
+                titleNames: ['NextSiblingID', ''],
+                spanCols: [1, 0],
+                spanRows: [2, 0],
+                vAlign: [1, 1],
+                hAlign: [1, 1],
+                font: '9px Arial'
+            },
+            data: {
+                field: 'NextSiblingID',
+                vAlign: 1,
+                hAlign: 2,
+                font: '9px Arial'
+            },
+            width: 60
+        }
+    ],
+    headRows: 2,
+    headRowHeight: [20, 20, 20],
+    emptyRows: 3,
+    treeCol: 0
+};

test/unit/excel_export/privateFunctionTest.js

@@ -0,0 +1,52 @@
+/**
+ * Created by Tony on 2017/4/5.
+ */
+
+var test = require('tape');
+var headerStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+test('test private 1', function(t){
+    private_getCellIdxStr = function(idx, pre){
+        var rst = 'A', prefix = '', tmpIdx = idx;
+        if (tmpIdx >= 26) {
+            var ti = Math.floor(tmpIdx / 26), tj = tmpIdx % 26;
+            if (ti <= 26) {
+                rst = pre + headerStr[ti - 1] + headerStr[tj];
+            } else {
+                //rst = private_getCellIdxStr2(ti, 'A' + pre) + headerStr[tj];
+                rst = private_getCellIdxStr2(ti, 'A' + pre) + headerStr[tj];
+            }
+        } else {
+            rst = pre + headerStr[tmpIdx % 26];
+        }
+        return rst;
+    };
+    private_getCellIdxStr2 = function(idx){
+        var rst = 'A';
+        if (idx < 26) {
+            rst = headerStr[idx];
+        } else if (idx < 26*26+26) {
+            var ti = Math.floor(idx / 26), tj = idx % 26;
+            rst = headerStr[ti - 1] + headerStr[tj];
+        } else if (idx < 26*26*26+26) {
+            var ti = Math.floor(idx / (26*26)), tj = Math.floor((idx - ti * 26*26) / 26), tk = idx % 26;
+            rst = headerStr[ti - 1] + headerStr[tj-1] + headerStr[tk];
+        }
+        return rst;
+    };
+    t.equal(private_getCellIdxStr2(0, ''), 'A');
+    t.equal(private_getCellIdxStr2(25, ''), 'Z');
+    t.equal(private_getCellIdxStr2(26, ''), 'AA');
+    t.equal(private_getCellIdxStr2(27, ''), 'AB');
+    t.equal(private_getCellIdxStr2(51, ''), 'AZ');
+    t.equal(private_getCellIdxStr2(52, ''), 'BA');
+    t.equal(private_getCellIdxStr2(77, ''), 'BZ');
+    t.equal(private_getCellIdxStr2(103, ''), 'CZ');
+    t.equal(private_getCellIdxStr2(675, ''), 'YZ');
+    t.equal(private_getCellIdxStr2(676, ''), 'ZA');
+    t.equal(private_getCellIdxStr2(701, ''), 'ZZ');
+    t.equal(private_getCellIdxStr2(702, ''), 'AAA');
+    t.equal(private_getCellIdxStr2(727, ''), 'AAZ');
+    t.equal(private_getCellIdxStr2(728, ''), 'ABA');
+    t.end();
+})

test/unit/excel_export/testZip.js

@@ -0,0 +1,65 @@
+/**
+ * Created by Tony on 2017/3/31.
+ */
+var test = require('tape');
+var JSZip = require("jszip");
+
+var fs = require('fs');
+
+test('test zip excel files: ', function (t) {
+    //rptUtil.setReportDefaultCache();
+    var file = '[Content_Types].xml';
+    var data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/[Content_Types].xml', 'utf8', 'r');
+    var zip = new JSZip();
+    zip.file(file, data, {compression: 'DEFLATE'});
+
+    var zip_rels = zip.folder('_rels');
+    file = '.rels';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/_rels/.rels', 'utf8', 'r');
+    zip_rels.file(file, data, {compression: 'DEFLATE'});
+
+    var zip_docProps = zip.folder('docProps');
+    file = 'app.xml';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/docProps/app.xml', 'utf8', 'r');
+    zip_docProps.file(file, data, {compression: 'DEFLATE'});
+    file = 'core.xml';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/docProps/core.xml', 'utf8', 'r');
+    zip_docProps.file(file, data, {compression: 'DEFLATE'});
+
+    var zip_xl = zip.folder('xl');
+    file = 'sharedStrings.xml';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/xl/sharedStrings.xml', 'utf8', 'r');
+    zip_xl.file(file, data, {compression: 'DEFLATE'});
+    file = 'styles.xml';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/xl/styles.xml', 'utf8', 'r');
+    zip_xl.file(file, data, {compression: 'DEFLATE'});
+    file = 'workbook.xml';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/xl/workbook.xml', 'utf8', 'r');
+    zip_xl.file(file, data, {compression: 'DEFLATE'});
+
+    var zip_rels2 = zip_xl.folder('_rels');
+    file = 'workbook.xml.rels';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/xl/_rels/workbook.xml.rels', 'utf8', 'r');
+    zip_rels2.file(file, data, {compression: 'DEFLATE'});
+    var zip_theme = zip_xl.folder('theme');
+    file = 'theme1.xml';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/xl/theme/theme1.xml', 'utf8', 'r');
+    zip_theme.file(file, data, {compression: 'DEFLATE'});
+
+    var zip_worksheets = zip_xl.folder('worksheets');
+    file = 'sheet1.xml';
+    data = fs.readFileSync('../../../tmp/excel_test_raw_data/08-2/xl/worksheets/sheet1.xml', 'utf8', 'r');
+    zip_worksheets.file(file, data, {compression: 'DEFLATE'});
+    //sheet1.xml
+
+    zip.generateNodeStream({type:'nodebuffer',streamFiles:true})
+        .pipe(fs.createWriteStream('../../../tmp/outExcel.xlsx'))
+        .on('finish', function () {
+            // JSZip generates a readable stream with a "end" event,
+            // but is piped here in a writable stream which emits a "finish" event.
+            console.log("outExcel.xlsx was written.");
+            t.pass('just pass for excel(xlsx) output!');
+            t.end();
+        }
+    );
+});

test/unit/stdBillsTree/testMyTree.js

@@ -0,0 +1,114 @@
+/**
+ * Created by vian on 2017/3/31.
+ */
+var test = require("tape");
+test("testMyBillsTree:", function(t){
+    var billsData = [
+        {ID: 2, ParentID: -1, NextSiblingID: 3},
+        {ID: 1, ParentID: -1, NextSiblingID: 2},
+        {ID: 3, ParentID: -1, NextSiblingID: 9},
+        {ID: 4, ParentID: 3, NextSiblingID: 5},
+        {ID: 5, ParentID: 3, NextSiblingID: -1},
+        {ID: 6, ParentID: 4, NextSiblingID: 7},
+        {ID: 7, ParentID: 4, NextSiblingID: -1},
+        {ID: 8, ParentID: 6, NextSiblingID: -1},
+        {ID: 10, ParentID: -1, NextSiblingID: -1},
+        {ID: 9, ParentID: -1, NextSiblingID: 10},
+        {ID: 11, ParentID: 10, NextSiblingID: -1},
+        {ID: 12, ParentID: 11, NextSiblingID: -1},
+        {ID: 13, ParentID: 12, NextSiblingID: -1},
+        {ID: 14, ParentID: 13, NextSiblingID: -1},
+        {ID: 15, ParentID: 14, NextSiblingID: 16},
+        {ID: 16, ParentID: 14, NextSiblingID: 17},
+        {ID: 17, ParentID: 14, NextSiblingID: -1},
+        {ID: 18, ParentID: 17, NextSiblingID: 19},
+        {ID: 19, ParentID: 17, NextSiblingID: -1},
+        {ID: 20, ParentID: 1, NextSiblingID: -1},
+    ]
+
+    function getTop(data, topId){
+        var top = [];
+        for(var i=0; i<data.length; i++){
+            if(data[i].ParentID == -1 ||data[i].ParentID == topId){
+                top.push(data[i]);
+            }
+        }
+        return top;
+    }
+    function sortNodes(nodes){
+        for(var i=0; i<nodes.length; i++){
+            for(var j=i+1; j<nodes.length; j++){
+                var temp;
+                if(nodes[i].NextSiblingID == nodes[j].ID){
+                    temp = nodes[i+1];
+                    nodes[i+1] = nodes[j];
+                    nodes[j] = temp;
+                }
+            }
+            if(nodes[i].NextSiblingID == nodes[0].ID){
+                var topNode = nodes[i];
+                for(var j=nodes.length-2; j>=0; j-- ){
+                    nodes[j+1] = nodes[j];
+                }
+                nodes[0] = topNode;
+            }
+        }
+        return nodes;
+    }
+
+    function getNodeChildren(node, children){
+        for(var i=0; i<billsData.length; i++){
+            if(billsData[i].ParentID == node.ID){
+                children.push(billsData[i].ID);
+                getNodeChildren(billsData[i], children);
+            }
+        }
+        return children;
+    }
+
+    function buildChildren(billsData){
+        var tempTree = [];
+        for(var i=0; i<billsData.length; i++){
+            var children = [];
+            getNodeChildren(billsData[i], children);
+            tempTree.push({"ID": billsData[i].ID, "ParentID": billsData[i].ParentID, "NextSiblingID": billsData[i].NextSiblingID, "children": children});
+        }
+        return tempTree;
+    }
+
+    function getNodes(data ,ids){
+        var idsNodes = [];
+        for(var i =0; i<ids.length; i++){
+            for(var j=0 ; j<data.length; j++){
+                if(ids[i] == data[j].ID){
+                    idsNodes.push({ID: data[j].ID, ParentID: data[j].ParentID, NextSiblingID: data[j].NextSiblingID, children: data[j].children});
+                }
+            }
+        }
+        return idsNodes;
+    }
+
+    function buildTree(treeContainer, billsData, tempTree, topId){
+        var sortTempTree = sortNodes(getTop(tempTree, topId));
+        for(var i=0; i<sortTempTree.length; i++){
+           if(sortTempTree[i].children.length > 0){
+               treeContainer.push({"ID": sortTempTree[i].ID, "ParentID": sortTempTree[i].ParentID, "NextSiblingID": sortTempTree[i].NextSiblingID, "children": sortTempTree[i].children});
+               var childrenTree = getNodes(buildChildren(billsData), sortTempTree[i].children);
+               buildTree(treeContainer, billsData, childrenTree, sortTempTree[i].ID);
+           }
+           else {
+               treeContainer.push({"ID": sortTempTree[i].ID, "ParentID": sortTempTree[i].ParentID, "NextSiblingID": sortTempTree[i].NextSiblingID, "children": sortTempTree[i].children});
+           }
+       }
+        return treeContainer;
+    }
+
+    //console.log("sortNodes:====================");
+    //console.log(sortNodes(getTop(buildChildren(billsData))));
+   // console.log("buildChildren:====================");
+   // console.log(buildChildren(billsData));
+    console.log("buildTree:====================");
+    var billsTree = [];
+    console.log(buildTree(billsTree, billsData, buildChildren(billsData), -1));
+    t.end();
+});

tmp/excel_test_raw_data/08-2/[Content_Types].xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
+	<Override PartName="/xl/theme/theme1.xml" ContentType="application/vnd.openxmlformats-officedocument.theme+xml"/>
+	<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>
+	<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>
+	<Default Extension="xml" ContentType="application/xml"/>
+	<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>
+	<Override PartName="/docProps/app.xml" ContentType="application/vnd.openxmlformats-officedocument.extended-properties+xml"/>
+	<Override PartName="/xl/worksheets/sheet2.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>
+	<Override PartName="/xl/worksheets/sheet3.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>
+	<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>
+	<Override PartName="/xl/sharedStrings.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml"/>
+	<Override PartName="/docProps/core.xml" ContentType="application/vnd.openxmlformats-package.core-properties+xml"/>
+</Types>

tmp/excel_test_raw_data/08-2/_rels/.rels

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+	<Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties" Target="docProps/app.xml"/>
+	<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/>
+	<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>
+</Relationships>

tmp/excel_test_raw_data/08-2/docProps/app.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes">
+	<Application>Microsoft Excel</Application>
+	<DocSecurity>0</DocSecurity>
+	<ScaleCrop>false</ScaleCrop>
+	<HeadingPairs>
+		<vt:vector size="2" baseType="variant">
+			<vt:variant>
+				<vt:lpstr>工作表</vt:lpstr>
+			</vt:variant>
+			<vt:variant>
+				<vt:i4>1</vt:i4>
+			</vt:variant>
+		</vt:vector>
+	</HeadingPairs>
+	<TitlesOfParts>
+		<vt:vector size="1" baseType="lpstr">
+			<vt:lpstr>第1页</vt:lpstr>
+		</vt:vector>
+	</TitlesOfParts>
+	<Company>OOCL</Company>
+	<LinksUpToDate>false</LinksUpToDate>
+	<SharedDoc>false</SharedDoc>
+	<HyperlinksChanged>false</HyperlinksChanged>
+	<AppVersion>12.0000</AppVersion>
+</Properties>

tmp/excel_test_raw_data/08-2/docProps/core.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dcmitype="http://purl.org/dc/dcmitype/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+	<dc:creator>Tony</dc:creator>
+	<cp:lastModifiedBy>Tony</cp:lastModifiedBy>
+	<dcterms:created xsi:type="dcterms:W3CDTF">2011-05-14T09:11:44Z</dcterms:created>
+	<dcterms:modified xsi:type="dcterms:W3CDTF">2017-03-31T02:23:46Z</dcterms:modified>
+</cp:coreProperties>

tmp/excel_test_raw_data/08-2/xl/_rels/workbook.xml.rels

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+    <Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml" />
+    <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme" Target="theme/theme1.xml" />
+    <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml" />
+    <Relationship Id="rId4" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings" Target="sharedStrings.xml" />
+</Relationships>

tmp/excel_test_raw_data/08-2/xl/styles.xml

@@ -0,0 +1,207 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">
+	<fonts count="6">
+		<font>
+			<sz val="11"/>
+			<color theme="1"/>
+			<name val="宋体"/>
+			<charset val="134"/>
+			<scheme val="minor"/>
+		</font>
+		<font>
+			<sz val="9"/>
+			<name val="宋体"/>
+			<charset val="134"/>
+		</font>
+		<font>
+			<b/>
+			<sz val="20"/>
+			<color indexed="8"/>
+			<name val="smartSimSun"/>
+			<charset val="134"/>
+		</font>
+		<font>
+			<sz val="9"/>
+			<color indexed="8"/>
+			<name val="smartSimSun"/>
+			<charset val="134"/>
+		</font>
+		<font>
+			<sz val="9"/>
+			<color indexed="8"/>
+			<name val="宋体"/>
+			<charset val="134"/>
+		</font>
+		<font>
+			<sz val="12"/>
+			<color indexed="8"/>
+			<name val="宋体"/>
+			<charset val="134"/>
+		</font>
+	</fonts>
+	<fills count="2">
+		<fill>
+			<patternFill patternType="none"/>
+		</fill>
+		<fill>
+			<patternFill patternType="gray125"/>
+		</fill>
+	</fills>
+	<borders count="6">
+		<border>
+			<left/>
+			<right/>
+			<top/>
+			<bottom/>
+			<diagonal/>
+		</border>
+		<border>
+			<left/>
+			<right style="thin">
+				<color indexed="8"/>
+			</right>
+			<top style="thin">
+				<color indexed="8"/>
+			</top>
+			<bottom style="thin">
+				<color indexed="8"/>
+			</bottom>
+			<diagonal/>
+		</border>
+		<border>
+			<left style="thin">
+				<color indexed="8"/>
+			</left>
+			<right style="thin">
+				<color indexed="8"/>
+			</right>
+			<top style="thin">
+				<color indexed="8"/>
+			</top>
+			<bottom style="thin">
+				<color indexed="8"/>
+			</bottom>
+			<diagonal/>
+		</border>
+		<border>
+			<left style="thin">
+				<color indexed="8"/>
+			</left>
+			<right/>
+			<top style="thin">
+				<color indexed="8"/>
+			</top>
+			<bottom style="thin">
+				<color indexed="8"/>
+			</bottom>
+			<diagonal/>
+		</border>
+		<border>
+			<left style="thin">
+				<color indexed="8"/>
+			</left>
+			<right/>
+			<top style="thin">
+				<color indexed="8"/>
+			</top>
+			<bottom/>
+			<diagonal/>
+		</border>
+		<border>
+			<left style="thin">
+				<color indexed="8"/>
+			</left>
+			<right/>
+			<top/>
+			<bottom/>
+			<diagonal/>
+		</border>
+	</borders>
+	<cellStyleXfs count="1">
+		<xf numFmtId="0" fontId="0" fillId="0" borderId="0">
+			<alignment vertical="center"/>
+		</xf>
+	</cellStyleXfs>
+	<cellXfs count="19">
+		<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0">
+			<alignment vertical="center"/>
+		</xf>
+		<xf numFmtId="0" fontId="2" fillId="0" borderId="0" xfId="0" applyFont="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="0" xfId="0" applyFont="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="left" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="1" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" wrapText="1" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="2" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="2" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="left" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="2" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="2" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="right" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="3" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="4" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="5" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="1" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="3" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="right" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="4" fillId="0" borderId="0" xfId="0" applyFont="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="left" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="1" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="5" fillId="0" borderId="2" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="5" fillId="0" borderId="3" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="center" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="2" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="right" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+		<xf numFmtId="0" fontId="3" fillId="0" borderId="3" xfId="0" applyFont="1" applyBorder="1" applyAlignment="1" applyProtection="1">
+			<alignment horizontal="right" vertical="center" shrinkToFit="1"/>
+			<protection locked="0"/>
+		</xf>
+	</cellXfs>
+	<cellStyles count="1">
+		<cellStyle name="常规" xfId="0" builtinId="0"/>
+	</cellStyles>
+	<dxfs count="0"/>
+	<tableStyles count="0" defaultTableStyle="TableStyleMedium9" defaultPivotStyle="PivotStyleLight16"/>
+</styleSheet>

tmp/excel_test_raw_data/08-2/xl/theme/theme1.xml

@@ -0,0 +1,281 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Office 主题">
+    <a:themeElements>
+        <a:clrScheme name="Office">
+            <a:dk1>
+                <a:sysClr val="windowText" lastClr="000000" />
+            </a:dk1>
+            <a:lt1>
+                <a:sysClr val="window" lastClr="FFFFFF" />
+            </a:lt1>
+            <a:dk2>
+                <a:srgbClr val="1F497D" />
+            </a:dk2>
+            <a:lt2>
+                <a:srgbClr val="EEECE1" />
+            </a:lt2>
+            <a:accent1>
+                <a:srgbClr val="4F81BD" />
+            </a:accent1>
+            <a:accent2>
+                <a:srgbClr val="C0504D" />
+            </a:accent2>
+            <a:accent3>
+                <a:srgbClr val="9BBB59" />
+            </a:accent3>
+            <a:accent4>
+                <a:srgbClr val="8064A2" />
+            </a:accent4>
+            <a:accent5>
+                <a:srgbClr val="4BACC6" />
+            </a:accent5>
+            <a:accent6>
+                <a:srgbClr val="F79646" />
+            </a:accent6>
+            <a:hlink>
+                <a:srgbClr val="0000FF" />
+            </a:hlink>
+            <a:folHlink>
+                <a:srgbClr val="800080" />
+            </a:folHlink>
+        </a:clrScheme>
+        <a:fontScheme name="Office">
+            <a:majorFont>
+                <a:latin typeface="Cambria" />
+                <a:ea typeface="" />
+                <a:cs typeface="" />
+                <a:font script="Jpan" typeface="ＭＳ Ｐゴシック" />
+                <a:font script="Hang" typeface="맑은 고딕" />
+                <a:font script="Hans" typeface="宋体" />
+                <a:font script="Hant" typeface="新細明體" />
+                <a:font script="Arab" typeface="Times New Roman" />
+                <a:font script="Hebr" typeface="Times New Roman" />
+                <a:font script="Thai" typeface="Tahoma" />
+                <a:font script="Ethi" typeface="Nyala" />
+                <a:font script="Beng" typeface="Vrinda" />
+                <a:font script="Gujr" typeface="Shruti" />
+                <a:font script="Khmr" typeface="MoolBoran" />
+                <a:font script="Knda" typeface="Tunga" />
+                <a:font script="Guru" typeface="Raavi" />
+                <a:font script="Cans" typeface="Euphemia" />
+                <a:font script="Cher" typeface="Plantagenet Cherokee" />
+                <a:font script="Yiii" typeface="Microsoft Yi Baiti" />
+                <a:font script="Tibt" typeface="Microsoft Himalaya" />
+                <a:font script="Thaa" typeface="MV Boli" />
+                <a:font script="Deva" typeface="Mangal" />
+                <a:font script="Telu" typeface="Gautami" />
+                <a:font script="Taml" typeface="Latha" />
+                <a:font script="Syrc" typeface="Estrangelo Edessa" />
+                <a:font script="Orya" typeface="Kalinga" />
+                <a:font script="Mlym" typeface="Kartika" />
+                <a:font script="Laoo" typeface="DokChampa" />
+                <a:font script="Sinh" typeface="Iskoola Pota" />
+                <a:font script="Mong" typeface="Mongolian Baiti" />
+                <a:font script="Viet" typeface="Times New Roman" />
+                <a:font script="Uigh" typeface="Microsoft Uighur" />
+            </a:majorFont>
+            <a:minorFont>
+                <a:latin typeface="Calibri" />
+                <a:ea typeface="" />
+                <a:cs typeface="" />
+                <a:font script="Jpan" typeface="ＭＳ Ｐゴシック" />
+                <a:font script="Hang" typeface="맑은 고딕" />
+                <a:font script="Hans" typeface="宋体" />
+                <a:font script="Hant" typeface="新細明體" />
+                <a:font script="Arab" typeface="Arial" />
+                <a:font script="Hebr" typeface="Arial" />
+                <a:font script="Thai" typeface="Tahoma" />
+                <a:font script="Ethi" typeface="Nyala" />
+                <a:font script="Beng" typeface="Vrinda" />
+                <a:font script="Gujr" typeface="Shruti" />
+                <a:font script="Khmr" typeface="DaunPenh" />
+                <a:font script="Knda" typeface="Tunga" />
+                <a:font script="Guru" typeface="Raavi" />
+                <a:font script="Cans" typeface="Euphemia" />
+                <a:font script="Cher" typeface="Plantagenet Cherokee" />
+                <a:font script="Yiii" typeface="Microsoft Yi Baiti" />
+                <a:font script="Tibt" typeface="Microsoft Himalaya" />
+                <a:font script="Thaa" typeface="MV Boli" />
+                <a:font script="Deva" typeface="Mangal" />
+                <a:font script="Telu" typeface="Gautami" />
+                <a:font script="Taml" typeface="Latha" />
+                <a:font script="Syrc" typeface="Estrangelo Edessa" />
+                <a:font script="Orya" typeface="Kalinga" />
+                <a:font script="Mlym" typeface="Kartika" />
+                <a:font script="Laoo" typeface="DokChampa" />
+                <a:font script="Sinh" typeface="Iskoola Pota" />
+                <a:font script="Mong" typeface="Mongolian Baiti" />
+                <a:font script="Viet" typeface="Arial" />
+                <a:font script="Uigh" typeface="Microsoft Uighur" />
+            </a:minorFont>
+        </a:fontScheme>
+        <a:fmtScheme name="Office">
+            <a:fillStyleLst>
+                <a:solidFill>
+                    <a:schemeClr val="phClr" />
+                </a:solidFill>
+                <a:gradFill rotWithShape="1">
+                    <a:gsLst>
+                        <a:gs pos="0">
+                            <a:schemeClr val="phClr">
+                                <a:tint val="50000" />
+                                <a:satMod val="300000" />
+                            </a:schemeClr>
+                        </a:gs>
+                        <a:gs pos="35000">
+                            <a:schemeClr val="phClr">
+                                <a:tint val="37000" />
+                                <a:satMod val="300000" />
+                            </a:schemeClr>
+                        </a:gs>
+                        <a:gs pos="100000">
+                            <a:schemeClr val="phClr">
+                                <a:tint val="15000" />
+                                <a:satMod val="350000" />
+                            </a:schemeClr>
+                        </a:gs>
+                    </a:gsLst>
+                    <a:lin ang="16200000" scaled="1" />
+                </a:gradFill>
+                <a:gradFill rotWithShape="1">
+                    <a:gsLst>
+                        <a:gs pos="0">
+                            <a:schemeClr val="phClr">
+                                <a:shade val="51000" />
+                                <a:satMod val="130000" />
+                            </a:schemeClr>
+                        </a:gs>
+                        <a:gs pos="80000">
+                            <a:schemeClr val="phClr">
+                                <a:shade val="93000" />
+                                <a:satMod val="130000" />
+                            </a:schemeClr>
+                        </a:gs>
+                        <a:gs pos="100000">
+                            <a:schemeClr val="phClr">
+                                <a:shade val="94000" />
+                                <a:satMod val="135000" />
+                            </a:schemeClr>
+                        </a:gs>
+                    </a:gsLst>
+                    <a:lin ang="16200000" scaled="0" />
+                </a:gradFill>
+            </a:fillStyleLst>
+            <a:lnStyleLst>
+                <a:ln w="9525" cap="flat" cmpd="sng" algn="ctr">
+                    <a:solidFill>
+                        <a:schemeClr val="phClr">
+                            <a:shade val="95000" />
+                            <a:satMod val="105000" />
+                        </a:schemeClr>
+                    </a:solidFill>
+                    <a:prstDash val="solid" />
+                </a:ln>
+                <a:ln w="25400" cap="flat" cmpd="sng" algn="ctr">
+                    <a:solidFill>
+                        <a:schemeClr val="phClr" />
+                    </a:solidFill>
+                    <a:prstDash val="solid" />
+                </a:ln>
+                <a:ln w="38100" cap="flat" cmpd="sng" algn="ctr">
+                    <a:solidFill>
+                        <a:schemeClr val="phClr" />
+                    </a:solidFill>
+                    <a:prstDash val="solid" />
+                </a:ln>
+            </a:lnStyleLst>
+            <a:effectStyleLst>
+                <a:effectStyle>
+                    <a:effectLst>
+                        <a:outerShdw blurRad="40000" dist="20000" dir="5400000" rotWithShape="0">
+                            <a:srgbClr val="000000">
+                                <a:alpha val="38000" />
+                            </a:srgbClr>
+                        </a:outerShdw>
+                    </a:effectLst>
+                </a:effectStyle>
+                <a:effectStyle>
+                    <a:effectLst>
+                        <a:outerShdw blurRad="40000" dist="23000" dir="5400000" rotWithShape="0">
+                            <a:srgbClr val="000000">
+                                <a:alpha val="35000" />
+                            </a:srgbClr>
+                        </a:outerShdw>
+                    </a:effectLst>
+                </a:effectStyle>
+                <a:effectStyle>
+                    <a:effectLst>
+                        <a:outerShdw blurRad="40000" dist="23000" dir="5400000" rotWithShape="0">
+                            <a:srgbClr val="000000">
+                                <a:alpha val="35000" />
+                            </a:srgbClr>
+                        </a:outerShdw>
+                    </a:effectLst>
+                    <a:scene3d>
+                        <a:camera prst="orthographicFront">
+                            <a:rot lat="0" lon="0" rev="0" />
+                        </a:camera>
+                        <a:lightRig rig="threePt" dir="t">
+                            <a:rot lat="0" lon="0" rev="1200000" />
+                        </a:lightRig>
+                    </a:scene3d>
+                    <a:sp3d>
+                        <a:bevelT w="63500" h="25400" />
+                    </a:sp3d>
+                </a:effectStyle>
+            </a:effectStyleLst>
+            <a:bgFillStyleLst>
+                <a:solidFill>
+                    <a:schemeClr val="phClr" />
+                </a:solidFill>
+                <a:gradFill rotWithShape="1">
+                    <a:gsLst>
+                        <a:gs pos="0">
+                            <a:schemeClr val="phClr">
+                                <a:tint val="40000" />
+                                <a:satMod val="350000" />
+                            </a:schemeClr>
+                        </a:gs>
+                        <a:gs pos="40000">
+                            <a:schemeClr val="phClr">
+                                <a:tint val="45000" />
+                                <a:shade val="99000" />
+                                <a:satMod val="350000" />
+                            </a:schemeClr>
+                        </a:gs>
+                        <a:gs pos="100000">
+                            <a:schemeClr val="phClr">
+                                <a:shade val="20000" />
+                                <a:satMod val="255000" />
+                            </a:schemeClr>
+                        </a:gs>
+                    </a:gsLst>
+                    <a:path path="circle">
+                        <a:fillToRect l="50000" t="-80000" r="50000" b="180000" />
+                    </a:path>
+                </a:gradFill>
+                <a:gradFill rotWithShape="1">
+                    <a:gsLst>
+                        <a:gs pos="0">
+                            <a:schemeClr val="phClr">
+                                <a:tint val="80000" />
+                                <a:satMod val="300000" />
+                            </a:schemeClr>
+                        </a:gs>
+                        <a:gs pos="100000">
+                            <a:schemeClr val="phClr">
+                                <a:shade val="30000" />
+                                <a:satMod val="200000" />
+                            </a:schemeClr>
+                        </a:gs>
+                    </a:gsLst>
+                    <a:path path="circle">
+                        <a:fillToRect l="50000" t="50000" r="50000" b="50000" />
+                    </a:path>
+                </a:gradFill>
+            </a:bgFillStyleLst>
+        </a:fmtScheme>
+    </a:themeElements>
+    <a:objectDefaults />
+    <a:extraClrSchemeLst />
+</a:theme>

tmp/excel_test_raw_data/08-2/xl/workbook.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">
+	<fileVersion appName="xl" lastEdited="4" lowestEdited="4" rupBuild="4505"/>
+	<workbookPr defaultThemeVersion="124226"/>
+	<bookViews>
+		<workbookView xWindow="360" yWindow="345" windowWidth="14655" windowHeight="4305"/>
+	</bookViews>
+	<sheets>
+		<sheet name="第1页" sheetId="1" r:id="rId1"/>
+	</sheets>
+	<calcPr calcId="124519"/>
+</workbook>

web/bills/html/qingdan.html

@@ -6,14 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>清单规则编辑器</title>
-    <link rel="stylesheet" href="../../css/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="web/css/bootstrap/bootstrap.min.css">
     <!--<link rel="stylesheet" href="../../web/css/bootstrap/themes.css">-->
-    <link rel="stylesheet" href="../../css/main.css">
-    <link rel="stylesheet" href="../../css/font-awesome/font-awesome.min.css">
+    <link rel="stylesheet" href="web/css/main.css">
+    <link rel="stylesheet" href="web/css/font-awesome/font-awesome.min.css">
     <!--spread-->
-    <link rel="stylesheet" href="../../css/spreadjs/gc.spread.sheets.excel2013white.10.0.1.css">
+    <link rel="stylesheet" href="web/css/spreadjs/gc.spread.sheets.excel2013white.10.0.1.css">
     <!--zTree-->
-    <link rel="stylesheet" href="../../css/ztree/zTreeStyle.css" type="text/css">
+    <link rel="stylesheet" href="web/css/ztree/zTreeStyle.css" type="text/css">
 </head>
 
 <body>
@@ -207,21 +207,25 @@
         </div>
     </div>
     <!-- JS. -->
-    <script src="../../../lib/spreadjs/gc.spread.sheets.all.10.0.1.min.js"></script>
-    <script src="../../../lib/jquery/jquery.min.js"></script>
-    <script src="../../../lib/tether/tether.min.js"></script>
-    <script src="../../../lib/bootstrap/bootstrap.min.js"></script>
-    <script src="../scripts/global.js"></script>
-    <script src="../scripts/setSheets.js"></script>
+    <script src="lib/spreadjs/gc.spread.sheets.all.10.0.1.min.js"></script>
+    <script src="lib/jquery/jquery.min.js"></script>
+    <script src="lib/tether/tether.min.js"></script>
+    <script src="lib/bootstrap/bootstrap.min.js"></script>
+    <script src="web/bills/scripts/global.js"></script>
+    <script src="web/bills/scripts/setSheets.js"></script>
+    <script src="web/bills/scripts/billsAjax.js"></script>
 </body>
 <script type="text/javascript">
     autoFlashHeight();
+    var billsLibId = getQueryString("billsLibId");
     $(document).ready(function(){
+        if(billsLibId&&billsLibId.toString().length>0){
+            billsAjax.getBills(billsLibId);
+        }
         buildBills();
         buildJobs();
         buildItems();
         testSortA();
-        testSortB();
     });
     //test
     function testSortA(){
@@ -359,6 +363,13 @@
         sheet.setColumnWidth(1, 215);
     }
 
+    function getQueryString(name)
+    {
+        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if(r!=null)return  unescape(r[2]); return null;
+    }
+
 </script>
 
 </html>

web/bills/html/testCanvas.html

@@ -52,11 +52,6 @@ window.onload = function(){
     ctx.lineTo(110, 65);
     ctx.stroke();
 
-   /* $("div").attr("id", function(){
-        var a = 1, b=2;
-        return a+b;
-    });*/
-    //alert($("div").attr("id"));
 $("#di").remove();
 
 }

web/bills/scripts/billsAjax.js

@@ -17,11 +17,13 @@ var mainAjax = {
                         var createDateFmt = new Date(createDate).format("yyyy-MM-dd");
                         $("#showArea").append(
                             "<tr id='tempId'>" +
-                            "<td><a href='web/bills/html/qingdan.html'>"+billsLibName+"</a></td>" +
+                            "<td><a href='stdBills'>"+billsLibName+"</a></td>" +
                             "<td>"+createDateFmt+" </td>" +
                             "<td><a href='javascript:void(0);' data-toggle='modal' data-target='#edit' title='编辑'>" +
                             "<i class='fa fa-pencil-square-o'></i></a> <a href='javascript:void(0);' data-toggle='modal' data-target='#del' class='text-danger' title='删除'>" +
                             "<i class='fa fa-remove'></i></a></td></tr>");
+                        var newHref = "stdBills?billsLibId="+id;
+                        $("#tempId td:first a").attr("href", newHref);
                         $("#tempId").attr("id", id);
                     }
                 }
@@ -33,17 +35,19 @@ var mainAjax = {
         $.ajax({
             type: "POST",
             url: "/stdBillsEditor/createStdBillsLib",
-            data: {"data": JSON.stringify({"name": billsLibName}) },
+            data: {data: JSON.stringify({name: billsLibName}) },
             dataType: "json",
             success: function(result){
                 var id = result.data[0].billsLibId;
                 var createDate = result.data[0].createDate;
                 var createDateFmt = new Date(createDate).format("yyyy-MM-dd");
                 $("#showArea").append(
-                    "<tr id='tempId'><td><a href='web/bills/html/qingdan.html'>"+billsLibName+"</a></td><td>"+createDateFmt+" </td><td><a href='javascript:void(0);' data-toggle='modal' data-target='#edit' title='编辑'>" +
+                    "<tr id='tempId'><td><a href='stdBills'>"+billsLibName+"</a></td><td>"+createDateFmt+" </td><td><a href='javascript:void(0);' data-toggle='modal' data-target='#edit' title='编辑'>" +
                     "<i class='fa fa-pencil-square-o'></i></a> <a href='javascript:void(0);' data-toggle='modal' data-target='#del' class='text-danger' title='删除'>" +
                     "<i class='fa fa-remove'></i></a></td></tr>"
                 );
+                var newHref = "stdBills?billsLibId="+id;
+                $("#tempId td:first a").attr("href", newHref);
                 $("#tempId").attr("id", id);
             }
         });
@@ -75,3 +79,16 @@ var mainAjax = {
         });
     }
 }
+
+var billsAjax = {
+    getBills: function(billsLibId){
+        $.ajax({
+            type: "post",
+            url: "/stdBillsEditor/getBills",
+            data: {"data": JSON.stringify({"billsLibId": billsLibId})},
+            dataType: "json",
+            success: function(result){
+            }
+        });
+    }
+}

web/bills/scripts/buildTreeData.js

@@ -1,3 +1,84 @@
 /**
  * Created by vian on 2017/3/24.
  */
+var myTree = {
+    getTop: function(data, topId){
+        var top = [];
+        for(var i=0; i<data.length; i++){
+            if(data[i].ParentID == -1 ||data[i].ParentID == topId){
+                top.push(data[i]);
+            }
+        }
+        return top;
+    },
+
+    sortNodes: function(nodes){
+        for(var i=0; i<nodes.length; i++){
+            for(var j=i+1; j<nodes.length; j++){
+                var temp;
+                if(nodes[i].NextSiblingID == nodes[j].ID){
+                    temp = nodes[i+1];
+                    nodes[i+1] = nodes[j];
+                    nodes[j] = temp;
+                }
+            }
+            if(nodes[i].NextSiblingID == nodes[0].ID){
+                var topNode = nodes[i];
+                for(var j=nodes.length-2; j>=0; j-- ){
+                    nodes[j+1] = nodes[j];
+                }
+                nodes[0] = topNode;
+            }
+        }
+        return nodes;
+    },
+
+    getNodes: function(data ,ids){
+        var idsNodes = [];
+        for(var i =0; i<ids.length; i++){
+            for(var j=0 ; j<data.length; j++){
+                if(ids[i] == data[j].ID){
+                    idsNodes.push({ID: data[j].ID, ParentID: data[j].ParentID, NextSiblingID: data[j].NextSiblingID, children: data[j].children});
+                }
+            }
+        }
+        return idsNodes;
+    },
+
+    getNodeChildren: function(node, children){
+        for(var i=0; i<billsData.length; i++){
+            if(billsData[i].ParentID == node.ID){
+                children.push(billsData[i].ID);
+                myTree.getNodeChildren(billsData[i], children);
+            }
+        }
+        return children;
+    },
+
+    buildChildren: function(billsData){
+        var tempTree = [];
+        for(var i=0; i<billsData.length; i++){
+            var children = [];
+            myTree.getNodeChildren(billsData[i], children);
+            tempTree.push({"ID": billsData[i].ID, "ParentID": billsData[i].ParentID, "NextSiblingID": billsData[i].NextSiblingID, "children": children});
+        }
+        return tempTree;
+    },
+
+    buildTree: function(treeContainer, billsData, tempTree, topId){
+        var sortTempTree = myTree.sortNodes(getTop(tempTree, topId));
+        for(var i=0; i<sortTempTree.length; i++){
+            if(sortTempTree[i].children.length > 0){
+                treeContainer.push({"ID": sortTempTree[i].ID, "ParentID": sortTempTree[i].ParentID, "NextSiblingID": sortTempTree[i].NextSiblingID, "children": sortTempTree[i].children});
+                var childrenTree = myTree.getNodes(myTree.buildChildren(billsData), sortTempTree[i].children);
+                myTree.buildTree(treeContainer, billsData, childrenTree, sortTempTree[i].ID);
+            }
+            else {
+                treeContainer.push({"ID": sortTempTree[i].ID, "ParentID": sortTempTree[i].ParentID, "NextSiblingID": sortTempTree[i].NextSiblingID, "children": sortTempTree[i].children});
+            }
+        }
+        return treeContainer;
+
+    }
+
+}

web/css/main.css

@@ -86,9 +86,6 @@ body {
     overflow: auto;
     border-bottom: 1px solid #ccc;
 }
-.warp-p2 {
-    padding: 2px
-}
 .bottom-content .nav {
     background: #f7f7f9;
     padding:0 0 0 2px
@@ -210,8 +207,8 @@ body {
         transform: translateX(10px);
     }
 }
-.bottom-content .tab-content {
-    max-height: 200px;
+.bottom-content .tab-content .main-data-bottom{
+    height: 200px;
     overflow: auto;
 }
 .form-signin {

web/css/spreadjs/gc.spread.sheets.excel2013darkGray.10.0.1.css

@@ -0,0 +1,855 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: #dedede;
+}
+.gc-corner-hover {
+    background-color: #dedede;
+}
+.gc-corner-selected {
+    background-color: #dedede;
+}
+.gc-corner-normal {
+    background-color: #dedede;
+}
+.gc-corner-triangle-normal {
+    background-color: #b3b3b3;
+    background-image: -webkit-linear-gradient(top, #b3b3b3, #b3b3b3); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #b3b3b3, #b3b3b3); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #b3b3b3, #b3b3b3); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-columnHeader-normal {
+    color: black;
+    background-image: none;
+    background-color: #dedede;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: black;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #bdbdbd;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: black;
+    background-color: #dedede;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: black;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #bdbdbd;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #dedede;
+    border-top: 1px solid #999999;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #dedede;
+    border-left: 1px solid #999999;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #dedede;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #dedede;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #dedede;
+    color: #464646;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #525252;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #dedede, #dedede); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #dedede, #dedede); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #dedede, #dedede); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #dedede, #dedede); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #dedede, #dedede); /* Standard syntax; must be last */
+    background-color: #dedede;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #5e5e5e;
+}
+.gc-navMoreButton-highlight {
+    border-color: #5e5e5e;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #525252;
+}
+.gc-navButton-normal {
+    border-color: #9e9e9e;
+}
+.gc-tab-normal {
+    color: #262626;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 3px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    border-radius:3px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left: 13px;
+    margin-bottom: 5px;
+    float: left;
+}
+#gc-filterCancel {
+    margin-bottom: 5px;
+    float: left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #bababa;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #e1e1e1;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

web/css/spreadjs/gc.spread.sheets.excel2013lightGray.10.0.1.css

@@ -0,0 +1,857 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: #f1f1f1;
+}
+.gc-corner-hover {
+    background-color: #f1f1f1;
+}
+.gc-corner-selected {
+    background-color: #f1f1f1;
+}
+.gc-corner-normal {
+    background-color: #f1f1f1;
+}
+.gc-corner-triangle-normal {
+    background-color: #c6c6c6;
+    background-image: -webkit-linear-gradient(top, #c6c6c6, #c6c6c6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #c6c6c6, #c6c6c6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #c6c6c6, #c6c6c6); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-columnHeader-normal {
+    color: #262626;
+    background-image: none;
+    background-color: #f1f1f1;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-hover {
+    color: #262626;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #d4d4d4;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-rowHeader-normal {
+    color: #262626;
+    background-color: #f1f1f1;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-hover {
+    color: #262626;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #d4d4d4;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #f1f1f1;
+    border-top: 1px solid #ababab;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #f1f1f1;
+    border-left: 1px solid #ababab;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #f1f1f1;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color:#f1f1f1;
+    color: #ababab;
+}
+.gc-group-box {
+    background-color:#f1f1f1;
+    color: #606060;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #5e5e5e;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #f1f1f1, #f1f1f1); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f1f1f1, #f1f1f1); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f1f1f1, #f1f1f1); /* Standard syntax; must be last */
+    background-color: #f1f1f1;
+    border-color: #ababab;
+}
+.gc-tabStripResizeBarInner {
+    color: #5e5e5e;
+}
+.gc-navMoreButton-highlight {
+    border-color: #5e5e5e;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #005a2b;
+}
+.gc-navButton-normal {
+    border-color: #ababab;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #d9d9d9;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #e1e1e1;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

web/css/spreadjs/gc.spread.sheets.excel2013white.10.0.1.css

@@ -0,0 +1,850 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: white;
+}
+.gc-corner-hover {
+    background-color: white;
+}
+.gc-corner-selected {
+    background-color: white;
+}
+.gc-corner-normal {
+    background-color: white;
+}
+.gc-corner-triangle-normal {
+    background-color: #dfdfdf;
+    background-image: -webkit-linear-gradient(top, #dfdfdf, #dfdfdf); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #dfdfdf, #dfdfdf); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #dfdfdf, #dfdfdf); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-columnHeader-normal {
+    color: #444444;
+    background-image: none;
+    background-color: white;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-hover {
+    color: #444444;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #e1e1e1;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-rowHeader-normal {
+    color: #444444;
+    background-color: white;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-hover {
+    color: #444444;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #e1e1e1;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-horizontal-scrollbar {
+    background-color: #f6f6f6;
+    border-top-color: #ababab;
+}
+.gc-vertical-scrollbar {
+    background-color: #f6f6f6;
+    border-left-color: #ababab;
+}
+.gc-footer-corner {
+    background-color: #f6f6f6;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: white;
+    color: #ababab;
+}
+.gc-group-box {
+    background-color: white;
+    color: #666666;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #777777;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #f6f6f6, #f6f6f6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f6f6f6, #f6f6f6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f6f6f6, #f6f6f6); /* Standard syntax; must be last */
+    background-color: #f6f6f6;
+    border-color: #ababab;
+}
+.gc-tabStripResizeBarInner {
+    color: #b3b3b3;
+}
+.gc-navMoreButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navButton-normal {
+    border-color: #c6c6c6;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;
+    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #eaeaea;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#ababab;
+    background: #f0f0f0;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #f0f0f0;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

web/css/spreadjs/gc.spread.sheets.excel2016colorful.10.0.1.css

@@ -0,0 +1,857 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2016;
+}
+.gc-grayArea {
+    background-color: #e6e6e6;
+}
+.gc-corner-hover {
+    background-color: #e6e6e6;
+}
+.gc-corner-selected {
+    background-color: #e6e6e6;
+}
+.gc-corner-normal {
+    background-color: #e6e6e6;
+}
+.gc-corner-triangle-normal {
+    background-color: #b4b4b4;
+    background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #b4b4b4, #b4b4b4); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #b4b4b4, #b4b4b4); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-columnHeader-normal {
+    color: black;
+    background-image: none;
+    background-color: #e6e6e6;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: black;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #d2d2d2;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: black;
+    background-color: #e6e6e6;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: black;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #d2d2d2;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #e6e6e6;
+    border-top: 1px solid #999999;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #e6e6e6;
+    border-left: 1px solid #999999;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #e6e6e6;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #e6e6e6;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #e4e4e4;
+    color: #646464;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #777777;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #e6e6e6, #e6e6e6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #e6e6e6, #e6e6e6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #e6e6e6, #e6e6e6); /* Standard syntax; must be last */
+    background-color: #e6e6e6;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #b3b3b3;
+}
+.gc-navMoreButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navButton-normal {
+    border-color: #c6c6c6;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#ffffff;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #c6c6c6;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    border-radius:3px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #c5c5c5;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;    
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;    
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #dbdbdb;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#ababab;
+    background: #f0f0f0;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #f0f0f0;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

web/css/spreadjs/gc.spread.sheets.excel2016darkGray.10.0.1.css

@@ -0,0 +1,850 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2016;
+}
+.gc-grayArea {
+    background-color: #6a6a6a;
+}
+.gc-corner-hover {
+    background-color: #6a6a6a;
+}
+.gc-corner-selected {
+    background-color: #6a6a6a;
+}
+.gc-corner-normal {
+    background-color: #6a6a6a;
+}
+.gc-corner-triangle-normal {
+    background-color: #f0f0f0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #f0f0f0); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #f0f0f0); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #ffffff;
+    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ffffff, #ffffff); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ffffff, #ffffff); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ffffff, #ffffff); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ffffff, #ffffff); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-columnHeader-normal {
+    color: #ffffff;
+    background-image: none;
+    background-color: #6a6a6a;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: #ffffff;
+    background-image: none;
+    background-color: #0a6332;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #ffffff;
+    background-image: none;
+    background-color: #217346;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #ffffff;
+    background-image: none;
+    background-color: #262626;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: #ffffff;
+    background-color: #6a6a6a;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: #ffffff;
+    background-color: #0a6332;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #ffffff;
+    background-color: #217346;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #ffffff;
+    background-color: #262626;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    background-color: #6a6a6a;
+    border-top-color: #999999;
+}
+.gc-vertical-scrollbar {
+    background-color: #6a6a6a;
+    border-left-color: #999999;
+}
+.gc-footer-corner {
+    background-color: #6a6a6a;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #6a6a6a;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #e4e4e4;
+    color: #646464;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #f0f0f0;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #86bfa0;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #6a6a6a, #6a6a6a); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #6a6a6a, #6a6a6a); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #6a6a6a, #6a6a6a); /* Standard syntax; must be last */
+    background-color: #6a6a6a;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #f0f0f0;
+}
+.gc-navMoreButton-highlight {
+    border-color: #f0f0f0;
+}
+.gc-navMoreButton-hover {
+    border-color: #86bfa0;
+}
+.gc-navButton-hover {
+    border-color: #86bfa0;
+}
+.gc-navButton-highlight {
+    border-color: #f0f0f0;
+}
+.gc-navButton-normal {
+    border-color: #a3a3a3;
+}
+.gc-tab-normal {
+    color: #ffffff;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #ffffff;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#f0f0f0;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #acacac;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #969696;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: #f0f0f0;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: #f0f0f0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: #f0f0f0;
+    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #575757;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: #999999;
+    border-style:solid;
+    border-color: #3b3b3b;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#3b3b3b;
+    background: #999999;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#101010;
+    background: #b3b3b3;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#101010;
+    background: #b3b3b3;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#101010;
+    background: #c4c4c4;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

web/main/js/models/bills.js

@@ -0,0 +1,33 @@
+/**
+ * Created by Mai on 2017/4/1.
+ */
+
+var Bills = {
+    createNew: function (project) {
+        var billsTreeSetting = {
+            id: 'ID',
+            pid: 'ParentID',
+            nid: 'NextSiblingID',
+            rootId: -1
+        };
+
+        // 用户定义private方法
+        var tools = {};
+
+        // 所有通过this访问的属性，都不应在此单元外部进行写入操作
+        var bills = function (proj) {
+            this.project = proj;
+            this.datas = null;
+            this.tree = null;
+        };
+
+        // prototype用于定义public方法
+        bills.prototype.loadDatas = function (datas) {
+            this.datas = datas;
+            this.tree = idTree.createNew(billsTreeSetting);
+            this.tree.loadDatas(this.datas);
+        };
+
+        return new bills(project);
+    }
+};

web/main/js/models/gljs.js

@@ -0,0 +1,22 @@
+/**
+ * Created by Mai on 2017/4/1.
+ */
+var GLJs = {
+    createNew: function (project) {
+        // 用户定义private方法
+        var tools = {};
+
+        // 所有通过this访问的属性，都不应在此单元外部进行写入操作
+        var gljs = function (proj) {
+            this.project = proj;
+            this.datas = null;
+        };
+
+        // prototype用于定义public方法
+        gljs.prototype.loadDatas = function (datas) {
+            this.datas = datas;
+        };
+
+        return new gljs(project);
+    }
+};

web/main/js/models/project.js

@@ -0,0 +1,23 @@
+/**
+ * Created by Mai on 2017/4/1.
+ */
+var PROJECT = {
+    createNew: function () {
+        // 定义private方法
+        var tools = {};
+
+        // 所有通过this访问的属性，都不应在此单元外部进行写入操作
+        var project = function () {
+            this.Bills = Bills.createNew(this);
+            this.Rations = Rations.createNew(this);
+            this.GLJ = GLJs.createNew(this);
+        };
+
+        // prototype用于定义public方法
+        project.prototype.modify = function (modifyDatas, callback) {
+            // To Do
+        };
+
+        return new project();
+    }
+};

web/main/js/models/rations.js

@@ -0,0 +1,23 @@
+/**
+ * Created by Mai on 2017/4/1.
+ */
+
+var Rations = {
+    createNew: function (project) {
+        // 用户定义private方法
+        var tools = {};
+
+        // 所有通过this访问的属性，都不应在此单元外部进行写入操作
+        var rations = function (proj) {
+            this.project = proj;
+            this.datas = null;
+        };
+
+        // prototype用于定义public方法
+        rations.prototype.loadDatas = function (datas) {
+            this.datas = datas;
+        };
+
+        return new rations(project);
+    }
+};