最新高清电影,国产自拍成人,天媒传媒视频

教你用JSON輕松實現Kendo UI Treeview序列化

原創(chuàng)|使用教程|編輯：郝浩|2013-08-27 10:44:24.000|閱讀 4429 次

概述：本文教你用JSON輕松實現Kendo UI treeview 序列化的方法，將大大提升你的開發(fā)效率。

Treeview是界面設計中經常要用到的控件，那你是否想過將界面開發(fā)工具 Kendo UI 中的treeview序列化呢？將它存儲之后就可以隨時加載調用，可以大大提升你的開發(fā)效率。本文將為你展示如何用一段jQuery代碼輕松將 treeview 序列化。

注：Kendo UI是 Telerik 推出的基于jQuery HTML5的UI開發(fā)框架，提供數據可視化和服務器封裝解決方案，開發(fā)面向桌面、移動設備的應用程序，以其優(yōu)良的性能深受國內外開發(fā)人員喜愛。>>免費下載

下面這個例子將一列復選框以treeview控件展示層級數據。用戶通過點擊復選框選擇數據項，并將選項保存為優(yōu)先設置的一部分。這些選項被保存之后，我們仍然需要從數據中進行加載。

KendoUI,treeview,JSON ,序列化

Treeview 的div部分：

<body>
  <div id="treeview"></div>
</body>

jQuery代碼也相當簡單：

var ds = new kendo.data.HierarchicalDataSource({
    data: [{"text":"Item 1","id":"1","expanded":true,
      "checked":true,"items":[{"text":"Item 1.1",
      "id":"2","checked":true},{"text":"Item 1.2",
      "id":"3","checked":true},{"text":"Item 1.3",
      "id":"4","checked":true}]},{"text":"Item 2",
      "id":"5","expanded":true,"items":[{"text":"Item 2.1",
      "id":"6","checked":true},{"text":"Item 2.2",
      "id":"7"},{"text":"Item 2.3","id":"8",}]},
      {"text":"Item 3","id":"9"}]
});

var tv = $("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: true
    },
    dataSource: ds
}).data("kendoTreeView");


function treeToJson(nodes) {

    return $.map(nodes, function(n, i) {
    
        var result = { text: n.text, id: n.id, expanded: n.expanded, checked: n.checked };
    
        

        if (n.hasChildren)
            result.items = treeToJson(n.children.view());

        return result;
    });
}

var json = treeToJson(tv.dataSource.view()); 
console.log(JSON.stringify(json));

需要說明的一點是，函數 treetoJson()將遍歷所有樹節(jié)點并以JSON的形式返回數據數組。你可以在JS Bin中測試以上代碼，但是要確保通過"Add Library"將"Kendo UI"加進去。

標簽：

本站文章除注明轉載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉載自：慧都控件

上一篇：在x64系統(tǒng)下用Stimulsoft Reports連接Microsoft Access數據庫視頻教程下一篇：JS圖表控件FusionCharts使用教程：定制圖表中的趨勢線和趨勢區(qū)