LAYUI树形组件应用实例，二级联

Chelsey.Wang

本帖最后由 lovert 于 2021-9-6 12:16 编辑

image.png307954711.png

记得给单元格添加一个强制滚动样式，不然页面就是变化的

.h{
overflow:scroll !important;
}

复制代码

在页面加载命令里添加以下JS

/*接口Forguncy.getTableDataByOData(参数1,参数2,参数3），参数1是OData公式获得的数据库数据，是已数组的方式存，参数2是数据获取成功后要执行的函数，这里在function(data){函数内容根据需要写，我这里是写的是加载LAYUI组件的代码}，参数3是获取数据库失败的函数，这里我没做改变使用系统的*/
Forguncy.getTableDataByOData("设备?$select=放置地点,设备名称及编号&$orderby=放置地点 asc",
//获取成功的情况
function(data){//开始
var layuidata=new Array();
outerloop: for(i=0;i<data.length;i++)
{
var fangzhi=data[i]["放置地点"];
var data2=new Array();
innerloop:
for(i=i;i<data.length;i++){
if(data[i]["放置地点"]==fangzhi){
a='{"title":"erji","id":"erji"}';
a=a.replaceAll("erji",data[i]["设备名称及编号"]);
data2.push(a);
}
else{i=i-1;break innerloop;}
}
var b='{"title": "yiji","children":[erji],"id":"yiji"}';
b=b.replaceAll("yiji",fangzhi);
b=b.replaceAll("erji",data2);
layuidata.push(JSON.parse(b));
}
layui.use('tree', function(){
var tree = layui.tree;
var xuanzhong=new Array();
//渲染
var inst1 = tree.render({
elem: $('[fgcname="shuxing"]')[0] //绑定元素
,showCheckbox:true
,data:layuidata
,id: 'demoId'
,oncheck: function(obj){
var checkedData = tree.getChecked('demoId'); //获取选中节点的数据
datak=new Array();
for(i=0;i<checkedData.length;i++){
for(k=0;k<checkedData[i].children.length;k++)
{
datak.push(checkedData[i].children[k].title);
}
console.log(datak.toString());
Forguncy.Page.getCell("zhi").setValue(datak.toString());
}
}
});
});
},// 结束，获取失败的情况
function(errorMessage){
alert(errorMessage);
}
);