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>


浙公网安备 33010602011771号