spreadjs显示调整

app/public/css/spreadjs/sheets/gc.spread.sheets.excel2018smartcost.css

@@ -4,29 +4,29 @@
     z-index: 2013;
 }
 .gc-grayArea {
-    background-color: #dedede;
+    background-color: white;
 }
 .gc-corner-hover {
-    background-color: #dedede;
+    background-color: white;
 }
 .gc-corner-selected {
-    background-color: #dedede;
+    background-color: white;
 }
 .gc-corner-normal {
-    background-color: #dedede;
+    background-color: white;
 }
 .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 */
+    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: #d2d2d2 !important;
-    border-right-color: #9c9c9c !important;
-    border-top-color: #d2d2d2 !important;
-    border-bottom-color: #9c9c9c !important;
+    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;
@@ -36,156 +36,147 @@
     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;
+    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 */
+    background-color: #73a2e3;
+    background-image: -webkit-linear-gradient(top, #73a2e3, #73a2e3); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #73a2e3, #73a2e3); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #73a2e3, #73a2e3); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #73a2e3, #73a2e3); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #73a2e3, #73a2e3); /* 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;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
 }
 .gc-columnHeader-normal {
-    color: black;
+    color: #444444;
     background-image: none;
     background-color: white;
     border-style:solid;
-    border-left-color: #d2d2d2 !important;
-    border-right-color: #9c9c9c !important;
-    border-bottom-color: #999999 !important;
+    border-left-color: #dee2e6 !important;
+    border-right-color: #dee2e6 !important;
+    border-bottom-color: #dee2e6 !important;
 }
 .gc-columnHeader-hover {
-    color: black;
+    color: #444444;
     background-image: none;
-    background-color: #9fd5b7;
+    background-color: #f5f5f5;
     border-style:solid;
-    border-left-color: #d2d2d2 !important;
-    border-right-color: #9c9c9c !important;
-    border-bottom-color: #999999 !important;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #73a2e3 !important;
 }
 .gc-columnHeader-selected {
-    color: #217346;
+    color: #73a2e3;
     background-image: none;
-    background-color: #d3f0e0;
+    background-color: #f5f5f5;
     border-style:solid;
-    border-left-color: #d2d2d2 !important;
-    border-right-color: #9c9c9c !important;
-    border-bottom-color: #999999 !important;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
 }
 .gc-columnHeader-highlight {
-    color: #217346;
+    color: #73a2e3;
     background-image: none;
-    background-color: #bdbdbd;
+    background-color: #f5f5f5;
     border-style:solid;
-    border-left-color: #d2d2d2 !important;
-    border-right-color: #9c9c9c !important;
-    border-bottom-color: #999999 !important;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
 }
 .gc-rowHeader-normal {
-    color: black;
+    color: #444444;
     background-color: white;
     background-image: none;
     border-style:solid;
-    border-top-color: #d2d2d2 !important;
-    border-bottom-color: #9c9c9c !important;
-    border-right-color: #999999 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #dee2e6 !important;
 }
 .gc-rowHeader-hover {
-    color: black;
-    background-color: #9fd5b7;
+    color: #73a2e3;
+    background-color: #f5f5f5;
     background-image: none;
     border-style:solid;
-    border-top-color: #d2d2d2 !important;
-    border-bottom-color: #9c9c9c !important;
-    border-right-color: #999999 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #73a2e3 !important;
 }
 .gc-rowHeader-selected {
-    color: #217346;
-    background-color: #d3f0e0;
+    color: #73a2e3;
+    background-color: #f5f5f5;
     background-image: none;
     border-style:solid;
-    border-top-color: #d2d2d2 !important;
-    border-bottom-color: #9c9c9c !important;
-    border-right-color: #999999 !important;
+    border-top-color: #dee2e6 !important;
+    border-bottom-color: #dee2e6 !important;
+    border-right-color: #dee2e6 !important;
 }
 .gc-rowHeader-highlight {
-    color: #217346;
-    background-color: #bdbdbd;
+    color: #73a2e3;
+    background-color: #f5f5f5;
     background-image: none;
     border-style:solid;
-    border-top-color: #d2d2d2 !important;
-    border-bottom-color: #9c9c9c !important;
-    border-right-color: #999999 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
 }
 .gc-horizontal-scrollbar {
-    box-sizing:content-box;
-    background: #dedede;
-    border-top: 1px solid #999999;
-    height: 18px;
-    padding: 4px 0px 5px 0px;
-    margin: 0;
+    background-color: #efefef;
+    border-top-color: #efefef;
 }
 .gc-vertical-scrollbar {
-    box-sizing:content-box;
-    background: #dedede;
-    border-left: 1px solid #999999;
-    width: 18px;
-    padding: 0px 5px 0px 4px;
-    margin: 0;
+    background-color: #efefef;
+    border-left-color: #efefef;
 }
 .gc-footer-corner {
-    background-color: #dedede;
+    background-color: #fff;
 }
 .gc-selection {
-    background-color: rgba(20, 20, 20, 0.2);
-    border-color: #217346;
-    color: rgba(240,240,240,0.7);
+    background-color: rgba(204, 204, 204, 0.3);
+    border-color:#73a2e3
 }
 .gc-drag-indicator {
     border-color: #217346;
 }
 .gc-gridlineColor {
-    border-color: #d4d4d4;
+    border-color: #dee2e6;
 }
 .gc-group {
-    background-color: #dedede;
-    color: #999999;
+    background-color: white;
+    color: #ababab;
 }
 .gc-group-box {
-    background-color: #dedede;
-    color: #464646;
+    background-color: white;
+    color: #666666;
     border-color: #828790;
 }
 
 .gc-tabStripNewTab-highlight {
-    border-color: #525252;
+    border-color: #777777;
 }
 .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;
