Kendo ui TreeView
阿新 • • 發佈:2019-01-31
首先上成型圖,一個簡單得省省市列表樹
//1.只需要一div容器 <div id="treeView"></div> <input type="text" id="city" /> //2.JS程式碼 $(function () { var treeName = ""; var treeRowid = ""; $("#treeView").kendoTreeView({ check: treeTaskChecked, //選擇事件 dataSource: [], checkboxes: { checkChildren: true, template: "<input type='checkbox' id='checked#= item.id #' value='true' />" } }); //treeView的 選擇事件 function treeTaskChecked() { getCheckedTask(undefined); } function getCheckedTask(nodes) { //首次進入此方法使用 if (nodes == undefined) { treeRowid = ""; var treeView = $("#treeView").data("kendoTreeView"); nodes = treeView.dataSource.view(); } for (var i = 0; i < nodes.length; i++) { if (nodes[i].hasChildren) { getCheckedTask(nodes[i].children.view()); } else {//以下是沒有子節點 (獲取所有沒有子節點的資料 拼成字串) if (nodes[i].checked == true) { if (treeTaskRowid == "") { treeName = nodes[i].text; treeRowid = nodes[i].id; } else { treeName += "," + nodes[i].text; treeRowid += "," + nodes[i].id;; } } } } } //獲取資料 function initTreeData() { $.ajax({ type: "POST", url: "/TreeView/getTreeViewData", data: {province:"河南", city:$("#city").val()},//data可以向後臺去傳遞相應的的值 success: function (data) { $("#treeTasks").data("kendoTreeView").setDataSource(new kendo.data.HierarchicalDataSource({ data: JSON.parse(data) })); } }); } //重新整理/進入呼叫一次該方法,當然可以寫進相應方法中,根據相應的條件獲取相應的資料 initTreeData(); });
//3.後臺程式碼 public string getTreeViewData(string province="",string city="") { //獲取從前臺傳過來的引數 province=Server.UrlDecode(province); city=Server.UrlDecode(city); //------------- // 跳過此步驟 //--------------- // string result = [{"id":"河北","text":"河北","items":[{"id":"保定","text":"保定"}]},{"id":"河南","text":"河南",,"items":[{"id":"鄭州","text":"鄭州"},{"id":"洛陽","text":"洛陽"}]}]; // result是簡單的舉例。 當 要涉及字串的拼接等一系列操作。如(要把"放入字串需要"\""); return result; }
總結:為什麼要寫這個,當然有很多人也寫了,但是自己剛開始看了很多人寫的方法,自己還是沒有完全的理解。為了幫助自己加深對此的印象,專門記錄一下備自己翻閱。最好可以幫助需要此功能的人。