JSP页面中使用JS Grid

1、新建一个JSP页面<body争犸禀淫> <div class="sample-turtorial"> <div id="ss" style="width:100%; height:580px;border: 1px solid gray;"></div> <div class="demo-options"> <div class="option-row"> <input type="button" style="width: 100px" value="Add Sheet" id="btnAddSheet" /> <input type="button" style="width: 100px" value="Remove Sheet" id="btnRemoveSheet" /> <input type="button" style="width: 100px" value="Clear Sheets" id="btnClearSheets" /> </div> <div class="option-row"> <label>ActiveSheetIndex:</label> <input type="text" id="activeSheetIndex" value="0"/> <input type="button" id="btnSetActiveSheetIndex" value="Set" /> </div> </div> </div></body>

2、初始化SpreadJSvar spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));var spreadNS = GcSpread.Sheets;spread.setSheetCount(3);

3、添加相应的功能spread.bind(spreadNS.苇质缵爨Events.ActiveSheetChanged, function(e,args像粜杵泳) { $("#activeSheetIndex").val(spread.getActiveSheetIndex()); }); $("#btnAddSheet").click(function () { spread.addSheet(spread.getSheetCount()); }); $("#btnRemoveSheet").click(function () { var activeIndex = spread.getActiveSheetIndex(); if (activeIndex >= 0) { spread.removeSheet(activeIndex); } }); $("#btnClearSheets").click(function () { spread.clearSheets(); }); $("#btnSetActiveSheetIndex").click(function () { var index = $("#activeSheetIndex").val(); if (!isNaN(index)) { index = parseInt(index); if (0 <= index && index < spread.getSheetCount()) { spread.setActiveSheetIndex(index); } } });

4、部署到Tomcatgcspread.sheets.8.40.20151.0.cssjquery-1.8.2.min.jsgcspread.sheets.all.8.40.20151.0.min.js

5、运行效果