代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<select name="orderBy">
<option value=""></option>
<option value="LoginName">用户名</option>
<option value="CreateTime">创建时间</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">创建时间</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" id="time_min" name="beginDate" placeholder="开始时间" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" id="time_max" name="endDate" placeholder="结束时间" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否锁定</label>
<div class="layui-input-inline">
<input type="radio" name="isLock" value="是" title="是">
<input type="radio" name="isLock" value="否" title="否" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
//Demo
layui.use(['form','table'], function(){
var form = layui.form;
var table = layui.table;
//监听提交
form.on('submit(formDemo)', function(data){
//layer.msg(JSON.stringify(data.field));
console.log(data.field);
//表格重载
table.reload('demo', {
where: data.field //设定异步数据接口的额外参数
//,height: 300
});
return false;
});
});
</script>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">设置</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>
</script>
<script>
layui.use(['table','laydate','jquery','form','transfer'], function(){
var table = layui.table;
var laydate = layui.laydate;
var $ = layui.jquery;
var form = layui.form;
var transfer = layui.transfer;
laydate.render({
elem: '#time_min' //指定元素
});
laydate.render({
elem: '#time_max' //指定元素
});
//第一个实例
table.render({
elem: '#demo'
,toolbar: '#toolbarDemo'
,height: 350
,url: 'http://stuapi.ysd3g.com/api/GetUsersLayUI' //数据接口
,method:'post'
,limit:5//每页显示条数
,limits:[5,10,20,30]//每页条数的选项
,where:{
token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
}
,page: true //开启分页
,cols: [[ //表头
{field: 'Id', title: '用户id', width:80, sort: true, fixed: 'left'}
,{field: 'LoginName', title: '用户名', }
,{field: 'IsLockout', title: '是否锁定'}
,{field: 'LastLoginTime', title: '最后登录时间'}
,{field: 'CreateTime', title: '创建时间',width:150}
,{field: 'PsdWrongTime', title: '密码错误次数'}
,{field: 'LockTime', title: '用户锁定时间'}
,{field: 'ProtectEMail', title: '邮箱'}
,{field: 'ProtectMTel', title: '手机号码'}
,{field: 'RowNum', title: '行号'}
,{fixed: 'right',title: '操作', width:200, align:'center', toolbar: '#barDemo'}
]]
});
//监听事件——头部工具栏
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'delete':
layer.msg('删除');
break;
case 'update':
layer.msg('编辑');
break;
};
});
//监听工具条
table.on('tool(test)', 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 === 'detail'){ //设置
//do somehing
//获取当前用户已拥有角色
$.post(
'http://stuapi.ysd3g.com/api/GetRolesByUserIdLayUI',
{
uId:data.Id,
token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
},function(right){
var a = new Array();
var arr = right.data;
for(var i=0;i<arr.length;i++){
a.push(arr[i].Id);
}
//获取系统所有角色
$.post(
'http://stuapi.ysd3g.com/api/GetRolesAll',
{
token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
},function(left){
//渲染
transfer.render({
elem: '#test1' //绑定元素
,data: left //左侧栏数据
,value: a //右侧栏数据
,id: 'demo1' //定义索引
,title:['系统所有角色','用户已有角色']
,onchange:function(role,index){
if(index==0){//左往右,给用户设置角色
for(var i=0;i<role.length;i++){
$.post(
'http://stuapi.ysd3g.com/api/AddUserToRole',
{
uId:data.Id,
rId:role[i].value,
token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
},function(res){
layer.msg(''+res.success);
},'json'
);
}
}else{//右往左,移除用户已有角色
for(var i=0;i<role.length;i++){
$.post(
'http://stuapi.ysd3g.com/api/RemoveUserFromRole',
{
uId:data.Id,
rId:role[i].value,
token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
},function(res){
layer.msg(''+res.success);
},'json'
);
}
}
}
,parseData: function(res){
return {
"value": res.Id //数据值
,"title": res.Name //数据标题
}
}
});
},'json'
);
},'json'
);
layer.open({
type: 1,
area: ['600px', '500px'],
title:'正在为<font color="red">['+data.LoginName+']</font>设置角色',
content: $('#test1') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
$.post(
'http://stuapi.ysd3g.com/api/DeleteUser',
{
uid:data.Id,
token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
},function(res){
layer.msg(''+res);
},'json'
);
});
} else if(layEvent === 'edit'){ //编辑
//do something
//初始化赋值表单
form.val("ff", {
"loginName": data.LoginName // "name": "value"
,"email": data.ProtectEMail
,"mtel": data.ProtectMTel
});
layer.open({
type: 1,
area: ['400px', '300px'],
title:'编辑用户',
content: $('#ff') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
}
});
});
</script>
</body>
<form id="ff" class="layui-form" lay-filter="ff" action="" style="display: none;">
<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="loginName" readonly="readonly" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-inline">
<input type="text" name="mtel" placeholder="请输入手机号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
//Demo
layui.use(['form','jquery'], function(){
var form = layui.form;
var $ = layui.jquery;
//监听提交
form.on('submit(edit)', function(data){
//layer.msg(JSON.stringify(data.field));
$.post(
'http://stuapi.ysd3g.com/api/UpdateUser',
data.field,
function(res){
layer.msg(''+res.success);
location.reload();//刷新页面
},'json'
);
return false;
});
});
</script>
<div id="test1" style="display: none;"></div>
<script>
layui.use('transfer', function(){
var transfer = layui.transfer;
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手