layer.open怎么给 eletree 子页设置选中的节点

提问 已结 8 185
橙562
橙562 2019-7-10
悬赏:20飞吻
版本:layui 2.+ 浏览器:
layer.open代码
        if(layEvent === 'edit'){ //编辑
var index = layer.open({
title : '角色修改',
type : 2,
maxmin: true,
area: ['800px', '800px'],
content : "/role/roleadd?permissionsIds="+data.permissionsIds,
success : function(layero, index){
var body = layer.getChildFrame('body', index);
body.find("#id").val(data.id);
body.find("#name").val(data.name);
body.find("#description").val(data.description);
// 获取子页面的iframe
var iframeWin = window[layero.find('iframe')[0]['name']];
//iframeWin.layui.eleTree.render();
if (data.permissionsIds) {
iframeWin.el.setChecked(data.permissionsIds.split(","),true);
} else {
iframeWin.el.setChecked([],true);
}
body.find("#butt").text('立即修改');
//form.render();
setTimeout(function(){
layui.layer.tips('点击此处返回角色列表', '.layui-layer-setwin .layui-layer-close', {
tips: 3
});
},500)
}
})
layer.full(index);

}
子页代码
var el;
layui.use(['form','layer','jquery','eleTree'],function () {
var form = layui.form;
var layer = layui.layer;
var $=layui.jquery;
var eleTree=layui.eleTree;


el = eleTree.render({
elem: '.menu-tree'
,url: '/PermissionsController/tree'
,method: 'post'
,contentType: 'application/json'
,headers:{Authorization:JSON.parse(sessionStorage.getItem('token'))}
,response: {
statusName: 'code' //规定数据状态的字段名称,默认:code
,statusCode: "BAS100001" //规定成功的状态码,默认:0
,dataName: 'body'
}
,request: { // 对后台返回的数据格式重新定义
name: "name",
key: "id",
children: "children"
}
,done: function(res){
//console.log(res.body);
return{
"body": res.body, //解析数据列表
"code": res.code //解析接口状态
}
}
,showCheckbox: true //节点是否可被选择
,accordion: true //是否每次只打开一个同级树节点展开(手风琴效果)
,highlightCurrent: true //是否高亮当前选中节点,默认值是 false
})
前端问题页面,请多多指教,大神们[心]
回帖
  • @橙562 其实你先看函数有没有执行,再在渲染的时候打印你的array是有没有值的?我不知道这里是先调用你的全局函数,还是先进行渲染,这里有几个办法,一个是你把layui.use那些函数全放到全局函数里面,那这样,你的defaultCheckedKeys就可以直接使用传过来的childata,还有一个是你把参数拼接在url后面,这样你子页面可以获取url上的值的,如果是jsp页面,也可以叫后端帮你,在子页面给一个返回值
    0 回复
  • 有个defaultCheckedKeys参数,默认选中节点,把所选项的key值传过去,子页面render的时候配置上就好了
    0 回复
  • 橙562
    2019-7-10
    太上老君急急如玉令,大神出现。。。。。。[抱抱]
    0 回复
  • 橙562
    2019-7-10
    @半桶水搬砖工 有demo吗
    0 回复
  • 橙562
    2019-7-10
    @半桶水搬砖工 再写一会不行,我就要把两个页面写在一个页面了。。
    0 回复
  • @橙562 可以的,你先在子页面固定写个defaultCheckedKeys,写几个固定的key,也就是你的选项的id,然后你看看会不会选中,如果会,在考虑这个值变成是动态的,也就是父页面传过来的
    0 回复
  • 橙562
    2019-7-10
    @半桶水搬砖工 大神请教一下,网上的传值方法是将值传给子页面的全局函数,那layui.use里面怎么使用这个值勒,
    子页代码
    var array;
    function childper(childata) {
    //console.log("childata===>>", childata)
    array=childata
    }

    var el;
    layui.use(['form','layer','jquery','eleTree'],function () {
    var form = layui.form;
    var layer = layui.layer;
    var $=layui.jquery;
    var eleTree=layui.eleTree;

    childper();
    console.log("array=>",array)

    el = eleTree.render({
    elem: '.menu-tree'
    ,url: '/PermissionsController/tree'
    ,method: 'post'
    ,contentType: 'application/json'
    ,headers:{Authorization:JSON.parse(sessionStorage.getItem('token'))}
    ,response: {
    statusName: 'code' //规定数据状态的字段名称,默认:code
    ,statusCode: "BAS100001" //规定成功的状态码,默认:0
    ,dataName: 'body'
    }
    ,request: { // 对后台返回的数据格式重新定义
    name: "name",
    key: "id",
    children: "children"
    }
    ,done: function(res){
    //console.log(res.body);
    return{
    "body": res.body, //解析数据列表
    "code": res.code //解析接口状态
    }
    }
    ,showCheckbox: true //节点是否可被选择
    ,accordion: true //是否每次只打开一个同级树节点展开(手风琴效果)
    ,highlightCurrent: true //是否高亮当前选中节点,默认值是 false
    //,defaultExpandAll: true //是否默认展开所有节点
    ,defaultCheckedKeys: childper() // 默认勾选的节点的 key 的数组
    ,renderAfterExpand: false // 是否在第一次展开某个树节点后才渲染其子节点
    ,checkStrictly: true // 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false

    })
    父页代码
      // 获取子页面的iframe
    var iframeWin = window[layero.find('iframe')[0]['name']];
    /*if (data.permissionsIds) {
    iframeWin.el.setChecked(data.permissionsIds.split(","),true);
    } else {
    iframeWin.el.setChecked([],true);
    }*/

    var iframe = window['layui-layer-iframe'+index];
    //调用子页面的全局函数
    iframe.childper(data.permissionsIds.split(","))
    body.find("#butt").text('立即修改');
    0 回复
  • 橙562
    2019-7-10
    @半桶水搬砖工 谢谢啦,把layui.use放在全局函数下可以实现效果了,我之前想layui.use里面调用外部的函数,可是没成功,后面几个方法就不试了,我就是后端,每次前端都要写一天。。。[嘻嘻]
    0 回复