91大神大战丝袜,国产有码无码电影,亚洲欧美日韩有码

教你用JSON輕松實(shí)現(xiàn)Kendo UI Treeview序列化

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

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

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

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

下面這個例子將一列復(fù)選框以treeview控件展示層級數(shù)據(jù)。用戶通過點(diǎn)擊復(fù)選框選擇數(shù)據(jù)項(xiàng)，并將選項(xiàng)保存為優(yōu)先設(shè)置的一部分。這些選項(xiàng)被保存之后，我們?nèi)匀恍枰獜臄?shù)據(jù)中進(jìn)行加載。

KendoUI,treeview,JSON ,序列化

Treeview 的div部分：

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

jQuery代碼也相當(dāng)簡單：

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));

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

標(biāo)簽：

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

文章轉(zhuǎn)載自：慧都控件

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