SpreadJS可以通过本地化的程序来设计,并且导出json数据,放到web上进行展示,展示和本地设计完全一样的效果。也可以通过一组web视图导出json,然后通过另一组视图展示json。
//导出json数据 var spread1 = $("#ss").wijspread("spread"); var jsonStr = JSON.stringify(spread1.toJSON());
//将json数据展示到web上,这个地方也可以通过本地exe程序设计导出 var spread2 = $("#ss1").wijspread("spread"); spread2.fromJSON(JSON.parse(jsonStr));
//全实例 $(document).ready(function () { $("#ss").wijspread({ sheetCount: 1 }); $("#ss1").wijspread({ sheetCount: 1 }); if ($.browser.msie && parseInt($.browser.version, 10) < 9) { //run for ie7/8 var spread = $("#ss").wijspread("spread"); spread.bind("SpreadsheetObjectLoaded", function () { initSpread(); }); } else { initSpread(); } }); function initSpread() { var spread = $("#ss").wijspread("spread"); var sheet = spread.getActiveSheet(); fillStyle(sheet); $("#fromtoJsonBtn").click(function () { //ToJson var spread1 = $("#ss").wijspread("spread"); var jsonStr = JSON.stringify(spread1.toJSON()); //FromJson var spread2 = $("#ss1").wijspread("spread"); spread2.fromJSON(JSON.parse(jsonStr)); }); } function fillStyle(sheet) { sheet.parent.useWijmoTheme = true; sheet.isPaintSuspended(true); sheet.setFrozenRowCount(4); sheet.setFrozenColumnCount(4); sheet.addSpan(1, 1, 1, 3); sheet.setValue(1, 1, "Store"); sheet.addSpan(1, 4, 1, 7); sheet.setValue(1, 4, "Goods"); sheet.addSpan(2, 1, 1, 2); sheet.setValue(2, 1, "Area"); sheet.addSpan(2, 3, 2, 1); sheet.setValue(2, 3, "ID"); sheet.addSpan(2, 4, 1, 2); sheet.setValue(2, 4, "Fruits"); sheet.addSpan(2, 6, 1, 2); sheet.setValue(2, 6, "Vegetables"); sheet.addSpan(2, 8, 1, 2); sheet.setValue(2, 8, "Foods"); sheet.addSpan(2, 10, 2, 1); sheet.setValue(2, 10, "Total"); sheet.setValue(3, 1, "State"); sheet.setValue(3, 2, "City"); sheet.setValue(3, 4, "Grape"); sheet.setValue(3, 5, "Apple"); sheet.setValue(3, 6, "Potato"); sheet.setValue(3, 7, "Tomato"); sheet.setValue(3, 8, "SandWich"); sheet.setValue(3, 9, "Hamburger"); sheet.addSpan(4, 1, 7, 1); sheet.addSpan(4, 2, 3, 1); sheet.addSpan(7, 2, 3, 1); sheet.addSpan(10, 2, 1, 2); sheet.setValue(10, 2, "Sub Total:"); sheet.addSpan(11, 1, 7, 1); sheet.addSpan(11, 2, 3, 1); sheet.addSpan(14, 2, 3, 1); sheet.addSpan(17, 2, 1, 2); sheet.setValue(17, 2, "Sub Total:"); sheet.addSpan(18, 1, 1, 3); sheet.setValue(18, 1, "Total:"); sheet.setValue(4, 1, "NC"); sheet.setValue(4, 2, "Raleigh"); sheet.setValue(7, 2, "Charlotte"); sheet.setValue(4, 3, "001"); sheet.setValue(5, 3, "002"); sheet.setValue(6, 3, "003"); sheet.setValue(7, 3, "004"); sheet.setValue(8, 3, "005"); sheet.setValue(9, 3, "006"); sheet.setValue(11, 1, "PA"); sheet.setValue(11, 2, "Philadelphia"); sheet.setValue(14, 2, "Pittsburgh"); sheet.setValue(11, 3, "007"); sheet.setValue(12, 3, "008"); sheet.setValue(13, 3, "009"); sheet.setValue(14, 3, "010"); sheet.setValue(15, 3, "011"); sheet.setValue(16, 3, "012"); sheet.setFormula(10, 4, "=SUM(E5:E10)"); sheet.setFormula(10, 5, "=SUM(F5:F10)"); sheet.setFormula(10, 6, "=SUM(G5:G10)"); sheet.setFormula(10, 7, "=SUM(H5:H10)"); sheet.setFormula(10, 8, "=SUM(I5:I10)"); sheet.setFormula(10, 9, "=SUM(J5:J10)"); sheet.setFormula(17, 4, "=SUM(E12:E17)"); sheet.setFormula(17, 5, "=SUM(F12:F17)"); sheet.setFormula(17, 6, "=SUM(G12:G17)"); sheet.setFormula(17, 7, "=SUM(H12:H17)"); sheet.setFormula(17, 8, "=SUM(I12:I17)"); sheet.setFormula(17, 9, "=SUM(J12:J17)"); for (var i = 0; i < 14; i++) { sheet.setFormula(4 + i, 10, "=SUM(E" + (5 + i).toString() + ":J" + (5 + i).toString() + ")"); } sheet.setFormula(18, 4, "=E11+E18"); sheet.setFormula(18, 5, "=F11+F18"); sheet.setFormula(18, 6, "=G11+G18"); sheet.setFormula(18, 7, "=H11+H18"); sheet.setFormula(18, 8, "=I11+I18"); sheet.setFormula(18, 9, "=J11+J18"); sheet.setFormula(18, 10, "=K11+K18"); sheet.getCells(1, 1, 3, 10).backColor("#CCCCFF"); sheet.getCells(4, 1, 18, 3).backColor("#CCFFCC"); sheet.getCells(1, 1, 3, 10).hAlign($.wijmo.wijspread.HorizontalAlign.center); sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 18, 10), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.thin), { all: true }); sheet.setBorder(new $.wijmo.wijspread.Range(4, 4, 3, 6), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.dotted), { inside: true }); sheet.setBorder(new $.wijmo.wijspread.Range(7, 4, 3, 6), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.dotted), { inside: true }); sheet.setBorder(new $.wijmo.wijspread.Range(11, 4, 3, 6), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.dotted), { inside: true }); sheet.setBorder(new $.wijmo.wijspread.Range(14, 4, 3, 6), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.dotted), { inside: true }); fillSampleData(sheet, new $.wijmo.wijspread.Range(4, 4, 6, 6)); fillSampleData(sheet, new $.wijmo.wijspread.Range(11, 4, 6, 6)); sheet.isPaintSuspended(false); } function fillSampleData(sheet, range) { for (var i = 0; i < range.rowCount; i++) { for (var j = 0; j < range.colCount; j++) { sheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300)); } } } </script> <div class="container"> <div class="header"> <h2>SpreadJS Json Serialize</h2> </div> <div class="main demo"> <label style="font:bold 10pt arial">ToJson:</label> <div id="ss" style="width:100%;height:205px;border: 2px solid gray; margin-bottom: 5px;margin-right:10px;float:left"></div> <br/> <label style="font:bold 10pt arial">FromJson:</label> <div id="ss1" style="width:100%;height:205px;border: 2px solid gray; margin-bottom: 5px;float:left"></div> <div class="demo-options"> <div class="option-row"> <input type="button" value="Json Serialize" id="fromtoJsonBtn"/> </div> </div> </div> <div class="footer demo-description"> <p> All settings and data can be serialized to JSON, and the data can be loaded into the widget. </p> </div> </div>
-----------------------------------------------------
转载请注明来源此处
原地址:#
发表