+    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 */
+    background-color: #ffffff;
+    border-color: #ababab;
 }
 .gc-tabStripResizeBarInner {
-    color: #5e5e5e;
+    color: #b3b3b3;
 }
 .gc-navMoreButton-highlight {
-    border-color: #5e5e5e;
+    border-color: #0a6332;
 }
 .gc-navMoreButton-hover {
     border-color: #439467;
@@ -194,17 +185,17 @@
     border-color: #439467;
 }
 .gc-navButton-highlight {
-    border-color: #525252;
+    border-color: #0a6332;
 }
 .gc-navButton-normal {
-    border-color: #9e9e9e;
+    border-color: #c6c6c6;
 }
 .gc-tab-normal {
-    color: #262626;
+    color: #444444;
     background-image: none;
     background-color: transparent;
     border-style: solid;
-    border-left-color: #999999;
+    border-left-color: #ababab;
     border-bottom-color: #217346;
 }
 .gc-tab-hover {
@@ -212,7 +203,7 @@
     background-image: none;
     background-color: transparent;
     border-style: solid;
-    border-left-color: #999999;
+    border-left-color: #ababab;
     border-bottom-color: #217346;
 }
 .gc-tab-active {
@@ -355,7 +346,7 @@ a.gc-filter-check:hover {
     border-color: #e3e3e3;
     outline: none;
     -webkit-box-shadow: none;
-            box-shadow: none;  
+            box-shadow: none;
 }
 .gc-filter-sort {
     border:1px solid transparent;
@@ -364,7 +355,7 @@ a.gc-filter-check:hover {
 }
 
 .gc-filter-hover {
-    border-radius: 3px;
+    border-radius: 0px;
     outline:none;
 }
 
@@ -401,7 +392,6 @@ a.gc-filter-check:hover {
 .gc-filter-button {
     width:90px;
     height:27px;
-    border-radius:3px;
     margin:2px 1px 5px;
 }
 
@@ -411,13 +401,13 @@ a.gc-filter-check:hover {
 }
 
 #gc-filterOK {
-    margin-left: 13px;
-    margin-bottom: 5px;
-    float: left;
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
 }
 #gc-filterCancel {
-    margin-bottom: 5px;
-    float: left;
+    margin-bottom:5px;
+    float:left;
 }
 
 .gc-filter-button-default {
@@ -450,7 +440,8 @@ a.gc-filter-check:hover {
 .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-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) */
@@ -481,7 +472,8 @@ a.gc-filter-check:hover {
 
 .gc-smartMenu-item-hover {
     border:1px solid #86bfa0;
-    background-color: #d3f0e0;    background-image: none;
+    background-color: #d3f0e0;
+    background-image: none;
     color:#1d5987;
     font-weight:normal;
     text-shadow:none;
@@ -497,7 +489,8 @@ a.gc-filter-check:hover {
 
 .gc-smart-tag-hover {
     border:1px solid #9fd5b7;
-    background-color: white;    background-image: none;
+    background-color: white;
+    background-image: none;
     color:#1d5987;
     font-weight:normal;
     text-shadow:none;
@@ -505,7 +498,8 @@ a.gc-filter-check:hover {
 
 .gc-smart-tag-active {
     border:1px solid #9fd5b7;
-    background-color:#9fd5b7;    background-image: none;
+    background-color:#9fd5b7;
+    background-image: none;
     font-weight:normal;
     color:#262626;
     -webkit-box-shadow: none;
@@ -555,7 +549,8 @@ a.gc-filter-check:hover {
 .gc-spread-toolTip {
     border: 1px solid #bebebe;
     border-radius: 0px;
-    background-color: white;    background-image: none;
+    background-color: white;
+    background-image: none;
     font-weight: normal;
     color: #217346;
 }
@@ -572,7 +567,6 @@ a.gc-filter-check:hover {
 
 /*-----formula textbox start-----*/
 /* function autocomplete */
-/* function autocomplete */
 .gcsj-func-ac-popup {
 	margin: 0;
 	padding: 0;
@@ -757,7 +751,7 @@ a.gc-filter-check:hover {
 /*-----scrollbar start-----*/
 /*scrollbar*/
 .gc-scroll-container{
-    background-color: #bababa;
+    background-color: #efefef;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
@@ -766,16 +760,16 @@ a.gc-filter-check:hover {
     border-radius: 2px;
 }
 .gc-scroll-arrow{
-    background-color: white;
+    background-color: #efefef;
     border-style:solid;
-    border-color: #ababab;
+    border-color: #efefef;
     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;
@@ -825,31 +819,33 @@ a.gc-filter-check:hover {
 
 .gc-scroll-bar {
     border-style:solid;
-    border-color:#ababab;
-    background:  white;
+    border-color:#bfbfbf;
+    background:  #bfbfbf;
     -moz-border-radius: 0px;
     -webkit-border-radius: 0px;
     border-radius: 0px;
 }
 .gc-scroll-arrow-hover {
     border-style:solid;
-    border-color:#777777;
-    background: white;
+    border-color:#a7a7a7;
+    background: #a7a7a7;
 }
 .gc-scrollbar-stateHover {
     border-style:solid;
-    border-color:#777777;
-    background: white;
+    border-color:#a7a7a7;
+    background: #a7a7a7;
 }
 
 .gc-scroll-arrow:active,
-.gc-scroll-bar:active,
 .gc-scrollbar-stateActive {
     border-style:solid;
-    border-color:#777777;
-    background: #e1e1e1;
+    border-color:#a7a7a7;
+    background: #a7a7a7;
     -webkit-box-shadow: none;
           box-shadow: none;
 }
+.gc-scroll-bar:active{
+  border-color:#777777;
+  background: #777777;
+}
 /*-----scrollbar end-----*/
-

app/public/js/lib_detail.js

@@ -24,19 +24,19 @@ $(document).ready(function() {
     billsTree.loadDatas(bills);
     SpreadJsObj.initSheet(billsSpread.getActiveSheet(), {
         cols: [
-            {title: '项目节编号', field: 'code', width: 120, cellType: 'tree'},
-            {title: '清单编号', field: 'b_code', width: 80},
-            {title: '名称', field: 'name', width: 200},
-            {title: '单位', field: 'unit', width: 50},
-            {title: '数量1', field: 'dgn_quantity1', width: 60, type: 'Number'},
-            {title: '数量2', field: 'dgn_quantity2', width: 60, type: 'Number'},
-            {title: '金额', field: 'total_price', width: 60, type: 'Number'},
+            {title: '项目节编号', field: 'code', width: 120, cellType: 'tree', vAlign: 1,},
+            {title: '清单编号', field: 'b_code', width: 80, vAlign: 1,},
+            {title: '名称', field: 'name', width: 200, vAlign: 1,},
+            {title: '单位', field: 'unit', width: 50, vAlign: 1,},
+            {title: '数量1', field: 'dgn_quantity1', width: 60, type: 'Number', vAlign: 1,},
+            {title: '数量2', field: 'dgn_quantity2', width: 60, type: 'Number', vAlign: 1,},
+            {title: '金额', field: 'total_price', width: 60, type: 'Number', vAlign: 1,},
         ],
         treeCol: 0,
         emptyRows: 3,
         headRows: 2,
-        headRowHeight: [40, 40],
-        defaultRowHeight: 21,
+        headRowHeight: [28],
+        defaultRowHeight: 30,
     });
     SpreadJsObj.loadSheetData(billsSpread.getActiveSheet(), 'tree', billsTree);
 });

app/public/js/spreadjs_rela/spreadjs_zh.js

@@ -158,6 +158,7 @@ const SpreadJsObj = {
             sheet.showRowOutline(false);
             if (sheet.zh_setting.defaultRowHeight) {
                 sheet.defaults.rowHeight = sheet.zh_setting.defaultRowHeight;
+                sheet.defaults.colHeaderRowHeight = sheet.zh_setting.defaultRowHeight;
             }
         });
     },
@@ -190,7 +191,7 @@ const SpreadJsObj = {
                 sheet.zh_setting.cols.forEach(function (col, j) {
                     const cell = sheet.getCell(i, j);
                     if (col.field !== '' && data[col.field]) {
-                        cell.value(data[col.field]).locked(col.readOnly || false);
+                        cell.value(data[col.field]).locked(col.readOnly || false).vAlign(col.vAlign);
                     } else {
                         cell.locked(col.readOnly || false);
                     }

app/view/layout/layout.ejs

@@ -12,7 +12,7 @@
     <!--zTree-->
     <link rel="stylesheet" href="/public/css/ztree/zTreeStyle.css" type="text/css">
     <!--spreadJs-->
-    <link rel="stylesheet" href="/public/css/spreadjs/sheets/gc.spread.sheets.excel2018smartcost.css">
+    <link rel="stylesheet" href="/public/css/spreadjs/sheets/gc.spread.sheets.excelsmartcost.css">
 
     <script src="/public/js/jquery/jquery-3.2.1.min.js"></script>
     <script src="/public/js/popper/popper.min.js"></script>