【图解】Web前端实现类似Excel的电子表格

<!-- SpreadJS语言设置（1）-->
    <meta name="spreadjs culture" content="zh-cn" />

    <!-- SpreadJS（2） -->
    <script src="http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/external/spreadjs/gc.spread.sheets.all.10.1.0.min.js" type="text/javascript"></script>

    <!-- SpreadJS CSS（3）-->
    <link href="http://demo.gcpowertools.com.cn/SpreadJS/TutorialSample/external/spreadjs/css/gc.spread.sheets.excel2013white.10.1.0.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
        window.onload = function() {
            // SpreadJS 初始化 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); }; </script>

<div id="ss" style="width:100%; height:100%"></div>

<script id="scriptInit" type="text/javascript">
　　

　　window.onload = function() {
　　　　// SpreadJS 初始化
　　　　var spread = new GC.Spread.Sheets.Workbook(
　　　　　　document.getElementById("ss")，{
　　　　　　　　sheetCount:3,//初始化为3个标签页
　　　　　　　　newTabVisible:false //隐藏新建标签页按钮
　　　　});
　　};

</script>

            // 获得Spread 对象
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });

            // 获得当前激活的标签页 var activeSheet = spread.getActiveSheet(); // 获得第2行2列单元格 var cell = activeSheet.getCell(1, 1); // 对这个单元格进行赋值 cell.value("SpreadJS"); //单元格设置字体大小 cell.font("15pt 宋体"); // 当前标签页自动进行行、列适应大小 activeSheet.autoFitColumn(1); activeSheet.autoFitRow(1);

          // 获得第2行2列 ~ 第4行5列，并设置背景色
          var cell = activeSheet.getRange(1, 1, 3, 4);
          cell.backColor("#00ff00");

          // 获得LineBorder属性
          var lineBorder = new GC.Spread.Sheets.LineBorder("white", GC.Spread.Sheets.LineStyle.thin);
          // 设置边框  cell.borderTop(lineBorder); cell.borderBottom(lineBorder); cell.borderLeft(lineBorder); cell.borderRight(lineBorder);

          // 列結合
            activeSheet.addSpan(0, 0, 2, 4, GC.Spread.Sheets.SheetArea.colHeader);
          // 行結合 activeSheet.addSpan(0, 0, 2, 4, GC.Spread.Sheets.SheetArea.rowHeader); // 单元格結合 activeSheet.addSpan(0, 0, 2, 4, GC.Spread.Sheets.SheetArea.viewport);

            activeSheet.getCell(0, 0).value('考试成绩');
            // 各科成绩
            activeSheet.getCell(2, 0).value('语文');
            activeSheet.getCell(2, 1).value(80); activeSheet.getCell(3, 0).value('数学'); activeSheet.getCell(3, 1).value(70); activeSheet.getCell(4, 0).value('英语'); activeSheet.getCell(4, 1).value(90); activeSheet.getCell(5, 0).value('政治'); activeSheet.getCell(5, 1).value(45); // 总分和平均分 activeSheet.getCell(6, 0).value("总分"); // 总分 activeSheet.getCell(6, 1).formula("SUM(B3:B6)"); activeSheet.getCell(7, 0).value('平均分'); //平均分 activeSheet.getCell(7, 1).formula("AVERAGE(B3:B6)");

//数据输出
        function ExportJSON()
        {
            // 获得Spread 对象 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); var jsonStr = JSON.stringify(spread.toJSON()); $("#jsonCode").html(jsonStr); } ////数据输入 function ImportJSON() { // 获得Spread 对象 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); var jsonObj = JSON.parse($("#jsonCode").html()); spread.fromJSON(jsonObj); }

//导出CSV字符串
        function ExportCSV() {
            // 获得Spread 对象 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); var csvString = spread.getActiveSheet().getCsv( 0, // 开始行 0, // 开始列 10, // 行数 5, // 列数 "\r", // 行分割字符 "," // 列分割字符  ); $("#jsonCode").html(csvString); } //导入CSV字符串 function ImportCSV() { // 获得Spread 对象 var spread = $("#wijspread1").wijspread("spread"); var csvString = $("#jsonCode").html(); spread.getActiveSheet().setCsv( 0, // 开始行 0, // 开始列 csvString, // CSV字符串 "\r", // 行分割字符 ",", // 列分割字符 0 // 导入选项  ); }