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

楼主
我是社区第93017位番薯,欢迎点我头像关注我哦~
      背景:
          项目中,由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的名字,这个名字不能保证以后帆软是否会改变,按道理来说是不会变的。

详情请参照附件模板:
编辑于 2017-11-30 17:55  
分享扩散:
参与人数 +1 F币 +25 理由
兔子酱 + 25 感谢参与精华帖奖励计划~~

查看全部评分

来自 15#
发表于 2017-12-13 14:24:06
根据帆软论坛运营委员最终评分,本篇帖子综合得分25分,具体参见:帆软论坛精华帖奖励计划
恭喜@zchzch,同时也希望更多的番薯积极参与精华帖奖励计划!
沙发
发表于 2017-11-30 18:22:19
板凳
发表于 2017-11-30 18:23:32
已提名精华帖,待论坛运营委员会评分后可评为精华帖。帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
地板
发表于 2017-11-30 19:49:23
5楼
发表于 2017-11-30 20:09:31
棒棒的。楼主辛苦。
6楼
发表于 2017-12-1 09:34:50
7楼
发表于 2017-12-1 10:01:07
8楼
发表于 2017-12-1 10:19:57
才5个豆!!!

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


编辑于 2017-12-1 10:27  
9楼
发表于 2017-12-1 10:59:48
楼主辛苦了
10楼
发表于 2017-12-1 13:18:06
11楼
发表于 2017-12-1 14:48:44
12楼
发表于 2017-12-4 08:10:11
13楼
发表于 2017-12-4 08:52:59
14楼
发表于 2017-12-7 22:06:47
66666666
16楼
发表于 2017-12-14 11:31:38
不明觉厉~
17楼
发表于 2017-12-21 08:57:47
18楼
发表于 2018-2-1 10:15:29
默认的值如果是多选的话,如132,133这种情况下怎么办,这个我试了,单选的情况下如132可以选中,但是132,133这样子就没有效果了,这种需要怎么处理
19楼
发表于 2018-2-1 11:38:34
夜梦碎 发表于 2018-2-1 10:15
默认的值如果是多选的话,如132,133这种情况下怎么办,这个我试了,单选的情况下如132可以选中,但是132,13 ...

你的模板导出来发一份看看,看你具体怎么写的js的
20楼
发表于 2018-2-1 13:28:30
zchzch 发表于 2018-2-1 11:38
你的模板导出来发一份看看,看你具体怎么写的js的

如果下拉树控件是设置在主页面,而不是参数界面,允许多选的
sql查询出来的值为子节点的值。如112,113这样子;页面初始化后,怎么才能使数据多选的数据在控件里面选中,
那个参数界面的下拉树默认值,我试了,只输入112是可以选中的,输入112,113不行;输入1,11,112;1,11,113这样子可以选中
编辑于 2018-2-1 13:31  
21楼
发表于 2018-5-24 17:34:16
不管怎样支持一下
22楼
发表于 2023-12-26 14:30:53
23楼
发表于 2024-7-3 18:51:17
学习学习
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

26回帖数 2关注人数 14510浏览人数
最后回复于:2024-7-3 18:51

返回顶部 返回列表