首页 > 代码库 > 我的开源框架之树控件

我的开源框架之树控件

2024-07-15 10:49:14   216人阅读

需求：

1.根据无限级的树形结构的json生成树菜单

2.树样式可以是图标类型和简单类型

3.可以自定义节点的图标

4.支持复选框

5.支持懒加载方式请求数据

6.支持节点点击事件

7.只有右键菜单【未实现】

8.支持拖拽调整节点【未实现】

实现图例

客户代码

 1 <body> 2     <div id="Container" style="padding:10px; margin:0 auto;width:800px;height:300px;padding-top:10px;padding-left:100px"> 3         <ul id="tree"></ul> 4     </div> 5     <script type="text/javascript"> 6         function getAllCheckedNodes() { 7             var nodes =  tree.tree(‘getCheckNodes‘, ‘‘); 8             alert(JSON.stringify(nodes)); 9         }10         var data =http://www.mamicode.com/ [{11             "id1": "0",12             "text1": "菜单",13             "checked": true,14             "iconCls": "icon-ok",15             "children": [{16                 "id1": "0_1",17                 "text1": "子菜单1",18                 "checked": true,19                 "iconCls": "icon-save"20             }, {21                 "id1": "0_2",22                 "text1": "子菜单2",23                 "checked": true,24                 "iconCls": "icon-ok"25             }26             ]27         },{28             "id1": ‘2‘,29             "text1": "计算机语言",30             "closed": false,31             "children": [{32                 "id1": "2_1",33                 "text1": "Java",34                 "children": [{35                     "id1": ‘2_1_1‘,36                     "text1": ‘j2ee‘37                 }, {38                     "id1": ‘2_1_2‘,39                     "text1": ‘j2me‘,40                     "checked": true,41                     "iconCls": "icon-ok"42                 }, {43                     "id1": ‘2_1_3‘,44                     "text1": ‘jsp‘45                 }]46                 }, {47                     "id1": "2_2",48                     "text1": "C#"49                 }]50         }];51         var tree;52         $(function () {53             tree = $("#tree").tree({54                 onClick: function (data) {55                     console.log(JSON.stringify(data));56                     alert("click");57                 },58                 animate: true,59                 isPlain: false,60                 checkbox: true,61                 textField: ‘text1‘,62                 idField: ‘id1‘,63                 //data: data64                 lazy:true,                65                 url: ‘testServer/jsonQuestTest.ashx?flag=tree‘,66                 onl oadSuccess:function(data){67                     console.log("服务器数据返回："+ JSON.stringify(data));68                 }                69             });70         });71     </script>72 </body>

