【JavaScript】在浏览器里做出EXCEL

总结一下做法：

在浏览器里做出EXCEL的效果，复制、粘贴、设置公式、双击编辑等效果，如果自己开发的话，比较麻烦，建议使用成熟的插件。这里介绍使用智表ZCELL插件，实现用户快捷操作。

     首先下载插件，引入到页面中，一共4个文件，包括jquery 基础文件，插件和样式文件。

1 2 3 4 5 6

<script src= "http://www.jq22.com/jquery/jquery-1.10.2.js" ></script>   <script type= "text/javascript"  src= "zcell/ZCell.min.js" ></script> <script type= "text/javascript"  src= "zcell/ZCell.register.js" ></script>     <link rel= "stylesheet"  type= "text/css"  href= "zcell/ZCell.css"  />

　　

文件引入后，界面加载，准备数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//页面加载时，执行 var  zcell1;   //准备数据源 var  jsondata = [ //四行五列 [ "" ,  "" ,  "" ,  "" ,  "" ,  "" ], [ "" ,  "" ,  "" ,  "" ,  "" ,  "" ], [ "" ,  "" ,  "" ,  "" ,  "" ,  "" ], [ "■合并单元格" ,  "单位" ,  "综合取值" ,  "费用" ,  "E1" ,  "F1" ], [ "" ,  "" ,  "" ,  "机械费" ,  "材料费" ,  "人工费" ], [ "■计算公式" ,  "合计" ,  "" ,  "30" ,  "40" ,  "50" , "公式支持加减乘除和自定义函数" ], [ "" ,  "分公司1" ,  "" ,  "300" ,  "5.2375" ,  "28.2345" , "" ], [ "" ,  "分公司2" ,  "" ,  "600" ,  "13.232" ,  "58.14298" ]   ];

　　然后在页面加载时，生成表格：

 

1 2 3 4

//创建JSCELL，指明承载容器            zcell1 =  new  ZCell(document.getElementById( "cellContainer" ));            //创建表，并指定列，行数            zcell1.InserSheet(0,10,22);

　　这是，基本表已经有了，是个空表。我们可以在上面设置数据，设置数据分两种方式，一种通过数据源批量加载：

1 2	//加载数据            zcell1.GetSheet(0).LoadJsonData(jsondata);

　　还可以单独设置某个单元格值：

1 2	//设置单元格文本            zcell1.GetSheet(0).SetCellValue(1,3, "下面请体验：" );

　　插件的功能比较多，可以设置数据，公式等，支持复制、黏贴、双击编辑等效果，这里不再逐一介绍。

     感兴趣的可以自己试着做一下