项目需求：集团子公司及其员工信息，左侧Ztree,右侧表格展示数据，分页用的layui分页 ,icon图标自定义，更改zTree文件夹下的雪碧图，
找到icon对应的css位置，进行修改即可
html
<body>
<div class="user_list">
<!-- 主体 -->
<div class="main">
<div class="main_left">
<div class="main_left_title">
<span>通讯录</span>
<i class="iconfont iconarrow-left"></i>
</div>
<div class="tree_wrap">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<div class="main_right">
<div class="table_wrap">
<table class="table table-hover table-striped">
<thead class="tb_thead">
<tr>
<th class="name">姓名</th>
<th class="phone">电话</th>
<th class="email">邮箱</th>
<th class="tel">办公室电话</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="pagination" class="pagination" style="padding-bottom: 20px;text-align: center;"></div>
</div>
</div>
</div>css
<style>
body,
html {
width: 100%;
height: 100%;
background: #f3f3f3;
}
/* 主要内容区域 */
.main {
width: 80%;
margin: 34px auto;
zoom: 1;
background: #f3f3f3;
}
.main:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 左侧 */
.main_left {
width: 28%;
float: left;
}
.main_left_title {
width: 100%;
height: 54px;
background: #afddf7;
line-height: 54px;
text-align: right;
padding-right: 25px;
color: #1d51a7;
}
.main_left_title span {
font-size: 18px;
}
.main_left_title .iconfont {
margin-left: 50px;
}
.main_left .tree_wrap {
width: 100%;
background: #f9f9f9;
/* padding-left: 8.5%; */
padding-top: 8.5%;
padding-bottom: 8.5%;
overflow-x: scroll;
/* -ms-overflow-style: none;
scrollbar-width: none; */
min-height: 537px;
}
/* 右侧 */
.main_right {
float: right;
width: 70%;
}
.table_wrap{
min-height: 591px;
background: #f9f9f9;
}
.table{
width: 100%;
}
.table thead {
background: #dfdfdf;
}
.table>thead>tr>th {
padding: 0;
height: 54px;
line-height: 54px;
text-align: center;
}
.table>tbody>tr>td {
text-align: center;
padding: 0;
line-height: 66px;
}
/* 分页 */
.pagination{
display: block;
}
.layui-laypage a{
margin:0 5px;
border-radius: 5px;
}
.layui-laypage span{
margin:0;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em{
border-radius: 5px;
}
.layui-laypage .layui-laypage-spr{
margin:0 5px;
}
.layui-laypage .layui-laypage-curr{
margin:0 5px;
}
.tb_thead .name{
width: 13%;
}
.tb_thead .phone{
width: 25%;
}
.tb_thead .email{
width: 42%;
}
.tb_thead .tel{
width: 20%;
}
</style>js
<script>
$(function () {
//文件树
var settings = {
view: {
dblClickExpand: false,
showLine: true
},
data: {
simpleData: {
enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
// idKey: "id", //节点数据中保存唯一标识的属性名称
// pIdKey: "parentId", //节点数据中保存其父节点唯一标识的属性名称
// rootPId: -1 //用于修正根节点父节点数据，即 pIdKey 指定的属性值
},
key: {
name: "name" //zTree 节点数据保存节点名称的属性名称 默认值："name"
}
},
callback: {
onClick: onClick
}
};
//数据
var zNodes = [
{id: 1,pId: 0,name: "XX集团",open: true},
{id: 11,pId: 1,name: "XX有限公司",open: true},
{id: 111,pId: 11,name: "XX股份有限公司"},
{id: 112,pId: 11,name: "XX有限公司"},
{id: 113,pId: 11,name: "XX集团有限公司",open: true},
{id: 1131,pId: 113,name: "XX有限公司"},
{id: 114,pId: 11,name: "XX集团有限公司"},
{id: 1141,pId: 114,name: "XX集团有限公司"},
{id: 115,pId: 11,name: "XX有限公司"},
{id: 116,pId: 11,name: "XX控股有限公司"},
{id: 1161,pId: 116,name: "XX有限公司"},
{id: 1162,pId: 116,name: "XX公司"},
{id: 1163,pId: 116,name: "XX租赁公司"},
{id: 117,pId: 11,name: "XX管理股份有限公司"},
{id: 118,pId: 11,name: "XX股份有限公司"},
{id: 119,pId: 11,name: "XX科技股份有限公司"},
{id: 120,pId: 11,name: "XX投资有限公司"},
{id: 121,pId: 11,name: "XX海外投资有限公司"},
{id: 122,pId: 11,name: "XX总局"},
{id: 123,pId: 11,name: "XX设计院"},
];
zTreeObj = $.fn.zTree.init($("#treeDemo"), settings, zNodes); //初始化树
zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
//默认选中的公司
$("#treeDemo_16_a").addClass("curSelectedNode");
//回调函数
function onClick(e, treeId, treeNode) {
if (treeNode.children === undefined) {
//添加去除选中样式
if(treeNode.tId=="treeDemo_3"){
$("#treeDemo_16_a").addClass("curSelectedNode");
}else{
$("#treeDemo_16_a").removeClass("curSelectedNode");
}
//console.log(treeNode.id)
//根据id获取数据
getTableData(treeNode.id);
} else {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode);
}
};
var jsonData=[
{
id:111,
data:[
]
},
{
id:112,
data:[]
},
{
id:1131,
data:[]
},
{
id:1141,
data:[]
},
{
id:115,
data:[]
},
{
id:1161,
data:[]
},
{
id:1162,
data:[]
},
{
id:1163,
data:[]
},
{
id:117,
data:[]
},
{
id:118,
data:[]
},
{
id:119,
data:[
{id:1,name:"张三",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:2,name:"李四",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:3,name:"王五",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:4,name:"赵六",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:5,name:"李七",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:6,name:"王八",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:7,name:"吴九",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:8,name:"钱二",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:9,name:"周五",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
{id:10,name:"刘三",phone:'18888888888',email:'8888@qq.com',tel:'88888888'},
]
},
{
id:120,
data:[]
},
{
id:121,
data:[]
},
{
id:122,
data:[]
},
{
id:123,
data:[]
},
]
//获取表格初始化数据
function getTableData(id){
//alert("111")
//console.log(jsonData.length)
for (var i=0;i<jsonData.length;i++) {
if(id==jsonData[i].id){
console.log(id)
initPage(jsonData[i].data)
}
}
};
//创建表格
function creTable(data){
$(".table tbody").empty()
//console.log(data)
$.each(data, function (index, el) {
$("<tr><td>"+el.name+"</td><td>"+el.phone+"</td><td>"+el.email+"</td><td>"+el.tel+"</td></tr>").appendTo($(".table tbody"));
});
};
//第一次调用初始化数据
var data=jsonData[10].data
initPage(data)
function initPage (data){
//处理数据
if(data.length<8){
//初始化分页
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage,
layer = layui.layer;
laypage.render({
elem: 'pagination',
count: data.length,
theme: '#1E9FFF',
limit:7,
first: '首页',
last: '尾页',
prev: '上一页',
next: '下一页',
jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
//console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
}
}
});
});
//创建表格
creTable(data);
}else{
//初始化分页
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage,
layer = layui.layer;
laypage.render({
elem: 'pagination',
count: data.length,
theme: '#1E9FFF',
limit:8,
first: '首页',
last: '尾页',
prev: '上一页',
next: '下一页',
jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
//console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
var page=obj.curr;
//处理数据
//该页第一条数据下标
firstData=(page-1)*8;
//该页最后一条数据下标
lastData=firstData+8
var tabData=data.slice(firstData,lastData);
creTable(tabData)
//首次不执行
if(!first){
//do something
}
}
});
});
//处理第一页数据
var tabData=data.slice(0,8);
creTable(tabData)
}
}
//工具箱
$(".tool_box").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".tool_box").fadeIn(1000);
} else {
$(".tool_box").fadeOut(1000);
}
});
//返回顶部
$('.backtop_box').on("click",function(){
$('body,html').animate({
scrollTop: 0
},
1000);
})
})
</script>
扫一扫
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
