ExtJS学习笔记(五) Tree

树的加载分为全部加载和异步加载

全部加载，一次性将所有的数据全部加载出来

// 前台JS
var myTree;

Ext.onReady(function () {
setTree();
setClick();
});

var store = Ext.create("Ext.data.TreeStore", {
proxy: {
type: "ajax",
url: "tree.aspx?action=loadData"
},
folderSort: true,   // 是否排序
sorters: [{         // 排序规则
property: "text",
direction: "desc"
}],
root: {
text: "根节点",
id: "0"
},
autoLoad: true
});

function setTree() {
myTree = Ext.create("Ext.tree.Panel", {
title: "树样例",
width: 300,
height: 600,
store: store,
rootVisible: true, // 根节点可见
renderTo: Ext.getBody(),
useArrows: true, // 在tree中使用Vista-style样式的箭头
animate: true,   // 展开/折叠的动画
rame: true,
collapsible: true,  // 允许折叠
collapsed: false, // 是否展开
viewConfig: {
plugins: { ptype: "treeviewdragdrop"}  // 允许拖拽
},
tbar: [{
text: "Click",
handler: function () {
var records = myTree.getView().getChecked(), names = [];
Ext.Array.each(records, function (rec) {
names.push(rec.get("text"));
});
Ext.MessageBox.show({
title: "Selected Nodes",
msg: names.join("<br />"),
icon: Ext.MessageBox.INFO
});
}
}]
});
}

var menu = Ext.create("Ext.menu.Menu", {
width: 100,
items: [{
text: "新增",
glyph: "xf067@FontAwesome"
}, {
text: "修改",
glyph: "xf044@FontAwesome"
}, {
text: "删除",
glyph: "xf014@FontAwesome"
}]
});

function setClick() {
// rowclick单击
// rowdblclick 双击
//右键
myTree.on("rowcontextmenu", function (view, node, item, index, event) {
if (!node.hasChildNodes()) {
event.preventDefault();
menu.showAt(event.getXY());
}
});
//1、全部展开 tree.expandAll();
//2、全部收缩 tree.collapseAll();
//3、得到父节点 node.parentNode
//4、判断是否有父节点 node.parentNode==null
//5、判断是否有子节点 node.hasChildNodes()
//6、获取下一级所有子节点 node.eachChild(function(child) { })
//7、获取选择的节点 tree.getSelectionModel().getSelectedNode()
//8、设置选中节点  node.select()
//9、上移节点 node.selectPrevious();
//10、下移节点 node.selectNext();
//11、获取节点ID  node.data.id
//12、获取节点值  node.data.text
//13、获取节点提示  node.attributes.qtip
}

// 后台逻辑处理
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LearnExtJS.Web
{
public partial class tree : System.Web.UI.Page
{
private Dictionary<string, string[]> dic = new Dictionary<string, string[]>();
private string[,] data = { { "1", "0", "资源管理" }, { "2", "0", "系统管理" }, { "3", "1", "人力资源" }, { "4", "1", "综合后勤" }, { "5", "3", "员工信息" }, { "6", "2", "系统配置" }, { "7", "2", "菜单配置" }, { "8", "7", "菜单选项" } };
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request["action"] == "loadData")
{
loadData();
}
}
}
private void loadData()
{
string json = "[";
for (int i = 0; i < data.GetLength(0); i++)
{
string[] str = { data[i, 1], i.ToString() };
dic.Add(data[i, 0], str);
}
for (int i = 0; i < data.GetLength(0); i++)
{
if (data[i, 1] == "0")
{
json += GetJson(i) + ",";
}
}
json = json.Substring(0, json.Length - 1) + "]";
Response.ContentType = "application/json;charset=utf-8";
Response.Write(json);
Response.End();
}

private string GetJson(int i)
{
string json = "";
string children = "";
json = "{\"text\":\"" + data[i, 2] + "\",\"id\":\"" + data[i, 0] + "\",\"checked\":false";
for (int j = 0; j < data.GetLength(0); j++)
{
if (data[j, 1] == data[i, 0])
{
children += GetJson(j) + ",";
}
}
if (children != "")
{
json += ",\"children\":[" + children + "]}";
}
else
{
json += ",\"leaf\":\"true\"}";
}
return json;
}
}
}

异步加载，加载当前层的数据，通过展开下一层来加载下层数据

// 修改store
var store = Ext.create("Ext.data.TreeStore", {
nodeParam: "id",    // 异步加载最重要的一部分，向后台传递参数。根据id获取其对应的子节点
proxy: {
type: "ajax",
url: "tree.aspx?action=loadData",
reader: {
type: 'json',
// 对于树读取内嵌数据，在Ext.data.reader.Reader中必须配置一个root属性，
// 这样reader可以找到关于每个节点的内嵌数据。 如果未指定root，那么它将默认为'children'
// 在5以后更改为 rootProperty
rootProperty: 'nodes'
}
},
folderSort: true,   // 是否排序
sorters: [{         // 排序规则
property: "text",
direction: "desc"
}],
root: {
text: "根节点",
id: "0"
},
autoLoad: true
});

// 修改后台逻辑
private void loadData()
{
// 获取前台传过来的id，其字节点的pid等于父节点的id
string id = Request["id"];
string json = "{\"nodes\":[";
for (int i = 0; i < data.GetLength(0); i++)
{
if (dic.ContainsKey(data[i, 0]))
{
dic[data[i, 1]] += 1;
}
else
{
dic[data[i, 1]] = 1;
}
}
for (int i = 0; i < data.GetLength(0); i++)
{
if (data[i, 1] == id)
{
json += "{\"text\":\"" + data[i, 2] + "\",\"id\":\"" + data[i, 0] + "\",\"checked\":false";
if (!dic.ContainsKey(data[i, 0]))
{
json += ",\"leaf\":\"true\"}";
}
else
{
json += "}";
}
json += ",";
}
}
json = json.Substring(0, json.Length - 1) + "]}";
Response.ContentType = "application/json;charset=utf-8";
Response.Write(json);
Response.End();
}