首页 > 编程 > JavaScript > 正文

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

2019-11-19 19:02:41
字体:
来源:转载
供稿:网友

实例如下:

<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;        });      }

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表