<title>人事管理</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>人事管理</cite></a>
</div>
</div>
<div class="layui-fluid" id="LAY-app-table">
<div class="layui-card layui-row layui-col-space15" style="padding: 15px;">
<div class="orgbox layui-col-md2">
<ul id="demo1"></ul>
</div>
<div class="site-tips layui-col-md10" id="demo2-view">
<!--<table class="layui-hide" id="test"></table>-->
<div class="layui-tab-content" >
<div class="layui-btn-group demoTable lay-mb15">
<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
<button class="layui-btn" data-type="isAll">验证是否全选</button>
<button class="layui-btn" data-type="add" lay-event="add">新增(iframe弹窗)</button>
<button class="layui-btn" data-type="addOther" lay-event="addOther">新增(页面内弹窗)</button>
</div>
<table id="LAY-app-table-all" lay-filter="LAY-app-table-all"></table>
</div>
</div>
</div>
</div>
<!--查看-->
<script type="text/html" id="viewTr">
<ul class="viewInfo">
<li>
<span>编号:</span>{{d.title}}
</li>
<li>
<span>所属部门:</span>{{d.platform}}
</li>
<li>
<span>所属职位:</span>{{d.location}}
</li>
<li>
<span>状态:</span>{{d.status}}
</li>
<li>
<span>时间:</span>{{layui.util.timeAgo(d.date)}}
</li>
</ul>
</script>
<!--添加-->
<script type="text/html" id="addTr">
<div class="lay-alert-pad">
<form class="layui-form" action="" lay-filter="component-new-group">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属部门</label>
<div class="layui-input-block">
<input type="text" name="platform" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-footer">
<button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">新增</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>
</script>
<style>
.orgbox{
display: inline-block;
height: 510px;
border: 1px solid #ddd;
overflow: auto;
}
.site-tips{
display: inline-block;
vertical-align: top;
}
.viewInfo{
padding:30px;
font-size: 14px;
color: #666;
}
.viewInfo li{
margin-bottom: 15px;
}
.viewInfo li span{
display: inline-block;
width: 15%;
text-align: right;
margin-right: 15px;
font-weight: bold;
}
</style>
<script>
layui.use(['tree','layer','table','util','form','laydate','laytpl'], function(){
var $ = layui.$
,layer = layui.layer
,admin = layui.admin
,table = layui.table
,element = layui.element
,form = layui.form
,laydate = layui.laydate
,laytpl = layui.laytpl;
element.render();
var tplOperate = function(d){
return '<div class="opetate"><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" lay-filter="test1">查看</a>' +
'<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>' +
'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>' +
'</div>';
};
table.render({
elem: '#LAY-app-table-all'
,url: './content/json/table/operate.js'
,cellMinWidth: 80
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field: 'title', title: '编号', templet: '<div>{{d.title}}</div>'}
,{field: 'platform', title: '所属部门', event: 'setSign', templet: '<div>{{d.platform}}</div>'}
,{field: 'location', title: '所属职位', templet: '<div>{{d.location}}</div>'}
,{field: 'status', title: '状态', edit: 'text', templet: '<div>{{d.status}}</div>'}
,{field: 'date', title: '时间', templet: '<div>{{ layui.util.timeAgo(d.date) }}</div>'}
,{field: 'operate', title: '操作', templet: tplOperate}
]]
,skin: 'line'
,done: function(res, curr, count){
console.log(res);
console.log(curr);
console.log(count);
}
});
table.on('edit(LAY-app-table-all)', function(obj){
var value = obj.value
,data = obj.data
,field = obj.field;
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value);
});
table.on('tool(LAY-app-table-all)', function(obj){
layui.updateitem = function(item){
obj.update(JSON.parse(item));
};
var data = obj.data;
if(obj.event === 'detail'){
layer.open({
title:'查看',
type: 1,
shadeClose: true,
area: admin.screen() < 2 ? ['80%', '300px'] : ['700px', '350px'],
content: '<div id="view"></div>'
});
console.log(obj)
console.log(JSON.stringify(data))
console.log(data.operate)
obj.update({
status:"非热门",
})
var getTpl = $("#viewTr")[0].innerHTML,view = $("#view")[0];
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});
}
else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
else if(obj.event === 'edit'){
layer.open({
type: 2,
area: ['700px', '550px'],
fixed: false,
maxmin: true,
content: layui.setter.base + 'views/iframe/layer/operateTable.html'
});
}
else if(obj.event === 'setSign'){
layer.prompt({
formType: 2
,title: '编辑 ['+ data.id +'] 的所属平台'
,value: data.platform
}, function(value, index){
layer.close(index);
obj.update({
platform: value
});
});
}
});
var active = {
getCheckData: function(){
var checkStatus = table.checkStatus('LAY-app-table-all')
,data = checkStatus.data;
active.getId(data)
layer.alert(JSON.stringify(data));
}
,getId:function (data) {
var idArr = [];
for(var i=0; i<data.length; i++){
console.log(data[i].id)
idArr.push(data[i].id)
}
console.log(idArr)
}
,getCheckLength: function(){
var checkStatus = table.checkStatus('LAY-app-table-all')
,data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
}
,isAll: function(){
var checkStatus = table.checkStatus('LAY-app-table-all');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
,add: function () {
layer.open({
title:'新增',
type: 2,
shadeClose: false,
area: admin.screen() < 2 ? ['80%', '300px'] : ['700px', '600px'],
content: layui.setter.base + 'views/iframe/layer/addOperate.html'
});
}
,addOther: function () {
layer.open({
title:'新增',
type: 1,
shadeClose: false,
area: admin.screen() < 2 ? ['80%', '300px'] : ['700px', '600px'],
content: '<div id="addContent"></div>'
});
var addTpl = $("#addTr")[0].innerHTML;
$("#addContent").append(addTpl);
form.render(null, 'component-new-group');
}
};
form.on('submit(component-form-demo1)', function(data){
console.log(data)
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
$('.layui-fluid .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
layui.tree({
elem: '#demo1'
,target: '_blank'
,click: function(item){
var demoReload = $('#test');
table.reload('test', {
page: {
curr: 1
}
,where: {
}
});
}
,nodes: [
{
name: '常用文件夹'
,id: 1
,alias: 'changyong'
,children: [
{
name: '所有未读(设置跳转)'
,id: 11
,href: 'http://www.layui.com/'
,alias: 'weidu'
}, {
name: '置顶邮件'
,id: 12
}, {
name: '标签邮件'
,id: 13
}
]
}, {
name: '事业部'
,id: 2
,spread: true
,children: [
{
name: '研发部'
,id: 21
,spread: true
,children: [
{
name: '前端'
,id: 211
}, {
name: '所有'
,id: 212
}
]
}, {
name: '产品部'
,id: 22
}
]
}
]
});
});
</script>
{
"code": 0
,"msg": ""
,"count": 60
,"data": [{
"id": 123
,"title": "10001"
,"date": 1510363800000
,"viewNum":"6"
,"status":"在职"
,"location":"前端"
,"platform":"研发部"
}, {
"id": 111
,"title": "10002"
,"date": 1510212370000
,"viewNum":"50"
,"status":"在职"
,"location":"后端"
,"platform":"研发部"
}, {
"id": 111
,"title": "10003"
,"date": 1510212370000
,"viewNum":"0"
,"status":"在职"
,"location":"移动端"
,"platform":"研发部"
}, {
"id": 111
,"title": "10004"
,"date": 1510212370000
,"viewNum":"999"
,"status":"离职"
,"location":"产品经理"
,"platform":"产品部"
}, {
"id": 111
,"title": "10005"
,"date": 1510212370000
,"viewNum":"0"
,"status":"离职"
,"location":"运营"
,"platform":"市场部"
}, {
"id": 111
,"title": "10006"
,"date": 1510212370000
,"viewNum":"999"
,"status":"在职"
,"location":"客服"
,"platform":"客服部"
}, {
"id": 111
,"title": "10007"
,"date": 1510212370000
,"viewNum":"50"
,"status":"在职"
,"location":"销售"
,"platform":"市场部"
}, {
"id": 111
,"title": "10008"
,"date": 1510212370000
,"viewNum":"0"
,"status":"离职"
,"location":"测试"
,"platform":"安全中心"
}, {
"id": 111
,"title": "10009"
,"date": 1510212370000
,"viewNum":"50"
,"status":"离职"
,"location":"设计"
,"platform":"设计部"
}, {
"id": 111
,"title": "10010"
,"date": 1507447570000
,"viewNum":"6"
,"status":"在职"
,"location":"产品经理"
,"platform":"产品部"
}]
}
layer iframe 示例
<div class="layui-form-item">
<label class="layui-form-label">所属位置</label>
<div class="layui-input-block">
<!--<select name="location" lay-filter="aihao">-->
<!--<option value=""></option>-->
<!--<option value="郑州">郑州</option>-->
<!--<option value="开封" selected="">开封</option>-->
<!--<option value="南阳">南阳</option>-->
<!--<option value="海南">海南</option>-->
<!--<option value="珠海">珠海</option>-->
<!--</select>-->
<div id="viewLocal"></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">时间</label>
<div class="layui-input-inline">
<input type="text" name="date" id="LAY-component-form-group-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">阅读数</label>
<div class="layui-input-block">
<!--<textarea name="viewnum" placeholder="请输入内容" class="layui-textarea"></textarea>-->
<input type="text" name="viewNum" lay-verify="number" autocomplete="off" placeholder="阅读数" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-footer">
<button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>