SpreeadJS 9 支持漢字和中文本地化界面(SpreadJS 9 新功能之漢化和樣式)，極大的方便了國內用戶，本文介紹如何根據本地化語言加載Spread模板，同時，簡單介紹如何使用SpreadJS設計器快速綁定數據。

<獲取SpreadJs最新試用版>

以SpreadJS Demo中的學生日歷為模板實現。

實現步驟：

1. 下載并修改模板文件。

   ; 在學生日歷實例頁面下載Demo，打開studentcalendar_json.txt 刪除文檔前后 “ [”“ ]”符號，使內容從array變為object，并重命名為studentcalendar.en-us.ssjson。

2. 使用SpreadJS Designer 打開studentcalendar.en-us.ssjson，為模板增加單元格數據綁定，保存模板。

    為模板添加單元格綁定可參考 

3. 另存為studentcalendar.zh-cn.ssjson，漢化模板內容，保存。

4. 在MVC項目中添加獲取模板代碼，將之前創建好的模板文件放在項目下templates文件夾中。

public JsonResult GetTemplateJson(string key, string culture = "zh-cn")
        {
            if (string.IsNullOrWhiteSpace(key))
            {
                return Json("");
            }
            string name = HttpContext.Server.MapPath(@"~\templates\{0}.{1}.ssjson");
            name = string.Format(name, key, culture);
            if (System.IO.File.Exists(name))
            {
                string context = System.IO.File.ReadAllText(name);
                return Json(context, JsonRequestBehavior.AllowGet);
            }
            return Json("");
        }

5. 頁面THML代碼

<div class="row">
    <div class="col-md-12" style="margin-top:20px;">
        <div id='ss' style='width:100%; height:600px;'></div>
    </div>
</div>
<div class="form-inline" style="margin-top:10px;">
        <label class="control-label" for="cultureName">Culture：</label>
        <select class="form-control" id="cultureName">
            <option value="en-us">English</option>
            <option value="zh-cn">Chinese</option>
        </select>
</div>

6. JS代碼

   var spread = null;
        var spreadNS = GcSpread.Sheets
        $(function () {
            spread = new spreadNS.Spread($('#ss')[0]);
            //根據Spread默認語言加載數據
            var culture = GcSpread.Sheets.Culture();
            $("#cultureName").val(culture);
            loadTemplate(culture);
            $("#cultureName").change(function () {
                changeCulture($(this).val());
            });
        });
        function changeCulture(culture) {
            GcSpread.Sheets.Culture(culture);
            loadTemplate(culture);
        }
        function loadTemplate(culture) {
            //根據不同語言加載數據
            $.getJSON("/Home/GetTemplateJson?key=studentcalendar&culture=" + culture, function (template) {
                if (template) {
                    if (typeof (template) !== "object") {
                        template = JSON.parse(template);
                    }
                    //導入模板
                    spread.fromJSON(template);
                    //數據可以從服務端異步獲取
                    var bindingData = {
                        "zh-cn": { assignment: { day: 1, detail: "完成作業" } },
                        "en-us": { assignment: { day: 1, detail: "Finish Job" } }
                    }
                    var dataSource = new spreadNS.CellBindingSource(bindingData[culture]);
                    var sheet = spread.sheets[0];
                    //為sheet 1 綁定數據
                    sheet.setDataSource(dataSource);
                }
            });
        }

運行項目，切換下拉菜單語言即可切換SpreadJS 語言、模板語言、以及綁定數據語言。

示例下載:

文章轉自葡萄城

更多產品信息請查看>>