4.顺序效果如下图所示:

listeners:{
  checkchange:function(node,checked,eOpts){
    // 批量设置子节点选中效果
    function setChildChecked(pNode){
      pNode.set('checked',checked);
      pNode.eachChild(function(child){
        arguments.callee(child);
      })
    }
    setChildChecked(node);
    // 当前节点取消选中时 需要判断当前节点的父节点下的所有子节点是否都不是选中状态
    function setParentCheckedFalse(currentNode){
      var parentNode = currentNode.parentNode,
        isValid = true;
      if(parentNode != null){
        if(checked == false){
          parentNode.eachChild(function (child) {
            if(child.get('checked') != false){
              isValid = false;
              return false;
            }
          });
          if(isValid){
            parentNode.set('checked',checked);
          }
        }else{
          parentNode.set('checked',true);
        }
        arguments.callee(parentNode)
      }
    }
    setParentCheckedFalse(node);
  }
}

你也许感兴趣的稿子:

  • extjs关于treePanel+chekBox全体中选以及清空选中难点查究
  • JavaScript的ExtJS框架中数面板TreePanel的利用实例解析
  • ExtJs动态生成treepanel的Json格式
  • extjs4
    treepanel动态改动行中度示例
  • 层序遍历在ExtJs的TreePanel中的应用
  • Extjs 中的 Treepanel
    完毕菜单级联选中效果及实例代码

复制代码 代码如下:

图片 1

2.点击当前节点寻找具备父级并安装选中状态

复制代码 代码如下:

你只怕感兴趣的篇章:

  • 关于extjs
    treepanel复选框选中父节点与子节点的标题
  • JavaScript的ExtJS框架中数面板TreePanel的应用实例深入分析
  • ExtJs动态生成treepanel的Json格式
  • extjs4
    treepanel动态改动行低度示例
  • 层序遍历在ExtJs的TreePanel中的应用
  • Extjs 中的 Treepanel
    落成菜单级联选中功用及实例代码

在ExtJS中,不管是卡牌节点还是非叶子节点,都合併用TreeNode表示树的节点。在ExtJS中,有二种档期的顺序的树节点。一种节点是平时的轻便树
节点,由Ext.tree.TreeNode定义,别的一种是索要异步加载子节点消息的树节点,该类由Ext.tree.AsyncTreeNode定
义。
在数量中, text 展现文字, leaf 节点 , children 子节点,expanded 展开

TreePanel继承自Panel,在ExtJS中央银行使树控件含有增加的个性和议程完毕复杂的成效。个中Ext.tree.TreeNode代表多个树节点,比较常用的属性包蕴text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下边介绍Extjs
中的 Treepanel 完结菜单级联选中作用。

var Fpanel = new Ext.tree.TreePanel({
id:’ptree’,
region:’west’,
layout:’anchor’,
border:false,
rootVisible: false,
root:new Ext.tree.AsyncTreeNode({}),
listeners:{
“checkchange”: function(node, state) {
if (node.parentNode != null) {
//子节点选中
node.cascade(function(node){
node.attributes.checked = state;
node.ui.checkbox.checked = state;
return true;
});
//父节点选中
var pNode = node.parentNode;
if (state || Fpanel.getChecked(id, pNode) == “”) {
pNode.ui.toggleCheck(state);
pNode.attributes.checked = state;
}
}
}
}
});
authorityTree(Fpanel);
var authorityTree = function(Fpanel){
Ext.Ajax.request({
url: ‘authorityTree.ashx’,
method:’get’,
success: function(request) {
var data = Ext.util.JSON.decode(request.responseText);
Fpanel.getRootNode().appendChild(data);
Fpanel.getRootNode().expandChildNodes(true);
Fpanel.expandAll();
},
failure: function() {
Fpanel.render();
Ext.MessageBox.show({
title: ‘提示’,
msg: ‘服务器忙,请使用火狐浏览器浏览或稍后重试!’,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}

//树
var treePanel = new Ext.tree.TreePanel({
id:’ptree’,
region:’west’,
layout:’anchor’,
border:false,
rootVisible: false,
root:{},
listeners:{
render: function() {
authorityTree(treePanel); /*渲染树*/
},
checkchange: function(node, state) {
if (node.parentNode != null) {
//选中子节点让相应的父节点选中
var pNode = node.parentNode;
if (state || treePanel.getChecked(id, pNode) == “”) {
pNode.ui.toggleCheck(state);// 触发父节点被入选
pNode.attributes.checked = state;
}
}
treeId = node.attributes.id;
treeName = node.attributes.text;
}
}
});
//操作开关
tbar: [{
id: ‘btnQingKong’,
text: ‘清空’,
iconCls: ‘winupdate-icon’,
handler: function() {
var nodes = Ext.getCmp(‘ptree’).getChecked();
if (nodes && nodes.length) {
for (var i = 0; i < nodes.length; i++) {
//设置UI状态为未入选状态
nodes[i].getUI().toggleCheck(false);
//设置节点属性为未入选状态
nodes[i].attributes.checked = false;
}
}
}
},{
id: ‘btnQuanXuan’,
text: ‘全选’,
iconCls: ‘winupdate-icon’,
handler: function() {
var nodeT = Ext.getCmp(‘ptree’).getRootNode();
treeCheckTrue(nodeT);
}
}]
/**
*checkTree全选
*/
var treeCheckTrue = function(node)
{
node.eachChild(function (child) {
child.getUI().toggleCheck(true);
child.attributes.checked = true;
treeCheckTrue(child);
});
}
/**
*checkTree清空
*/
var treeCheckfalse = function(tree)
{
var nodes = tree.getChecked();
if(nodes && nodes.length){
for(var i=0;i<nodes.length;i++){
//设置UI状态为未入选状态
nodes[i].getUI().toggleCheck(false);
//设置节点属性为未入选状态
nodes[i].attributes.checked=false;
}
}
}

在树TreePanel之间拖放结点 临时候大家在先后中,须求把一棵TreePanel的成分拖放到另外一棵TreePanel中,即便是在一样棵树中拖动时设置组件的enableDD参数为true,而明日亟待在分化给的书里头拖动元素,那个时候就足以设置组件的enableDrag和enableDrop参数,详细示比方下:

在 treepanel 里增添以下代码就可以完结级联选中作用

图片 2 
extjs
如图,完成带有复选框的树,选中父节点时,选中全数子节点。打消全体子节点时,手艺收回根节点。

方今就能够在前台的TreePanel建立的loader方法中做客上边创设的servlet了,代码如下:
客户端呈当代码

重中之重达成了以下作用:

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注