@using HengJiuGamesManage.Models;
@{
Layout = null;
}
@{
Job job = new Job();
if (ViewBag.UserModel != null)
{
job = ViewBag.UserModel;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device
-width" />
<title>Index</title>
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/layui/layui.js"></script>
<script src="~/Scripts/jquery
-3.4.1.js"></script>
<style>
.layui
-input, .layui
-textarea {
display: block;
width: 70%;
padding
-left: 10px;
}
.layui
-btn {
margin
-left: 9px;
}
.layui
-field
-box {
padding: 45px;
}
.editInfo {
display: none;
}
.updateInfo {
display: none;
}
element.style {
z
-index: 19891015;
width: 442px;
height: 284px;
position: fixed;
top: 265px;
left: 219.5px;
}
</style>
</head>
<body>
<fieldset class="layui
-elem
-field" style="border:solid">
<legend>
<span class="layui
-breadcrumb">
<a href="">首页</a>
<a><cite>职位管理</cite></a><br />
</span>
</legend>
<div class="layui
-form
-item">
<div class="layui
-inline">
<label class="layui
-form
-label">职位名称</label>
<div class="layui
-input
-block">
<input type="text" name="name" id="date1" autocomplete="off" class="layui
-input">
</div>
</div>
<div class="layui
-inline">
<label class="layui
-form
-label">职位代码</label>
<div class="layui
-input
-inline">
<input type="text" name="code" autocomplete="off" class="layui
-input">
</div>
</div>
<button type="button" class="layui
-btn layui
-btn
-radius" onclick="Select()"><i class="layui
-icon layui
-icon
-search"></i>查询</button>
<button type="button" class="layui
-btn" onclick="Add()"><i class="layui
-icon layui
-icon
-addition"></i> 添加</button>
</div>
</fieldset>
<fieldset style="border:none">
<div class="layui
-field
-box">
<div style="padding: 16px;">
<table class="layui
-hide" id="test" lay
-filter="test"></table>
<script type="text/html" id="toolDemo">
<div class="layui
-clear
-space">
<a class="layui
-btn layui
-btn
-xs" lay
-event="edit">编辑</a>
<a class="layui
-btn layui
-btn
-xs layui
-bg
-red" lay
-event="more">删除</a>
</div>
</script>
</div>
</div>
</fieldset>
<div class="editInfo">
<form class="layui
-form layui
-form
-pane" action="">
<div class="layui
-form
-item">
<label class="layui
-form
-label">职位名称</label>
<div class="layui
-input
-block">
<input type="text" name="JobName" autocomplete="off" placeholder="请输入职位名称" lay
-verify="required" 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="JobCode" autocomplete="off" placeholder="请输入职位代码" lay
-verify="required" class="layui
-input">
</div>
</div>
<div class="layui
-form
-item">
<div class="layui
-input
-block">
<button type="submit" class="layui
-btn" lay
-submit lay
-filter="demo1">立即提交</button>
<button type="reset" class="layui
-btn layui
-btn
-primary">重置</button>
</div>
</div>
</form>
</div>
@*修改资料*@
<div class="updateInfo">
<form class="layui
-form layui
-form
-pane" action="">
<div class="layui
-form
-item">
<label class="layui
-form
-label">职位名称</label>
<div class="layui
-input
-block">
<input type="text" name="JobName" autocomplete="off" placeholder="请输入职位名称" lay
-verify="required" class="layui
-input" value="@job.JobName">
</div>
</div>
<div class="layui
-form
-item">
<label class="layui
-form
-label">职位代码</label>
<div class="layui
-input
-block">
<input type="text" name="JobCode" autocomplete="off" placeholder="请输入职位代码" lay
-verify="required" class="layui
-input" value="@job.JobCode">
</div>
</div>
<div class="layui
-form
-item">
<div class="layui
-input
-block">
<button type="submit" class="layui
-btn" lay
-submit lay
-filter="demo1">修改</button>
<button type="reset" class="layui
-btn layui
-btn
-primary">重置</button>
</div>
</div>
</form>
</div>
<script>
var tableIns;
var table;
// 创建渲染实例，渲染列表
layui.use(['table'], function () {
table = layui.table;
tableIns = table.render({
elem: '#test',
url: '/JobManage/GetList', // 此处为静态模拟数据，实际使用时需换成真实接口
height: 500,
page: true,
cols: [[
{ type: 'Number', width: '10%', title: '序号' },
{ field: 'JobName', width: '10%', title: '职位名称' },
{ field: 'JobCode', width: '10%', title: '职位代码' },
{
field: 'CreateDate', width: '10%', title: '创建时间', templet: function (d) {
//return convertJsonDate(d.CreateDate);
return d;
}
},
{ field: 'ModifyDate', title: '修改时间', width: '10%' },
{ title: '操作', width: '10%', minWidth: 125, templet: '#toolDemo' }
]],
});
//工具栏事件
//触发单元格工具事件
table.on('tool(test)', function (obj) { // 双击 toolDouble
var data = obj.data; // 获得当前行数据
// console.log(obj)
if (obj.event === 'edit') {
//修改
layer.confirm('修改 [' + data.JobName + '] ', function (index) {
$.ajax({
url: "/JobManage/updateJobTable",
type: "post",
data: { JobName: data.JobName, JobCode: data.JobCode},
success: function (res) {
if (res.code == 0) {
layer.msg(result.msg, { icon: 6, time: 1000 });
} else {
layer.msg(result.msg, { icon: 5, time: 2000 });
}
}
})
});
} else {
layer.confirm('真的删除职位 [' + data.JobName + '] 么', function (index) {
$.ajax({
url: "/JobManage/DelInfo",
type: "post",
data: { id: data.ID },
success: function (res) {
if (res.code == 0) {
layer.msg(result.msg, { icon: 6, time: 1000 });
obj.del(); // 删除对应行（tr）的DOM结构
layer.close(index);
// 向服务端发送删除指令
} else {
layer.msg(result.msg, { icon: 5, time: 2000 });
}
}
})
});
}
});
var form = layui.form;
var layer = layui.layer;
// 提交事件
form.on('submit(demo1)', function (data) {
var field = data.field;
$.ajax({
url: "/JobManage/AddInfo",
type: "post",
data: field,
success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
/*window.location.href = '/Home/Index';*/
var index = parent.layer.getFrameIndex(window.name); // 先得到当前
iframe 层的索引
parent.layer.close(index); // 再执行关闭
});
} else if (res.code == 1) {
layer.msg(res.msg, { icon: 5, time: 3000 });
}
}
})
return false; // 阻止默认 form 跳转
});
})//表单结束
//新增方法
function Add() {
layer.open({
type: 1, // page 层类型
area: ['500px', '300px'],
title: '新建职位',
shade: 0.6, // 遮罩透明度
shadeClose: true, // 点击遮罩区域，关闭弹层
maxmin: false, // 允许全屏最小化
anim: 0, // 0
-6 的动画形式，
-1 不开启
content: $('.editInfo').html()
});
}
//查询方法
function Select() {
table.reload = function () {
var args = [];
layui.each(arguments, function (index, item) {
args.push(item);
});
args[2] === undefined && (args[2] = true);
return tableReload.apply(null, args);
};
tableIns.reload({
where: { // 传递数据异步请求时携带的字段
name: $("#date1").val(),
code: $("input[name = 'code']").val()
},
height: 500 // 重设高度
})
}
//时间格式
function convertJsonDate(jsonDate) {
const timestamp = parseInt(dateStr.match(/\d+/)[0]);
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}
-${month}
-${day}`;
}
</script>
</body>
</html>
查看代码问题 优化代码实现功能但不要修改
本文介绍如何使用document.designMode属性使iframe内容变得可编辑，并通过示例代码展示了如何启用iframe编辑功能，清空内容及获取HTML代码。
Code
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
