easyui tree带checkbox实现单选

<ul id="regionTree"></ul>

 

$('#regionTree').tree({
            cascadeCheck: false,
            //onlyLeafCheck: true,
            checkbox: true,
            data: [{
                "id": 1,
                "text": "My Documents",
                "children": [{
                    "id": 11,
                    "text": "Photos",
                    "state": "closed",
                    "children": [{
                        "id": 111,
                        "text": "Friend"
                    }, {
                        "id": 112,
                        "text": "Wife"
                    }, {
                        "id": 113,
                        "text": "Company"
                    }]
                }, {
                    "id": 12,
                    "text": "Program Files",
                    "children": [{
                        "id": 121,
                        "text": "Intel"
                    }, {
                        "id": 122,
                        "text": "Java",
                        "attributes": {
                            "p1": "Custom Attribute1",
                            "p2": "Custom Attribute2"
                        }
                    }, {
                        "id": 123,
                        "text": "Microsoft Office"
                    }, {
                        "id": 124,
                        "text": "Games",
                        "checked": true
                    }]
                }, {
                    "id": 13,
                    "text": "index.html"
                }, {
                    "id": 14,
                    "text": "about.html"
                }, {
                    "id": 15,
                    "text": "welcome.html"
                }]
            }]
            ,
            width: 160,
            height: 32,
            panelHeight: 400,
            onSelect: function (node) {
                var cknodes = $('#regionTree').tree("getChecked");
                for (var i = 0; i < cknodes.length; i++) {
                    if (cknodes[i].id != node.id) {
                        $('#regionTree').tree("uncheck", cknodes[i].target);
                    }
                }
                if (node.checked) {
                    $('#regionTree').tree('uncheck', node.target);

                } else {
                    $('#regionTree').tree('check', node.target);

                }

            },
            onLoadSuccess: function (node, data) {
                $(this).find('span.tree-checkbox').unbind().click(function () {
                    $('#regionTree').tree('select', $(this).parent());
                    return false;
                });
            }
        })

 

关键代码:

onSelect: function (node) {
                var cknodes = $('#regionTree').tree("getChecked");
                for (var i = 0; i < cknodes.length; i++) {
                    if (cknodes[i].id != node.id) {
                        $('#regionTree').tree("uncheck", cknodes[i].target);
                    }
                }
                if (node.checked) {
                    $('#regionTree').tree('uncheck', node.target);

                } else {
                    $('#regionTree').tree('check', node.target);

                }

            },
            onLoadSuccess: function (node, data) {
                $(this).find('span.tree-checkbox').unbind().click(function () {
                    $('#regionTree').tree('select', $(this).parent());
                    return false;
                });
            }

 

 

技术交流QQ群:15129679

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用easyUItree组件进行回显时,可以按照以下步骤进行操作: 1. 在回显前,先清除之前的回显数据。可以使用以下代码清除已选中的节点: ```javascript //先将回显数据全部清除 //获取所有选中节点 var nodes = $('#tt').tree('getChecked'); //遍历,选中的都不选中 for(var i=0; i<nodes.length; i++){ console.info('nodes[i:' + nodes[i]); console.info('nodes[i].target:' + nodes[i].target); $('#tt').tree('uncheck', nodes[i].target); } ``` 2. 在清除回显数据后,可以根据需要重新设置选中的节点。具体的实现方法可以参考easyui tree组件的文档和示例,根据业务需求进行相应的设置。 这样就可以实现easyui tree的回显功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Easyui tree实现省市区数据显示和回显功能](https://blog.csdn.net/weixin_31172555/article/details/118937247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [easyui treecheckbox实现单选的简单实例](https://download.csdn.net/download/weixin_38643307/12791344)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [easyui CheckBox Tree 复选框实现数据回显](https://blog.csdn.net/dsa572713470/article/details/89675540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值