SG-UAP 中TreeListView

 树状架构在BS项目中非常常见，当然SG-UAP中自然也不会落下这一个“大众”控件。在我负责的模块中没有涉及到“树”不过在和其他同事探讨问题的时候还是了解到了这个控件。

下面的代码就给我们展现出了如何创建一个TreeList控件，并且更好的给我们展示了如何设置图片，右键菜单以及右键菜单的单击事件。当然这里也必须要有树的根节点和叶子节点已经我们点击节点所触发的事件。

var treeList = new mx.controls.TreeListView({
	   type: "local",
    images:
    [
        { itemType: "folder", imageUrl: "$/icons/folder.png" },
        { itemType: "role", imageUrl: "$/icons/role.png" }
    ], // 控件中所有使用的图片集合
    itemMenu:
    {
        items:
        [
            { name: "appendRoot", text: "添加根节点" },
            { name: "append", text: "添加子节点" },
            "-",
            { name: "remove", text: "删除" }
        ],

        onitemclick: _toolStrip_itemclick
    }, // 定义数据项的右键菜单
    columns:
    [
        { name: "name", text: "名称" },
        { name: "value", text: "值" }
    ], // 定义列
    items:
    [
        {
            name: "Folder1",
            value: "folder1",
            itemType: "folder", // itemType 的值与 images 集合中对象的 name 属性值相对应，显示相应的图片
            items:
            [
                {
                    name: "A1",
                    value: "a1",
                    itemType: "role"
                }
            ] // Folder1 的子数据项节点
        },
        {
            name: "Folder2",
            value: "folder2",
            itemType: "folder",
            expanded: true, // 设置默认展开节点
            items:
            [
                {
                    name: "Folder2-1",
                    value: "folder2-1",
                    itemType: "folder",
                    expanded: true,
                    items:
                    [
                        {
                            name: "B1",
                            value: "b1",
                            itemType: "role"
                        },
                        {
                            name: "B2",
                            value: "b2",
                            itemType: "role"
                        }
                    ]
                }
            ]
        }
    ], // 定义数据项。可以嵌套，表示数据项子节点

    onitemdoubleclick: _treeItem_doubleclick
});


function _treeItem_doubleclick(e)
{
    alert("您双击的项的名称为：" + e.item.getValue("name"));
}

function _toolStrip_itemclick(e)
{
    if (e.item.name == "appendRoot")
    {
        treeList.appendItem({
            name: "root",
            value: "根节点",
            itemType: "folder"
        });
    }
} 

在项目中我们遇到的问题就是按钮添加权限，通过ID来查找页面的按钮，这样树的右键菜单的按钮就不能像上面的按钮直接写在代码里了。从后台返回的按钮是以JSON串的格式传回的，所以如果要给TreeListView添加右键菜单就只能对itemMenu进行设置值了。思路有了就剩下实践了和同事经过也就实现了这样的添加按钮方式。