提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

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

zchzch 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2017-11-30 17:55:11 | 显示全部楼层 |取消关注该作者的回复
      背景:
          项目中,由A页面跳转到帆软报表页面,A页面有查询条件,需要在帆软报表页面实现自动赋值,其中包括树形结构的选中效果(包括多选,根节点的选中等)。

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

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

  实现效果图:
请求链接:
http://localhost:8075/WebReport/ReportServlet?reportlet=WorkBook3008.cpt&&cityids=1
222695a1fd1b001ed9.png
http://localhost:8075/WebReport/ReportServlet?reportlet=WorkBook3008.cpt&&cityids=11,13
170335a1fd205f1c00.png

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

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


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


  具体实现代码 :在参数初始化后:
821395a1fd45f1bcea.png
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  
258615a1fd3eb93b25.png

WorkBook3008.cpt

6.69 KB, 下载次数: 23

售价: 5 个F豆  [记录]

下拉选中效果实现

点评

论坛委员会成员评:本帖在适用性和复用程度上还是稍微差点,另外也需要实施人员有较高的js基础,期待楼主出更多通用js实例。  发表于 2017-12-13 14:30

评分

参与人数 1F币 +25 收起 理由
兔子酱 + 25 感谢参与精华帖奖励计划~~

查看全部评分

此帖共有 247 位番薯登录后查看
回复

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2017-12-13 14:24:06 | 显示全部楼层 |取消关注该作者的回复
根据帆软论坛运营委员最终评分,本篇帖子综合得分25分,具体参见:帆软论坛精华帖奖励计划
恭喜@zchzch,同时也希望更多的番薯积极参与精华帖奖励计划!
  收起(2)
  • zchzch zchzch : 再接再厉!
    2017-12-13 14:59 评论
  • 橙子君 橙子君 : 回复 zchzch :
    2017-12-13 14:59 评论
  • 评论

回复 支持 反对

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2017-11-30 18:22:19 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2017-11-30 18:23:32 | 显示全部楼层 |取消关注该作者的回复
已提名精华帖,待论坛运营委员会评分后可评为精华帖。帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2017-11-30 19:49:23 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

flyingsnake 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2017-11-30 20:09:31 | 显示全部楼层 |取消关注该作者的回复
棒棒的。楼主辛苦。
  • 评论

回复 支持 反对

使用道具 举报

snake9003 帆软员工 互助新人、助理编辑
发表于 2017-12-1 09:34:50 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

萧静元 社区微信达人 初学乍练(Lv1)
发表于 2017-12-1 10:01:07 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

yutingxtz 番薯互助团队 互助新人
发表于 2017-12-1 10:19:57 | 显示全部楼层 |取消关注该作者的回复
才5个豆!!!

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


编辑于 2017-12-1 10:27  
  收起(1)
  • zchzch zchzch :   对,通过参数传递到当前报表页面,可以实现选中的效果。
    2017-12-01 11:45 评论
  • 评论

回复 支持 反对

使用道具 举报

孤陌 社区微信达人番薯互助团队 互助叫兽
发表于 2017-12-1 10:59:48 | 显示全部楼层 |取消关注该作者的回复
楼主辛苦了
  • 评论

回复 支持 反对

使用道具 举报

zsh331 实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2017-12-1 13:18:06 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

小龙 社区微信达人番薯互助团队 互助新人
发表于 2017-12-1 14:48:44 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

异体 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2017-12-4 08:10:11 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

zfr 实名认证 渐入佳境(Lv2)
发表于 2017-12-4 08:52:59 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

lideqiang 社区微信达人实名认证 帆软员工 初学乍练(Lv1)
发表于 2017-12-7 22:06:47 | 显示全部楼层 |取消关注该作者的回复
66666666
  • 评论

回复 支持 反对

使用道具 举报

zxj523 实名认证 渐入佳境(Lv2)
发表于 2017-12-14 11:31:38 | 显示全部楼层 |取消关注该作者的回复
不明觉厉~
  • 评论

回复 支持 反对

使用道具 举报

葛智 实名认证 番薯互助团队 文档共创团队 浪迹天涯(Lv4)
发表于 2017-12-21 08:57:47 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

夜梦碎  渐入佳境(Lv2)
发表于 2018-2-1 10:15:29 | 显示全部楼层 |取消关注该作者的回复
默认的值如果是多选的话,如132,133这种情况下怎么办,这个我试了,单选的情况下如132可以选中,但是132,133这样子就没有效果了,这种需要怎么处理
  • 评论

回复 支持 反对

使用道具 举报

zchzch 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2018-2-1 11:38:34 | 显示全部楼层 |取消关注该作者的回复
夜梦碎 发表于 2018-2-1 10:15
默认的值如果是多选的话,如132,133这种情况下怎么办,这个我试了,单选的情况下如132可以选中,但是132,13 ...

你的模板导出来发一份看看,看你具体怎么写的js的
  • 评论

回复 支持 反对

使用道具 举报

夜梦碎  渐入佳境(Lv2)
发表于 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  

WorkBook3008.cpt

12.64 KB, 下载次数: 7

  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

联系管理员@兔子酱|联系帆软|免责声明|手机版|帆软社区|Copyright © 帆软软件有限公司 ( 苏ICP备14031611号-3 )

GMT+8, 2018-12-10 08:20 , Processed in 1.182633 second(s), 214 queries , Gzip On.

返回顶部 返回列表