您现在的位置是:首页 >>LayuiLayui

List列表页面

zhang2021-07-22 15:34:56【Layui】人已围观

简介:
<!--#include file="getjobFun.asp" --><!DOCTYPE html><html><head> &#...

<!--#include file="getjobFun.asp" -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../../static/layui/css/diy.css" media="all">
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body">
<script type="text/html" id="toolbarTable">
<div class="layui-btn-container">
<button class="layui-btn layuiadmin-btn-list layui-btn-sm" lay-event="batchdel">删除</button>
<button class="layui-btn layuiadmin-btn-list layui-btn-sm" lay-event="add">添加</button>
</div>
<div class="toolbarsearch">
<span>所在区县</span>
<select name="Country">
<option value="">全部</option>
<%=GetSelect(replaceStr(sel_Country,"",""),"")%>
</select>
<span>是否结业</span>
<select name="GraduationStatus">
<option value="">不限</option>
<option value="是">是</option>
<option value="否">否</option>
</select>
<span>是否报补</span>
<select name="ReimbursementStatus">
<option value="">不限</option>
<option value="是">是</option>
<option value="否">否</option>
</select>
<select name="s_field">
<option value="">模糊搜索</option>
<option value="Company">公司名称</option>
<option value="WorkType">工种</option>
<option value="Remark">备注栏</option>
</select>
<input type="text" name="s_keyword" value="" placeholder="关键词" autocomplete="off" class="layui-input keys">
<button id="submitbtn" class="layui-btn layuiadmin-btn-list layui-btn-sm" lay-submit lay-filter="LAY-app-contlist-search">搜索</button>
<button id="submitbtn" class="layui-btn layuiadmin-btn-list layui-btn-sm" onclick="window.location.href='?';">全部</button>
</div>
</script>
<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
<script type="text/html" id="table-content-list">
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="view"><i class="layui-icon layui-icon-read"></i>查看</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
</div>
</div>
</div>
<script src="../../../static/layui/layui.js"></script>
<script src="../../../static/js/function.js"></script>
<script>
layui.use(['layer', 'form','table'], function(){
var $ = layui.$
,layer = layui.layer
,table = layui.table
,form = layui.form;
//表格列表
table.render({
elem: '#LAY-app-content-list'
,url:'?action=list'
,toolbar: '#toolbarTable'
,defaultToolbar: ['filter']
,title: '数据列表'
,cols: [[
{type: "checkbox",fixed: "left"}
,{field:'index', title:'序号', width:80, fixed: 'left'}
,{field:'Country', title:'区县', width:100}
,{field:'Company', title:'公司名称', width:200}
,{field:'WorkType', title:'工种', width:100}
,{field:'GraduationStatus', title:'是否结业', width:100}
,{field:'ReimbursementStatus', title:'是否报补', width:100}
,{field:'OpenTime', title:'开班时间', width:120}
,{field:'Remark', title:'备注信息'}
,{field:'UserName', title:'负责人', width:100}
,{ title: "操作",width: 250,align: "center",fixed: "right",toolbar: "#table-content-list"}
]]
,page: true
,limit:15
,response: {
statusCode: "success" //重新规定成功的状态码为 200,table 组件默认为 0
}
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
//res=JSON.stringify(res);
return {
"code": res.status, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
}
});
//监听搜索
form.on('submit(LAY-app-contlist-search)', function(data){
var Country=$.trim($("select[name='Country']").val());
var GraduationStatus=$.trim($("select[name='GraduationStatus']").val());
var ReimbursementStatus=$.trim($("select[name='ReimbursementStatus']").val());
var s_field=$.trim($("select[name='s_field']").val());
var s_keyword=$.trim($("input[name='s_keyword']").val());
if(Country=="" && GraduationStatus=="" && ReimbursementStatus=="" && s_field=="" && s_keyword==""){
layer.msg("搜索条件不能为空", {icon: 2,time: 2*1000,shift: 6});
return false;
}
//执行重载
table.reload('LAY-app-content-list', {
url:'?action=list',
where: {'Country':$.trim(Country),'GraduationStatus':$.trim(GraduationStatus),'ReimbursementStatus':$.trim(ReimbursementStatus),'s_field':$.trim(s_field),'s_keyword':$.trim(s_keyword)}
});
$("select[name='Country']").val(Country);
$("select[name='GraduationStatus']").val(GraduationStatus);
$("select[name='ReimbursementStatus']").val(ReimbursementStatus);
$("select[name='s_field']").val(s_field);
$("input[name='s_keyword']").val(s_keyword);
});

table.on('toolbar(LAY-app-content-list)', function(obj){
var checkStatus = table.checkStatus('LAY-app-content-list')
,checkData = checkStatus.data;

switch(obj.event){
case 'batchdel':
var checkStatus = table.checkStatus('LAY-app-content-list')
,checkData = checkStatus.data; //得到选中的数据

if(checkData.length === 0){
return layer.msg('请选择数据',{icon: 2,time: 2*1000,shift: 6});
}

layer.confirm('确定删除吗?', function(index) {

//执行 Ajax 后重载
var ids=""
for(var i=0;i<checkData.length;i++){
ids=ids+","+checkData[i].id;
}
ids=ids.substr(1);
$.post("action=del","id="+ids,function(data){
if(data.status=="success"){
table.reload('LAY-app-content-list');
layer.msg('删除成功');
}else{
layer.msg(decodeUnicode(data.msg), {icon: 2,time: 2*1000,shift: 6});
}
},'json');

});
break;

case 'add':
layer.open({
type: 2
,title: '添加内容'
,content: 'getjobAdd.asp'
,maxmin: false
,area: ['480px', '560px']
,btn: ['确定', '取消']
,yes: function(index, layero){
var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
submit.click();
}
});
break;
};
});


table.on("tool(LAY-app-content-list)", function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象

if(layEvent === 'view'){ //查看
layer.open({
type: 2
,title: '查看内容'
,content: 'getjobView.asp?id='+obj.data.id
,area: ['480px', '560px']
,btn: false
});
} else if(layEvent === 'edit'){ //编辑
//修改内容
layer.open({
type: 2
,title: '编辑内容'
,content: 'getjobEdit.asp?id='+obj.data.id
,area: ['480px', '560px']
,btn: ['确定', '取消']
,yes: function(index, layero){
var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
submit.click();
}
});
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除该条数据么', function(index){
//提交 Ajax 开始
$.post("?action=del","id="+obj.data.id,function(data){
if(data.status=="success"){
obj.del();
layer.msg('删除成功');
}else{
layer.msg(decodeUnicode(data.msg), {icon: 2,time: 2*1000,shift: 6});
}
},'json');
//提交 Ajax 结束
});
}
});

});
</script>
</body>
</html>





上一篇:Fun函数页面

下一篇:View查看页面

文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:165篇文章
  • 微信交流:扫描二维码,添加我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术交流
点击这里给我发消息技术交流
电话咨询:
(微信同步)
15629136039
微信二维码