树形结构，js实现选中效果

      背景：
          项目中，由A页面跳转到帆软报表页面，A页面有查询条件，需要在帆软报表页面实现自动赋值，其中包括树形结构的选中效果（包括多选，根节点的选中等）。

    咨询了帆软技术给出的回复是不支持，不能实现，需要自己去实现，在论坛发帖了，给出的回复也是需要自己去实现这个需求或者用其他的控件（Ztree）。

由于帆软在初始化页面后，树形结构的数据我们可以自己获取到，有了数据，一切都是由你自己去掌控。
       在研究了一段时间后，实现了一个简单的选中效果。

  实现效果图：
请求链接：
http://localhost:8075/WebReport/ReportServlet?reportlet=WorkBook3008.cpt&&cityids=1

http://localhost:8075/WebReport/ReportServlet?reportlet=WorkBook3008.cpt&&cityids=11,13


http://localhost:8075/WebReport/ReportServlet?reportlet=WorkBook3008.cpt&&cityids=111,154,162


注意事项：
   由于当前页面只有一个树形结构，如果存在多个的情况，代码还需要去获取对应的树形的前缀id


树形结构图：

由于树形结构的id，父id 都是固定，不可能在一颗树形结构有多个相同的id
在传入参数的时候，只需要传入你当前的id就可以选中，比如1 代表总部，11 代表人力资源，111 代表部长
  如果要选中所有的，直接传入参数1 ok了，如果需要选中人力资源传入11 就ok了
不需要像以前把当前id的父类id一起发送过去。


  具体实现代码 ：在参数初始化后：

setTimeout(function(){
_g().parameterEl.name_widgets.CITYID._setItems();
var kvMap ={};
//获取属性结构的初始数据
var data = _g().parameterEl.name_widgets.CITYID.options.data.getData();
function getData(data){
for(var index=0;index<data.length;index++){
        //获取第一个树形结构的id
        var tmpid = $($("div[id^=bbtree]")[0]).attr("id");
        var currentData = data[index];
        //触发+选项的click事件
        if($("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-plus').length>0){
                $("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-plus')[0].click();
        }
        if($("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-end-plus').length>0){
                $("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-end-plus')[0].click()        ;
        }
        
        kvMap[currentData.getValue()]={id:currentData.data.id,text:currentData.data.text};
        if(currentData.childrenNodes.length>0){
                //递归查找
                getData(currentData.childrenNodes);
        }
        //触发-选项的click事件
        if($("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-minus').length>0){
                $("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-minus')[0].click()
        }
        
        if($("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-end-minus').length>0){
                $("#"+tmpid+'_'+currentData.data.id).find('.fr-tree-elbow-end-minus')[0].click();
        }


}
}
getData(data);
$("li[class=fr-tree-node]").css({display:'block'});
//对传入的参数（树形结构中的其中一个节点或者多个节点，以逗号分割）进行点击事件
if(cityid!=null && cityid!=''){
var cityids = cityid.split(',');
for(var i=0;i<cityids.length;i++){
        var id = kvMap[cityids].id;
        //触发选中事件
        var imgid = $($("div[id^=bbtree]")[0]).attr("id")+'_'+id+'_cb';
        $("#"+imgid).click();
}
}

});

这只是一种实现方式，项目中还是建议三思，因为涉及到了各种class的名字，这个名字不能保证以后帆软是否会改变，按道理来说是不会变的。

详情请参照附件模板：

根据帆软论坛运营委员最终评分，本篇帖子综合得分25分，具体参见：帆软论坛精华帖奖励计划
恭喜@zchzch，同时也希望更多的番薯积极参与精华帖奖励计划！

已提名精华帖，待论坛运营委员会评分后可评为精华帖。帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html

棒棒的。楼主辛苦。

才5个豆！！！

但是，还是没看明白，这是解决了什么问题呢？！ 啥叫“选中效果”？是控件自动赋值的意思嘛？

楼主辛苦了

66666666

不明觉厉~

默认的值如果是多选的话，如132,133这种情况下怎么办，这个我试了，单选的情况下如132可以选中，但是132,133这样子就没有效果了，这种需要怎么处理

夜梦碎 发表于 2018-2-1 10:15
默认的值如果是多选的话，如132,133这种情况下怎么办，这个我试了，单选的情况下如132可以选中，但是132,13 ...

你的模板导出来发一份看看，看你具体怎么写的js的

zchzch 发表于 2018-2-1 11:38
你的模板导出来发一份看看，看你具体怎么写的js的

如果下拉树控件是设置在主页面，而不是参数界面，允许多选的
sql查询出来的值为子节点的值。如112,113这样子；页面初始化后，怎么才能使数据多选的数据在控件里面选中，
那个参数界面的下拉树默认值，我试了，只输入112是可以选中的，输入112,113不行；输入1，11，112；1，11,113这样子可以选中