extjs tree check 级联选择

extjs4 tree check 级联选择

实现效果:

关键代码:

function changeAllNode(node, isCheck) {
    allChild(node, isCheck);
    allParent(node, isCheck);
    function allChild(nodec, isCheckc) {
        var chileNodes = nodec.childNodes;
        Ext.Array.each(chileNodes, function (nd) {
            if (nd.hasChildNodes()) {
                nd.set(‘checked‘, isCheck);
                allChild(nd, isCheckc);
            } else {
                nd.set(‘checked‘, isCheck);
            }
        });
    }

function allParent(nodep, isCheckp) {
        if (!isCheckp) {
            nodep.set(‘checked‘, isCheck);
            if (brothNodesIsTrue(nodep)) {
            } else {
                if (nodep.getDepth() > 1) {
                    allParent(nodep.parentNode, isCheckp);
                }
            }
        } else {
            if (nodep.getDepth() > 1) {
                nodep.set(‘checked‘, isCheck);
                allParent(nodep.parentNode, isCheckp);
            } else {
                nodep.set(‘checked‘, isCheck);
            }
        }
    }

function brothNodesIsTrue(node) {
        var flag = false;
        var brothNodes = node.parentNode.childNodes;
        Ext.Array.each(brothNodes, function (bn) {
            if (bn.get(‘checked‘)) {
                flag = true;
                return false;
            }
        });
        return flag;
    }
}

监听选择事件:

tree.on(‘checkchange‘, function (node, checked) { changeAllNode(node, checked) });

extjs tree check 级联选择,布布扣,bubuko.com

时间: 2024-10-10 19:04:04

extjs tree check 级联选择的相关文章

easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网上百度了很多资料,都没有完全符合自己业务场景的,所以就自己动手写咯. 先说一下自己的业务需求: 1.选中节点,上级以及所有直系上级节点自动选中,所有下级子孙节点全部自动选中: 2.取消选择节点,如果兄弟节点都未选择,则上级以及所有直系上级节点自动取消选择,所有下级子孙节点全部取消选中. 这里说一下c

angular 级联选择

HTML: <link rel="stylesheet" href="views/tree/checkbox.css"/> <div class="tree"> <ul> <li ng-repeat="country in vm.countries" ng-class="{closed:country.closed}"> <div> <inp

利用InfoPath实现SharePoint Server 2013列表的级联选择(Cascading Drop Down List)

最近在利用SharePoint Server 2013的列表组织和存储数据,发现SharePoint列表原始不支持级联选择的功能. 谷歌百度一通以后,发现了很多通过代码实现的方案,利用第三方的插件spservices的http://spservices.codeplex.com/releases/view/119578,或者自己编段代码的http://www.cnblogs.com/jianyus/p/3812758.html(JQuery+JavaScript),但觉得都不太理想.最后发现可以

省市区级联选择

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市区级联选择</title> <script type="text/javascript" src="

iview Cascader级联选择省市区问题,并附上数据

vue项目中,用到了iview的Cascader级联选择省市区,之前用的是iview-area这个插件做的省市区下拉选择, 没啥大问题,就是选择省市区后,屏幕会抖动一下,体验不好,又找不到解决办法, 之后重新选择了iview中的Cascader <FormItem label="省市区:" prop="chinaArea"> <Cascader v-model="eroomInfo.chinaArea" :data="

Extjs tree的相关方法及配置项

Ext.tree.TreePanel 主要配置项: root:树的根节点. rootVisible:是否显示根节点,默认为true. useArrows:是否在树中使用Vista样式箭头,默认为false. lines:是否显示树线,默认为true. loader:树节点的加载器,默认为Ext.tree.TreeLoader. selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel. pathSeparator:树节点路径的分隔符,默认为“/”. si

Js异步级联选择框实践方法

HTML: <li> <span>所在地区:</span> <select name="prov" id="ddl_prov" onchange="event_change_prov(this);" class="required" missingmsg="请选择省"> <option value="">请选择省</opt

net extjs tree异步加载数据

小弟最近刚学习extjs,总结一下使用extjs 进行treepanel加载的经验 extjs版本4.0.7,后台是使用net 的mvc框架进行数据传递 首先显示一下效果以及后台数据截图       //我们提供动态数据   //这是数据源请求的数据来源(后台自定义JsonTree类提供的主要字段 ID Text FatherID) extjs代码 <script type="text/javascript"> Ext.onReady(function () {//以下的脚

WdatePicker控件级联选择

控件代码 <td nowrap="true"> <input style="width: 90px;" onclick="WdatePicker({ dateFmt: 'yyyy-MM',startDate:'%y-%M' })" class="Wdate" name="DateMonth" id="DateMonth"> 月 </td> <td