easyui tree带checkbox实现单选的简单实例

实例如下:

    $('#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;
            });
          }

    以上这篇easyui tree带checkbox实现单选的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    你可能感兴趣的:(easyui tree带checkbox实现单选的简单实例)