组件代码：

  1 /**************************************************************  2 *作者:hjwen  3 *电邮:hjwen88@126.com  4 *版本：1.0  5 *版权许可：中国通用开源许可协议V1.0  6 *说明：tree组件  7 ***************************************************************/  8 (function ($) {  9     var isPlain = false, checkbox = false, animate = false, lazy = false; textField = ‘text‘, idField = ‘id‘, url=""; 10     var treeDataObj = null; var treeOpts = null; 11     var onl oadSuccess = null;//加载成功 12     function renderHtml(target) { 13         target.addClass(‘tree‘); 14         treeOpts = target.data(‘settings‘);        15         if (treeOpts.data =http://www.mamicode.com/= null) { 16             alert("treeOpts.data 是必须的！"); 17             return; 18         } 19         treeDataObj = treeOpts.data; 20         target.parent().css("overflow", "auto"); 21         isPlain = treeOpts.isPlain; 22         checkbox = treeOpts.checkbox; 23         animate = treeOpts.animate; 24         lazy = treeOpts.lazy; 25         url = treeOpts.url; 26         textField = treeOpts.textField; 27         idField = treeOpts.idField; 28         var treeJson = treeOpts.data; 29         var ctlData=http://www.mamicode.com/{isRoot:true,path:‘‘,pid:‘‘,isLastf:false,isFirstf:false,isRootFirst:false,isRootLast:false}; 30         loopInitCreate(treeJson, 1, target, ctlData); 31     }; 32     function loopInitCreate(treeJson, treeDeep, target,ctlData) { 33         var lastItem; 34         $.each(treeJson, function (i, node) { 35             var children = node.children; 36             node.idx = i; 37             node.pid = ctlData.pid; 38             var controlData = http://www.mamicode.com/{//控制参数 39                 isRoot: ctlData.isRoot,//是否是树根 40                 isFirst: false,//是否是第一个节点 41                 isLast: false,//是否是最后一个节点 42                 path: ctlData.path + i,//树路径，用于数据搜索，避免全树扫描性能问题 43                 isLeaf: false,//是否是子叶 44                 isLastf: ctlData.isLastf,//父元素是否为最后一个 ，第一级没有父元素为false 45                 isFirstf: ctlData.isFirstf,//父元素是否为第一个 ，第一级没有父元素为false 46                 treeDeep: treeDeep,//树深度 47                 isRootFirst: ctlData.isRootFirst,//是否是根第一个节点，用于控制节点图标和补充线的样式 48                 isRootLast: ctlData.isRootLast//是否是根最后一个节点，用于控制节点图标和补充线的样式 49             }; 50             if (i == 0) { 51                 if (ctlData.isRoot) 52                     controlData.isRootFirst = true; 53                 controlData.isFirst = true; 54             } 55             if (i == treeJson.length - 1) { 56                 controlData.isLast = true; 57                 if (ctlData.isRoot) 58                     controlData.isRootLast = true; 59             } 60             if (typeof children != ‘undefined‘ && $.isArray(children)) { 61                 var li = $("<li class=\"tree_li\"></li>").appendTo(target); 62                 if (children.length == 0) 63                     node.closed = true; 64                 lastItem = loopCreateTree(node, li, controlData); 65             } else {//子叶    66                 controlData.isLeaf = true; 67                 lastItem = createLeafNode(node, target, controlData); 68             } 69         }); 70         var tmpDeep = lastItem.attr("treedeep"); 71         var isleaf = lastItem.attr("isleaf"); 72         if (isleaf == ‘true‘){ 73             if(lastItem.attr("isrootlast")==‘true‘) 74                 lastItem.children("div:lt(" + tmpDeep + ")").removeClass("tree_line_all").addClass("tree_line_up"); 75         }else { 76             if (lastItem.attr("isclose") == ‘true‘){ 77                 lastItem.children("div:lt(" + tmpDeep + ")").removeClass("tree_collapsable_center").addClass("tree_collapsable_up"); 78                 lastItem.children("div:lt(" + (parseInt(tmpDeep)-1) + ")").removeClass("tree_line_all").addClass("tree_line_up"); 79             }                 80             else 81                 lastItem.children("div:lt(" + tmpDeep + ")").removeClass("tree_expandable_center").addClass("tree_expandable_up"); 82         } 83     } 84     /**********私有方法开始********************/ 85     /****远程加载数据*****/ 86     function queryData(params,loadingContaner, fn) { 87         var ajaxopt = { 88             url: url, 89             params: params, 90             loadingContainer: loadingContaner, 91             okdeal: function (data) { 92                 var arr = eval(data); 93                 fn(arr); 94                 if (typeof onl oadSuccess === ‘function‘) { 95                     onl oadSuccess(arr); 96                 } 97             } 98         };         99         $.myui.ajaxRequest(ajaxopt);100     };101     /*****102     *修改树数据的checked属性,注意非子叶节点的checked只做参考103     *@param path :节点的树路径,根据路径查找节点，避免全树搜索的性能开销104     *@param checked 是否选中105     ******/106     function modifyCheckAttr(path, checked) {107         var pathArr = path.split(‘_‘);  108         //利用setTimeout模拟开启一个更新数据的线程，加快处理速度109         setTimeout(function () {           110             //console.log("点击前数据=" + JSON.stringify(treeDataObj));111             loopCheckAttr(treeDataObj, pathArr, checked == ‘true‘);112             //console.log("更新后数据=" + JSON.stringify(treeDataObj));113         },0);  114     };115     function loopCheckAttr(dataArr, pathArr, checked) {116         for (var i = 0, len = dataArr.length; i < len; ++i) {117             if (pathArr[0] == i) {//已经找到 118                 dataArr[i].checked = checked;119                 if (pathArr.length > 1) {//根据path往下搜寻到末节点120                     if (typeof dataArr[i].children != ‘undefined‘ && $.isArray(dataArr[i].children)) {//如果有子集合121                         var tempArr = [];122                         for (var j = 0; j < pathArr.length; j++) {123                             if (j > 0)124                                 tempArr.push(pathArr[j]);125                         }126                         loopCheckAttr(dataArr[i].children, tempArr, checked);127                     }128                 } else {//如果已经找到路径的末点，并且点击的是非子叶节点则需要再往下更新数据                    129                     if (typeof dataArr[i].children != ‘undefined‘ && $.isArray(dataArr[i].children)) {130                         loopChildrenAttr(dataArr[i].children, checked);131                     }132                 }133                 break;134             }135         }136     };137     /****根据path获取点击节点的数据***/138     function getNodeByPath(dataArr, pathArr) {139         for (var i = 0, len = dataArr.length; i < len; ++i) {140             if (pathArr[0] == i) {//已经找到               141                 if (pathArr.length > 1) {//根据path往下搜寻到末节点142                     if (typeof dataArr[i].children != ‘undefined‘ && $.isArray(dataArr[i].children)) {143                         var tempArr = [];144                         for (var j = 0; j < pathArr.length; j++) {145                             if (j > 0)146                                 tempArr.push(pathArr[j]);147                         }148                         return getNodeByPath(dataArr[i].children, tempArr);149                     } 150                 } else {151                     return dataArr[i];152                 }153                 break;154             }155         }156     };157     /********根据path获取checked=true节点的数据***********/158     function getCheckedNodeByPath(dataArr, pathArr) {159         var res = [];160         if (pathArr.length ==1 && pathArr[0] == "") {161             $.each(dataArr, function (i, node) {162                 if (typeof node.children != ‘undefined‘ && $.isArray(node.children)) {163                     loopCheckedChildren(res, node.children);164                 } else {165                     if (node.checked)166                         res.push(node);167                 }168             });169         } else {170             var node = getNodeByPath(dataArr, pathArr);171             if (typeof node.children != ‘undefined‘ && $.isArray(node.children)) {172                 loopCheckedChildren(res, node.children);173             } else {174                 if (node.checked)175                     res.push(node);176             }177         }178         return res;179     };180     function loopCheckedChildren(res, nodes) {181         $.each(nodes, function (i,node) {182             if (typeof node.children != ‘undefined‘ && $.isArray(node.children)) {183                 loopCheckedChildren(res, node.children);184             } else {185                 if (node.checked)186                     res.push(node);187             }188         });189     };190     function loopChildrenAttr(children, checked) {191         $.each(children, function (j, node) {192             node.checked = checked;193             if (typeof node.children != ‘undefined‘ && $.isArray(node.children)) {194                 loopChildrenAttr(node.children, checked);195             }196         });197     };198     /****199     *复选框点击200     ****/201     function chkClick(e) {202         var t = $(this);203         var checked;204         var chkedString=‘true‘;205         var p = t.parent("div");206         if (t.hasClass("tree_chk_check_all"))//注意点击时，发现为选中状态的，将会变更为非选择状态207             chkedString = ‘false‘;208         modifyCheckAttr(p.attr("path"), chkedString);            209         if (p.attr("isleaf") == ‘true‘) {//子叶点击          210             if (t.hasClass("tree_chk_check_all")) {211                 checked = false;212                 p.attr("checkstate", "-1");213                 t.removeClass("tree_chk_check_all").addClass("tree_chk_uncheck");214             } else {215                 checked = true;216                 p.attr("checkstate", "1");217                 t.removeClass("tree_chk_uncheck").addClass("tree_chk_check_all");218             }219             loopCheckStyle(p.parent("li"), checked, 1);220         } else {221             var chkstate = p.attr("checkstate");222             if (chkstate == "1") {//如果是全选,在变为全取消223                 checked = false;224                 p.attr("checkstate", "-1");225                 p.attr("checkedcount", "0");226                 t.removeClass("tree_chk_check_all").addClass("tree_chk_uncheck");227                 //向下修改子节点228                 loopCheckChildStyle(p.next().children("li"), checked);229                 //向上修改父节点230                 if (p.attr("isroot")==‘false‘)231                     loopCheckStyle(p.parent("li"), checked, 1)232             } else {//变为全选状态233                 checked = true;234                 p.attr("checkstate", "1");235                 p.attr("checkedcount", p.attr("childcount"));236                 t.removeClass("tree_chk_uncheck").removeClass("tree_chk_check").addClass("tree_chk_check_all");237                 //向下修改子节点238                 loopCheckChildStyle(p.next().children("li"), checked);239                 //向上修改父节点240                 if (p.attr("isroot") == ‘false‘)241                     loopCheckStyle(p.parent("li"), checked, 1)242             } 243         }244         if (e && e.stopPropagation)245             e.stopPropagation();246         else247             window.event.cancelBubble = true;248     };249     function loopCheckChildStyle(childrens,checked) {250         $.each(childrens, function (i, node) {251             var $node = $(node).children("div");252             var chkIoc = $node.children(".tree_chk_ioc");253             if (checked) {254                 $node.attr("checkstate","1");255                 chkIoc.removeClass("tree_chk_uncheck").removeClass("tree_chk_check").addClass("tree_chk_check_all");256                 if ($node.attr("isleaf") == ‘false‘) {//非子叶节点257                     $node.attr("checkedcount", $node.attr("childcount"));258                     loopCheckChildStyle($node.next().children("li"), checked);259                 }260             } else {261                 $node.attr("checkstate", "-1");262                 chkIoc.removeClass("tree_chk_check_all").removeClass("tree_chk_check").addClass("tree_chk_uncheck");263                 if ($node.attr("isleaf") == ‘false‘) {//非子叶节点264                     $node.attr("checkedcount", "0");265                     loopCheckChildStyle($node.next().children("li"), checked);266                 }267             }           268         });269     }270     /***271    *递归check样式检查，并根据check状态修改图标样式272    *@param curLi 子叶项标签273    *@param checked 复选框 选中/不选中274    *@param count 加 减数量 275    ****/276     function loopCheckStyle(curLi, checked, count) {277         var p_ul = curLi.parent("ul");278         var titleObj = p_ul.prev();279         var fchkCount = parseInt(titleObj.attr(‘checkedcount‘));280         var fchildCount = parseInt(titleObj.attr(‘childcount‘));281         var fchkState = titleObj.attr(‘checkstate‘);282         var chkBoxDiv = titleObj.children(".chk_ioc");283         if (checked) {//如果是选中284             fchkCount = fchkCount + count;285             if (fchkCount > fchildCount)286                 fchkCount = fchildCount;287             titleObj.attr(‘checkedcount‘, fchkCount);288             // 修改父元素的 checkedcount checkstate 289             if (fchildCount == fchkCount) {290                 chkBoxDiv.removeClass("tree_chk_check");291                 chkBoxDiv.removeClass("tree_chk_uncheck");292                 chkBoxDiv.addClass("tree_chk_check_all");293                 titleObj.attr(‘checkstate‘, ‘1‘);294             } else {295                 chkBoxDiv.removeClass("tree_chk_uncheck");296                 chkBoxDiv.removeClass("tree_chk_check_all");297                 chkBoxDiv.addClass("tree_chk_check");298                 titleObj.attr(‘checkstate‘, ‘0‘);299             }300         } else {//取消选中301             fchkCount = fchkCount - count;302             if (fchkCount < 0)303                 fchkCount = 0;304             titleObj.attr(‘checkedcount‘, fchkCount);305             if (fchkCount == 0) {306                 titleObj.attr(‘checkstate‘, ‘-1‘);307                 chkBoxDiv.removeClass("tree_chk_check");308                 chkBoxDiv.removeClass("tree_chk_check_all");309                 chkBoxDiv.addClass("tree_chk_uncheck");310             } else {311                 chkBoxDiv.removeClass("tree_chk_uncheck");312                 chkBoxDiv.removeClass("tree_chk_check_all");313                 chkBoxDiv.addClass("tree_chk_check");314                 titleObj.attr(‘checkstate‘, ‘0‘);315             }316         } 317         //递归修改上一级父元素的状态318         if (titleObj.attr("isroot") == ‘false‘) {319             count = 0;320             if (titleObj.attr("checkstate") == "1" || titleObj.attr("checkstate") == "-1") {321                 count = 1;322             }323             loopCheckStyle(titleObj.parent("li"), checked, count);324         }        325     };326     /****327     *节点点击，展开/收起328     *****/329     function nodeClick(e) {330         var t = $(this);331         var p = t.parent("div");332         var ul = p.next();333         if (p.attr("isclose") == ‘false‘) {//收起334             p.children(".ioc_ioc").removeClass("tree_node_file_open").addClass("tree_node_file_close");//改变文件夹样式335             if (p.attr("isrootfirst") == ‘true‘ && p.attr("treedeep") == ‘1‘) {//如果是根节点336                 if (p.attr("islast")==‘true‘)337                     t.addClass("tree_collapsable_all");338                 else339                     t.addClass("tree_collapsable_down");340 341                 t.removeClass("tree_expandable_down");342             } else {343                 t.removeClass("tree_expandable_center");344                 if (p.attr("isrootlast") == ‘true‘ && p.attr("islast") == ‘true‘) {345                     if (p.attr("isfirst") == ‘true‘)346                         t.addClass("tree_collapsable_all");347                     else348                         t.addClass("tree_collapsable_up");349                 } else {350                     t.addClass("tree_collapsable_center");351                 }352             }353             if (p.attr("isrootlast") == ‘true‘ && p.attr("islast") == ‘true‘ && p.attr("islastf") == ‘true‘) {354                 p.children(".line_ioc").removeClass("tree_line_all").addClass("tree_line_up");355             }356             if (animate) {357                 ul.hide(300);358             } else {359                 ul.hide();360             }361             p.attr("isclose", ‘true‘);362         } else {//展开363             p.children(".ioc_ioc").removeClass("tree_node_file_close").addClass("tree_node_file_open");364             if (p.attr("isrootfirst") == ‘true‘ && p.attr("treedeep") == ‘1‘) {//如果是根节点365                 t.removeClass("tree_collapsable_down");366                 t.addClass("tree_expandable_down");367             } else {368                 if (p.attr("islast") == "true"){369                     t.removeClass("tree_collapsable_up");370                     t.prevAll().removeClass("tree_line_up").addClass("tree_line_all");371                 }                    372                 else373                     t.removeClass("tree_collapsable_center");374                 t.addClass("tree_expandable_center");375             }376             if (p.attr("isrootlast") == ‘true‘ && p.attr("islast") == ‘true‘ && p.attr("islastf") == ‘true‘) {377                 p.children(".line_ioc").removeClass("tree_line_up").addClass("tree_line_all");378             }379             if (animate) {380                 ul.show(300);381             } else {382                 ul.show();383             }384             p.attr("isclose", ‘false‘);385             if (lazy&&url!="") {386                 if (p.attr("childcount") == ‘0‘) {387                     var target = p.next("ul");388                     var loadingContaner = $("<li></li>").appendTo(target);389                     queryData("pid=" + p.attr("id"), loadingContaner, function (data) {390                         //将查询到的数据补充到treeDataObj，采用settimeout391                         setTimeout(function () {392                             var pathArr = p.attr("path").split("_");393                             //console.log("添加前数据=" + JSON.stringify(treeDataObj));394                             var findedNode = getNodeByPath(treeDataObj, pathArr);395                             findedNode.children = data;396                             //console.log("添加后数据=" + JSON.stringify(treeDataObj));397                         }, 0);398                         loadingContaner.remove();399                         p.attr("childcount", data.length);400                         var ctlData =http://www.mamicode.com/ {401                             isRoot: false,402                             path: p.attr("path") + "_",403                             pid: p.attr("id"),404                             isLastf: p.attr("islast")==‘true‘,405                             isFirstf: p.attr("isfirst") == ‘true‘,406                             isRootFirst: p.attr("isrootfirst") == ‘true‘,407                             isRootLast: p.attr("isrootlast") == ‘true‘408                         };409                         if (p.attr("isroot") == ‘true‘) {410                             ctlData.isRootFirst = ctlData.isFirstf;411                             ctlData.isRootLast = ctlData.isLastf;412                         }413                         loopInitCreate(data, parseInt(p.attr("treeDeep")) + 1, target, ctlData);414                     });415                 }             416             }417         }418         if (e && e.stopPropagation)419             e.stopPropagation();420         else421             window.event.cancelBubble = true;422     }423     /****424    *创建一个子节点425    *@param node 节点数据426    *@param target 节点目标容器427    *@param controlData 控制ui的数据428    *****/429     function createLeafNode(node, target, controlData) {430         /***********线样式***************/431         //根据树深度补充外围线 432         var lineCls = ‘‘, help = 1, fixLineDiv = ‘‘;433         if (controlData.isLast && controlData.isFirst && controlData.isRoot) {//只有一个子叶节点434             lineCls = "";435         } else {436             if (controlData.isLast && controlData.isRoot) {437                 lineCls = "tree_line_up";438             } else if (controlData.isFirst && controlData.isRoot) {439                 lineCls = "tree_line_down";440             } else {441                 if (controlData.isLast) {442                     lineCls = "tree_line_up";443                 } else {444                     lineCls = "tree_line_center";445                 }446             }447         }448         while (help <= controlData.treeDeep) {449             if (help == controlData.treeDeep) {//自身列450                 fixLineDiv = fixLineDiv + "<div class=\"tree_ioc_item tree_line_ioc " + lineCls + "\"></div>";451             } else {452                 fixLineDiv = fixLineDiv + "<div class=\"tree_ioc_item tree_line_ioc tree_line_all\"></div>";453             }454             help++;455         }456         /**************图标样式****************/457         var iconDiv = ‘‘;458         if (!isPlain) {//不是简单样式459             var iconCls = ‘tree_file_ioc tree_node_leaf‘;//默认的图标样式460             if (typeof node.iconCls == ‘string‘) {461                 iconCls = node.iconCls;462                 iconDiv = "<div style=\"background-position:0 2px;\" class=\"tree_ioc_item " + iconCls + "\"></div>";463             } else {464                 iconDiv = "<div class=\"tree_ioc_item " + iconCls + "\"></div>";465             }466         }467         /**************复选框样式***************/468         var chkBoxDiv = ‘‘, checkstate = ‘-1‘;469         if (checkbox) {470             var checked = node.checked;471             var chkCls = ‘tree_chk_uncheck‘;472             if (typeof checked == ‘boolean‘ && checked) {473                 chkCls = ‘tree_chk_check_all‘;474                 checkstate = ‘1‘;475             } else {476                 node.checked = false;//客户代码中没有checked，则补充上477             }478             chkBoxDiv = "<div class=‘tree_ioc_item tree_chk_ioc " + chkCls + "‘></div>";479         }480         var id = node[idField];481         var text = node[textField];482         var li_html = "<li class=\"tree_li\"><div treedeep=‘" + controlData.treeDeep + "‘ isfirstf=‘" + controlData.isFirstf + "‘ islastf=‘" + controlData.isLastf + "‘ isrootlast=‘" + controlData.isRootLast + "‘ isrootfirst=‘" + controlData.isRootFirst + "‘ path=‘" + controlData.path + "‘  checkstate=‘" + checkstate + "‘ pid=‘" + node.pid + "‘ isleaf=‘true‘ isLast=‘" + controlData.isLast + "‘ isfirst=‘" + controlData.isFirst + "‘ isroot=‘" + controlData.isRoot + "‘ treedeep=‘" + controlData.treeDeep + "‘ id=‘" + id + "‘ class=‘tree_ioc_wrap‘>" + fixLineDiv + iconDiv + chkBoxDiv + "<div class=‘tree_li_text‘>" + text + "</div></div></li>";483         var li = $(li_html).appendTo(target);484         var wrap = li.children("div");485         if (typeof treeOpts.onClick == ‘function‘) {486             wrap.bind(‘click‘, function () {487                var data = http://www.mamicode.com/getNodeByPath(treeDataObj,$(this).attr("path").split("_"));488                treeOpts.onClick(data);489             });490         }     491         if (checkbox) {492             var checked = node.checked;493             if (typeof checked == ‘boolean‘ && checked) {494                 loopCheckStyle(li, true, 1);495             }496             wrap.children(".tree_chk_ioc").bind(‘click‘, chkClick);497         }498         return li.children("div");499     };500 501     /****502    *循环递归创建一个父节点，这里肯定是子树503    *@param node 节点数据504    *@param target 节点目标容器505    *@param controlData 控制ui的数据506    *****/507     function loopCreateTree(nodef, target, controlData) {508         var treeJson = nodef.children;509         var iconDiv = "";510         var closed = false;511         if (typeof nodef.closed == ‘boolean‘)512             closed = nodef.closed;513         /************文件夹样式*****************/514         var lineCls, hideCls, help = 1, fixLineDiv = ‘‘, fixLineCls = ‘tree_line_all‘;515         if (closed) {//闭合状态516             hideCls = ‘display:none‘;517             if (controlData.isRoot && controlData.isFirst) {//根目录第一个节点            518                lineCls = ‘tree_collapsable_down‘;519             } else {520                 if (controlData.isFirst) {521                     lineCls = ‘tree_collapsable_down‘;522                 } else {523                     lineCls = ‘tree_collapsable_center‘;524                 }525             }526             //闭合状态下，要处理最后一个关闭节点的外围补充线样式问题527             if (controlData.isRootLast && controlData.isLast) {528                 fixLineCls = ‘tree_line_up‘;529                 lineCls = ‘tree_collapsable_up‘;530             }531         } else {//打开状态532             hideCls = ‘display:block‘;533             if (controlData.isRoot && controlData.isFirst) {//根目录第一个节点               534                 lineCls = ‘tree_expandable_down‘;             535             } else {536                 if (controlData.isFirst) {537                     lineCls = ‘tree_expandable_center‘;538                 } else {539                     lineCls = ‘tree_expandable_center‘;540                 }541             }542         }543         //根据树深度补充外围线            544         while (help <= controlData.treeDeep) {545             if (help == controlData.treeDeep) {546                 fixLineDiv = fixLineDiv + "<div class=\"node_ioc tree_ioc_item tree_line_ioc " + lineCls + "\"></div>"547             } else {548                 fixLineDiv = fixLineDiv + "<div class=\"line_ioc tree_ioc_item tree_line_ioc " + fixLineCls + "\"></div>";549             }550             help++;551         }552         /**************图标样式 *****************/553         if (!isPlain) {//不是简单样式554             var tmpCls;555             if (closed) {556                 tmpCls = "tree_node_file_close";557             } else {558                 tmpCls = "tree_node_file_open";559             }560             var iconCls = ‘tree_file_ioc ‘ + tmpCls;//默认的图标样式561             iconDiv = "<div class=\"ioc_ioc tree_ioc_item " + iconCls + "\"></div>";562         }563         /**************复选框******************/564         var chkBoxDiv = ‘‘;565         var checkstate = "-1"; //-1不选择，0部分选择，1全部选择566         var chkAll = false;567         if (checkbox) {568             var chkCls = ‘tree_chk_uncheck‘;569             chkBoxDiv = "<div class=‘chk_ioc tree_ioc_item tree_chk_ioc " + chkCls + "‘></div>";570             if (typeof nodef.checked == ‘boolean‘)571                 chkAll = nodef.checked;572         }573         var id = nodef[idField];574         var text = nodef[textField];575         var headHtml = "<div treedeep=‘" + controlData.treeDeep + "‘ isclose=‘" + closed + "‘ isfirstf=‘" + controlData.isFirstf + "‘ islastf=‘" + controlData.isLastf + "‘ isrootlast=‘" + controlData.isRootLast + "‘ isrootfirst=‘" + controlData.isRootFirst + "‘ path=‘" + controlData.path + "‘ checkstate=‘" + checkstate + "‘ checkedcount=‘0‘ childcount=‘" + treeJson.length + "‘ isleaf=‘false‘ pid=‘" + nodef.pid + "‘ islast=‘" + controlData.isLast + "‘ isfirst=‘" + controlData.isFirst + "‘ isroot=‘" + controlData.isRoot + "‘ treedeep=‘" + controlData.treeDeep + "‘ id=‘" + id + "‘ class=\"tree_ioc_wrap\">" + fixLineDiv + iconDiv + chkBoxDiv + "<div class=‘tree_li_text‘>" + text + "</div></div>";576         var headObj = $(headHtml).appendTo(target);577         if (typeof treeOpts.onClick == ‘function‘) {578             headObj.bind(‘click‘, function () {579                 var data = http://www.mamicode.com/getNodeByPath(treeDataObj,$(this).attr("path").split("_"));580                 treeOpts.onClick(data);581             });582         }  583         if (checkbox) {584             headObj.children(".chk_ioc").bind(‘click‘, chkClick);585         }586         headObj.children(".node_ioc").bind(‘click‘, nodeClick);587         var ul = $("<ul  style=‘" + hideCls + "‘></ul>").appendTo(target);588         var chkCount = 0;589         $.each(treeJson, function (i, node) {590             var children = node.children;591             node.pid = id;592             node.idx = i;593             var cdata = http://www.mamicode.com/{ //控制参数594                 isRoot: false,595                 isFirst: false,596                 isLast: false,597                 path: controlData.path + "_" + i,598                 isLeaf: false,599                 isLastf: false,600                 isFirstf: false,601                 treeDeep: controlData.treeDeep + 1,602                 isRootFirst: controlData.isRootFirst,603                 isRootLast: controlData.isRootLast604             };605             if (checkbox) {606                 if (chkAll)607                     node.checked = true;608                 if (node.checked)609                     chkCount++;610             }611             if (controlData.isLast)612                 cdata.isLastf = true;613             if (controlData.isFirst)614                 cdata.isFirstf = true;615             if (i == treeJson.length - 1)616                 cdata.isLast = true;617             if (i == 0)618                 cdata.isFirst = true;619             if (typeof children != ‘undefined‘ && $.isArray(children)) {620                 var li = $("<li class=\"tree_li\"></li>").appendTo(ul);621                 if (children.length == 0)622                     node.closed = true;623                 headObj = loopCreateTree(node, li, cdata);624             } else {625                 headObj = createLeafNode(node, ul, cdata);626             }627         });628         if (chkCount == treeJson.length)629             nodef.checked = true;630         else631             nodef.checked = false;632         return headObj;633     };634     /**********私有方法结束*******************/635     var methods = {636         init: function (options) {637             if ($.isArray(options)) {638                 options = {639                     data: options640                 };641             }642             return this.each(function () {643                 var $this = $(this);644                 var settings = $this.data(‘settings‘);645                 if (typeof (settings) == ‘undefined‘) {646                     settings = $.extend({}, $.fn.tree.defaults, options);647                     $this.data(‘settings‘, settings);648                 } else {649                     settings = $.extend({}, settings, options);650                 }651                 //创建ui布局652                 if (settings.url != ‘‘) {//远程请求数据653                     onl oadSuccess = settings.onLoadSuccess;654                     url = settings.url;655                     queryData(‘‘,$this, function (data) {656                         settings.data =http://www.mamicode.com/ data;657                         renderHtml($this);658                     });659                 } else {660                     renderHtml($this);661                 }               662                 if ($.myui.isDebug) {663                     $.myui.log("jQuery.tree init finish......");664                 }665             });666         },667         destroy: function (options) {668             return $(this).each(function () {669                 var $this = $(this);670                 $this.removeData(‘settings‘);671             });672         },673         /****674         *@params path 节点路径，path为空时则获取整个树所有checked状态的节点675         &@return 节点数组676         *****/677         getCheckNodes: function (path) {678             var pathArr = path.split(‘_‘);679             return getCheckedNodeByPath(treeDataObj, pathArr);680         }681     };682     /********************683     *组件的构造函数684     *********************/685     $.fn.tree = function () {686         var method = arguments[0];687         if (methods[method]) {688             method = methods[method];689             arguments = Array.prototype.slice.call(arguments, 1);690         } else if (typeof (method) == ‘object‘ || !method) {691             if ($.myui.isDebug) {692                 $.myui.log("jQuery.tree init.....");693             }694             method = methods.init;695         } else {696             $.error(‘Method ‘ + method + ‘ does not exist on jQuery.tree‘);697             return this;698         }699         return method.apply(this, arguments);700     };701     /********************702     *组件的默认配置值703     *********************/704     $.fn.tree.defaults = {705         textField: ‘text‘,//菜单名称字段，默认为text706         idField: ‘id‘,//菜单id字段,默认为id707         url: ‘‘,//远程加载数据地址708         lazy:false,//延时加载，当设置为true时，点击节点展开时，如果子元素为空则根据节点id发起请求加载子节点集合709         data: null,//树json数据    710         isPlain: false,//true 为简单无图标样式711         checkbox: false,//是否需要选择框712         animate: true,//是否需要动画713         onl oadSuccess: null,//加载成功714         onClick: null,//点击事件 715         isDrag: false,//是否可以拖拽调整节点716         onPreDrag: null,//拖拽前 未实现717         onDrag: null,//拖拽释放后未实现,718         contextMenu: false //右键菜单未实现719     };720 })(jQuery);

 


联系
我们