前段时间学习了layui，收获了一些心得，这里主要列举我用到的树形图和数据表格组件的使用
<div id="test5" class="demo-tree"></div>
1.首先在页面上构建一个tree的div,做为树形图的容器组件，必须指定一个id. 接下来，是数据的渲染，这里只介绍接口数据的渲染，静态数据的渲染，官方文档已经有详细的示例了
1.1请求数据
2.1渲染数据
$http({
method: 'POST',
data: {},
url: "/activiti-server/api/atv/tree"
}).success(function (data) {
// debugger
data1 = data.data;
console.log("树状图数据", data1)//这里是渲染的数据
//layui的dom元素初始化，初始tree模块
layui.use(['tree', 'util'], function () {
var tree = layui.tree
// var checkData = tree.getChecked('demoId1')
// console.log("节点数据",checkData)
, layer = layui.layer
, util = layui.util
//树状图渲染模块
tree.render({
elem: '#test5'
, data: data1
//开启复选框
, showCheckbox: true,
onlyIconControl: true
, oncheck: function (obj) {
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.checked);//是否选中该节点是布尔值 //得到当前节点的展开状态：open、close、normal
console.log(obj.elem);
2.数据表格的构建和渲染
<table id="demo" lay-filter="test" style="margin-top: 100px;"></table>
与tree的使用相同，首先在页面构建一个table容器，作为表格数据容器，在使用过程中普通的表格没出现什么问题，在使用复选框时，出现了选中所有复选框，数据为空的bug.我们先看渲染的代码吧
1.初始化table
layui.use('table', function () {
var table = layui.table;
var checkStatus = table.checkStatus('demo')
dataAll = checkStatus.data;
//因为我这里是post请求，所以使用如下方法请求的数据
table.render({
elem: '#demo',
url: "api/atv/selectUseAllByDeptId ",
parseData: function (res) { //res 即为原始返回的数据
return {
"code": res.status,//code是返回的状态吗
"count": res.data.rows.totalRows, //解析数据长度
"data": res.data.rows.list //解析数据列表
};
},
method: 'post',
dataType: "json",
//where是请求的参数
where: {
"deptId": {}
}
, cols: [[
//因为我这里需要复选框，所以type为checkbox
{type: 'checkbox'}
// , {field: '', width: 80, title: 'ID', sort: true}
, {field: 'username', width: 80, title: '用户名'}
, {field: 'phone', width: 116, title: '电话'}
, {field: 'email', width: 177, title: '邮箱'}
, {field: 'deptName', title: '部门', width: 118}
, {field: 'createTime', width: 80, title: '创建日期', width: 136}
]],
//page为true,开启分页
page: true,
});
3.刚才提到了，勾选全部数据时，数组数据为空，可以采用如下解决方式
table.on('checkbox(test)', function (obj) {
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
console.log(obj)
//obj.type=="one",则为选中一个数据
if (obj.type == "one" && obj.checked == true) {
var ele = {username: obj.data.username, id: obj.data.id}
console.log("ele", ele);
var ele1 = {departname: obj.data.deptName, deptId: obj.data.deptId}
usernames.push(ele);
console.log("usernames", usernames);
departments.push(ele1);
console.log("departments", departments);
//obj.type=="all",则是勾选所有表格所有数据
} else if (obj.type == "all") {
console.log(obj.checked, '选中')
console.log("选中得到长度：", obj.data.length)
if (obj.checked == true) {
//全选
console.log("全选数据", dataAll)
var checkStatus = table.checkStatus("demo")
console.log("checkStatus:", checkStatus)
//checkStatus.data为全选的所有数据
for(let i=0;i<checkStatus.data.length;i++){
var ele = {};
var ele1={};
ele.username=checkStatus.data[i].username;
ele1.department =checkStatus.data[i].deptName;
ele1.deptId=checkStatus.data[i].deptId;
ele.id= checkStatus.data[i].id;
usernames.push(ele);
departments.push(ele1)
}
console.log("222333344",usernames);
console.log("222366666344",departments);
// usernames.push(obj.data.username);
// departments.push(obj.data.deptName)
} else {
//全不选则清空数组
usernames = [];
departments = [];
}
} else {
if (usernames.length > 0) {
console.log("数组中的值是：",usernames)
console.log("数组中的值是：",obj.data.id)
for(var i=0;i<=usernames.length-1;i++){
// console.log("usernames.indexOf(obj.data.username)===",usernames[i].id==obj.data.id)
if (usernames[i].id==obj.data.id) {
usernames.splice(0, 1)
}
}
}
if (departments.length > 0) {
for(var j=0;j<=departments.length-1;j++){
if(departments[j].deptId==obj.data.deptId){
departments.splice(0,1);
}
}
}
}
console.log("数组中的用户名：", usernames);
console.log("数组中的部门名:", departments);
});
当时，在选中所有数据时，数组一直没有值，就找了好多方法，还是大神帮我解决的。希望这篇文章能帮到更多的人。
