-----------------------------初始化选中某一个节点,这时候会变颜色---------------------------------------------------------------- $(function(){ $("#categoryTree").dynatree({ persist: true, cookie: {path: '/'}, checkbox: false, //有没有checkbox,有checkbox可以多选。如果非多选就false autoFocus: true, selectMode: 1, // 1:single, 2:multi, 3:multi-hier 不想级联被选中就用1 clickFolderMode: 1, // 1:activate, 2:expand, 3:activate and expand onClick: function(dtnode, event) { }, onFocus: function(dtnode) { }, onSelect: function(flag, dtnode) { dtnode.expand(true); //当被选中的时候展开子节点,这样才能初始化选中某个节点的时候被展开父节点. //以下处理的是当选中与取消的时候 提交选中值的操作. var oldSelects = $("#selectedItem").attr("value"); var preFix = ","; if (flag) { //选中 var oldSelects = $("#selectedItem").attr("value"); if (oldSelects == "") { preFix = ""; } var oldSelects = oldSelects+preFix+dtnode.data.code $("#selectedItem").attr("value",oldSelects); } else { //取消 if (oldSelects != "") { var olds = oldSelects.split(preFix); for ( i = 0; i < olds.length; i++) { if (olds [i] == dtnode.data.code) { olds.splice(i,1); //去掉arr数组中的该项内容 //break;有可能会操作为选两次,因此不跳出循环. } } $("#selectedItem").attr("value",olds.join(",")); } } }, onPostInit: function(isReloading, isError, dtnode) { //当想初始化某一项被选中时就用此项。 $("#categoryTree").dynatree("getTree").visit(function(dtnode){ //没有根节点时就这样用,如果有根节点就直接this.tnRoott即可取到根节点,然后visit(遍历所有节点)即可. if( dtnode.data.code=="ZONE_D130100") { //初始化选中某个节点. dtnode.select(true); //被选中 dtnode.focus(true); //置为当前焦点,如果有多个会,由于会重复置焦点,最后会聚焦到最后被循环到那个. }; /*if( dtnode.data.code=="ZONE_D130100") { dtnode.select(true); dtnode.focus(true); };*/ }); /*var selects = $("#categoryTree").dynatree("getTree").getSelectedNodes(); for (i = 0; i< selects.length;i++) { if (selects[i].parent.data.key =="root") { //当没有根节点时,一级节点取父节点是这种形式。 alert(selects[i]); } }*/ this.reactivate(); //默认是从cookie中取数据,此时不从cookie中取。 } }); }); 可能会有人说 文档上说 可以根据key来直接选中某个节点啊,不用去循环的。但是注意这个key是他自己默认的以_开头从1开始排列的。比如:_60,但你没办法知道你要选中的节点的key,除非如上遍历。 $("#tree").dynatree("getTree").selectKey("1234"); //注意对于有checkbox的要想初始化选中某些节点,必须要用这样的。select = true,或者select(true)这种是没有效果的。-------------------------------初始化的时候,模拟click事件,字体颜色不变,但是被选中-------------------------------------- 官方文档上写的很清楚 click事件是 generate focus, expand, activate, select events. 所以click事件是比红色的字体都要复杂的事件。因此也就有了上面被选中的时候,字体改变的select事件。 $(function(){ $("#categoryTree").dynatree({ persist: true, cookie: {path: '/'}, checkbox: false, autoFocus: true, selectMode: 1, // 1:single, 2:multi, 3:multi-hier clickFolderMode: 1, // 1:activate, 2:expand, 3:activate and expand onClick: function(dtnode, event) { dtnode.expand(true); $("#selectedItem").attr("value",dtnode.data.code); }, onPostInit: function(isReloading, isError, dtnode) { $("#categoryTree").dynatree("getTree").visit(function(dtnode){ if( dtnode.data.code=="ZONE_D130100") { dtnode.focus(true); dtnode.onClick("click"); //用来模拟click事件,初始化完毕后,该节点就有被click的效果. }; }); this.reactivate(); } }); }); 原始数据部分如下 <div id="categoryTree" style="height: 30%; overflow: auto"> <ul style='display:none;'> <li data="code:'ZONE_D81', name:'香港特别行政区'">香港特别行政区</li> <li data="code:'ZONE_D13', name:'河北省'" class='folder'>河北省 <ul style='display:none;'> <li data="code:'ZONE_D130100', name:'石家庄市'">石家庄市</li> <li data="code:'ZONE_D130200', name:'唐山市'">唐山市</li> 。。。 </ul></li> 。。。。。 官方文档:http://www./c_media/modules/dynatree/doc/dynatree-doc.html#h7.4.2 |
|
来自: root_gao > 《dynatree》