Ext js tree加载,并新增又键菜单和节点带复选框.

<script type="text/javascript">

Ext.onReady(function () {
            Ext.QuickTips.init();
            var Tree = Ext.tree;
            var win;
            var tree = new Tree.TreePanel({
                el: 'tree_div',
                width: 300,
                height: 400,
                autoScroll: true,
                animate: true,
                rootVisible: false,
                enableDD: false,
                containerScroll: true,
                loader: new Tree.TreeLoader({
                    dataUrl: '/TreeAjax.aspx'//请求页
                })
            });
            var rootID = 'root';
            var ThisSiteName = "分类";
            var root = new Tree.AsyncTreeNode({
                text: ThisSiteName,
                draggable: false,
                cls: 'root',
                icon: 'http://www.cnblogs.com/http://www.cnblogs.com/Scripts/ext-2.3.0/resources/images/list-items.gif',
                id: rootID
            });
            tree.on('contextmenu', function (node, event) {
                event.preventDefault();  //屏蔽默认右键菜单
                node.select();         

                rightClick.showAt(event.getXY());
            });
            var rightClick = new Ext.menu.Menu({
                id: 'rightClickCont',
                items: [{
                    text: '添加',
                    icon: 'http://www.cnblogs.com/http://www.cnblogs.com/Scripts/ext-2.3.0/resources/images/Article.gif',
                    handler: onCreateItemClick
                }, {
                    text: '编辑',
                    icon: 'http://www.cnblogs.com/http://www.cnblogs.com/Scripts/ext-2.3.0/resources/images/edit.png',
                    handler: onEditItemClick
                }, {
                    text: '删除',
                    icon: 'http://www.cnblogs.com/http://www.cnblogs.com/Scripts/ext-2.3.0/resources/images/delete.png',
                    handler: onDeleteItemClick
                }]
            });

            function onCreateItemClick(item) {
                var node = tree.getSelectionModel().getSelectedNode();
                window.Fram.location.href = "Add.aspx?id="+node.id;

            }

            function onEditItemClick() {
                var node = tree.getSelectionModel().getSelectedNode();
                window.Fram.location.href = "Edit.aspx?id="+node.id;

            }

            function onDeleteItemClick() {
                var node = tree.getSelectionModel().getSelectedNode();
                var text= node.text;
                var msg = "确定要删除【" + text+ "】节点吗?";
                if (confirm(msg)) {
                    Ext.Ajax.request({
                        url: '/Delete.aspx',
                        params: {
                            id: id
                        },
                        success: function (response, options) {
                            switch (response.responseText) {
                                case "success":
                                    node.remove();
                                    break;
                                case "failed":
                                    alert("对不起,删除【" + text+ "】出错,请稍候再试!");
                                    break;
                            }
                        }
                    });
                }
            }
            tree.setRootNode(root);
            tree.render();

 

/*********************选中复选框**********************/
            //选中孩子
            var childHasChecked = function (node) {
                var childNodes = node.childNodes;
                if (childNodes || childNodes.length > 0) {
                    for (var i = 0; i < childNodes.length; i++) {
                        if (childNodes[i].getUI().checkbox.checked)
                            return true;
                    }
                }
                return false;
            }
            //级联选中父节点
            var parentCheck = function (node, checked) {
                var checkbox = node.getUI().checkbox;
                if (typeof checkbox == 'undefined')
                    return false;
                if (!(checked ^ checkbox.checked))
                    return false;
                if (!checked && childHasChecked(node))
                    return false;
                checkbox.checked = checked;
                node.attributes.checked = checked;
                node.getOwnerTree().fireEvent('check', node, checked);

                /************选中父级节点*************/
                var parentNode = node.parentNode;
                while (true) {
                    if (parentNode != null) {
                        parentCheck(parentNode, checked);
                        parentNode = parentNode.parentNode;
                    }
                    else
                        break;
                }
                /***************************************/
            }

            //增加checkchange监听
            tree.on('checkchange', function (node, checked) {
                var parentNode = node.parentNode;
                if (parentNode !== null) {
                    parentCheck(parentNode, checked);
                }
                //node.expand();
                node.attributes.checked = checked;
                node.eachChild(function (child) {
                    child.ui.toggleCheck(checked);
                    child.attributes.checked = checked;
                    child.fireEvent('checkchange', child, checked);
                }); onItemClick();
            }, tree);


            root.expand();
        });

</script>

<div id="tree_div"></div>

posted @ 2011-03-22 10:30  Tonglu  阅读(1770)  评论(0)    收藏  举报