layUI详情和列表页参考⽰例
【注意】本⽂中的代码可运⾏，但不⼀定是可直接运⾏的，仅供参考使⽤.
【码云】：
【详情页】
预览图：
【Html部分】
<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, maximum-scale=1">
<link href="/Scripts/layui/css/layui.css" rel="stylesheet"/>
<script src="/Scripts/jquery-3.5.1.min.js"></script>
<script src="/Scripts/layui/layui.js"></script>
head设置
<form class="layui-form layui-form-pane" action="" lay-filter="UserDetailForm">
<div class="layui-tab layui-tab-card" lay-filter="UserTab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">基本信息</li>
<li lay-id="2">详细信息</li>
<li lay-id="3">简介</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
</div>
<div class="layui-tab-item">
</div>
<div class="layui-tab-item">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="SaveUser">⽴即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
表单与tab
<div class="layui-form-item">
<label class="layui-form-label"><span class="layui-badge-dot"></span> ；头像</label>
<div class="layui-input-inline">
<input type="text" name="Portrait" lay-verify="required" lay-reqtext="需要上传头像" autocomplete="off" placeholder="" class="layui-input"/>
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn" id="btnUpload" onclick="ElementById('fileUpload').click()">
<i class="layui-icon"></i>上传图⽚
</button>
<input class="layui-upload-file" type="file" id="fileUpload" accept="" name="fileUpload">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<img src="#" width="100" height="100" id="imgUpload" alt="我的头像" title="我的头像" />
</div>
</div>
头像图⽚上传
<div class="layui-form-item">
<label class="layui-form-label"><span class="layui-badge-dot"></span> ⽤户账号</label>
<div class="layui-input-inline">
<input type="text" name="UserID" lay-verify="required|englishStr" autocomplete="off" placeholder="请输⼊⽤户账号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="layui-badge-dot"></span> ；姓名</label>
<div class="layui-input-inline">
<input type="text" name="UserName" lay-verify="required|chineseStr" autocomplete="off" placeholder="请输⼊姓名" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请填写正确的名称</div>
</div>
普通⽂本框
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="radio" name="Sex" value="1" title="男">
<input type="radio" name="Sex" value="0" title="⼥" checked>
</div>
</div>
单选按钮
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"><span class="layui-badge-dot"></span> ；登录密码</label>
<div class="layui-input-block">
<input type="password" name="Pwd" required lay-verify="required|pass" placeholder="请输⼊密码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
密码框
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<!--复选框如果未设置value值则选择时返回on值-->
<input type="checkbox" name="Status" id="Status" lay-filter="Status" lay-skin="switch" lay-text="有效|⽆效"/>
</div>
</div>
复选框
<div class="layui-form-item">
<label class="layui-form-label">所在地区</label>
<div class="layui-input-inline">
<select name="ProvinceSysNo" lay-filter="ProvinceSysNo">
<option value="0">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="CitySysNo" lay-filter="CitySysNo">
<option value="0">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="AreaSysNo">
<option value="0">请选择县/区</option>
</select>
</div>
</div>
省市区三级联动
<div class="layui-form-item" pane="">
<label class="layui-form-label">兴趣爱好</label>
<div class="layui-input-block">
<input type="checkbox" name="HobbyWrite" lay-skin="primary" title="写作"/>
<input type="checkbox" name="HobbyRead" lay-skin="primary" title="阅读"/>
<input type="checkbox" name="HobbyGame" lay-skin="primary" title="游戏"/>
<input type="checkbox" name="HobbyMusic" lay-skin="primary" title="唱歌"/>
<input type="checkbox" name="HobbyListenMusic" lay-skin="primary" title="听歌"/>
<input type="checkbox" name="HobbyMovie" lay-skin="primary" title="电影"/>
<input type="checkbox" name="HobbyShopping" lay-skin="primary" title="购物"/>
<input type="checkbox" name="HobbyMotion" lay-skin="primary" title="运动"/>
<input type="checkbox" name="HobbyFood" lay-skin="primary" title="美⾷"/>
</div>
</div>
多个复选框
<div class="layui-form-item">
<label class="layui-form-label">出⽣⽇期</label>
<div class="layui-input-inline">
<input type="text" name="Birthday" id="Birthday" placeholder="yyyy-mm-dd" autocomplete="off" class="layui-input" onclick="layui.laydate({ elem: this });"/> </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="WeightMin" placeholder="?15" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" >
<input type="text" name="WeightMax" placeholder="?200" autocomplete="off" class="layui-input">
</div>
</div>
</div>
起⽌⽂本框
<div class="layui-form-item">
<label class="layui-form-label">技能特长</label>
<div class="layui-input-inline">
<select name="Skills" lay-search="">
<option value="">直接选择或搜索选择</option>
</select>
</div>
</div>
可模糊搜索的下拉框
<div class="layui-form-item">
<label class="layui-form-label">部门</label>
<div class="layui-input-block">
<input type="text" id="DeptSysNo" name="DeptSysNo" lay-filter="DeptSysNo" class="layui-input">
</div>
</div>
树控件下拉框
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">个⼈简介</label>
<div class="layui-input-block">
<textarea placeholder="请输⼊内容" name="Profile" class="layui-textarea"></textarea>
</div>
</div>
普通⽂本域
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="Note" id="Note">
把编辑器的初始内容放在这textarea即可
</textarea>
</div>
</div>
富⽂本编辑器
【Script部分】
<script src="../jquery-3.5.1.js"></script>
<script src="../layui/layui.js"></script>
<script src="../layui/treeselect/treeselect.js" ></script>
<script src="/Scripts/layui/common.js"></script>
<!--
common.js内容：
base: './module/'
}).extend({
treeSelect: 'treeSelect/treeSelect'
});
-->
库的引⽤
// [config] layui页⾯处理对象
var layPage = new Object();
// [config] 模块定义
// [config] 上传
layPage.upload = uploadData;
// [config] 富⽂本上传
layPage.editUpload = editUploadData;
// [config] 格式验证
layPage.verify = verify;
// [config] 树下拉控件对象绑定
layPage.dataTreeSelect = dataTreeSelect;
// [config] 树下拉框控件json绑定
layPage.jsonTreeSelect = jsonTreeSelect;
/
/ [config] 开关按钮监听
layPage.statusSwitch = statusSwitch;
// [config] 提交表单
layPage.formSubmit = formSubmit;
// [config] 绑定表单
layPage.formBind = formBind;
// [config] 获得表单输⼊值
layPage.formInput = formInput;
功能定义
var uploadData = {
elem: '#fileUpload', // 上传按钮
accept: 'jpeg|jpg|png|gif', // 上传⽂件扩展名
url: '/Views/Basic/Upload.ashx?name=fileUpload&action=UploadImg&type=User', // 上传处理服务器接⼝ done: function (res) {
// 上传完毕响应处理
if (de == 0) {
$("#imgUpload").attr("src", res.data.src);
$("input[name='Portrait']").val(res.data.src);
}
}
};
功能-⽂件上传
var editUploadData = {
uploadImage: {
url: '/Views/Basic/Upload.ashx?name=fileUpload&action=UploadImg&type=User' // 上传处理服务器接⼝ , type: 'get' // 请求⽅式，默认post
},
devmode: true,
//插⼊代码设置
codeConfig: {
hide: true, //是否显⽰编码语⾔选择框
default: 'javascript' //hide为true时的默认语⾔格式
},
tool: [
'html', 'code', 'strong', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'images', 'image_alt', 'image' //插⼊图⽚
, '|', 'fullScreen', 'help', 'italic', 'paste'
],
height: 500, //设置编辑器⾼度
};
功能-富⽂本上传
var verify = {
title: function (value) { // ⾃定义验证
jquery获取下拉框选中值
if (value.length < 5) {
return '标题⾄少得5个字符啊';
}
},
englishStr: [/^[a-z|A-Z]{5,18}$/, '必须是5到18位的英⽂字母组成'], // 正则验证和验证失败消息
chineseStr: [/^[a-zA-Z\u4e00-\u9fa5]{2,15}$/, '只能是2到15位的中⽂或者英⽂组成'],
pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
content: function (value) {
layui.layedit.sync(editIndex);
}
};
功能-验证
var dataTreeSelect = {
elem: '#DeptSysNo', // 树下拉⽂本框
data: null, // 数据
type: 'get', // 异步加载⽅式：get/post，默认get
placeholder: '修改默认提⽰信息', // 占位符
search: true, // 是否开启搜索功能：true/false，默认false
click: function (d) { // 点击回调
console.log(d);
},
success: function (d) { // 加载完成后的回调函数
console.log(d);
// 选中节点，根据id筛选
// treeSelect.checkNode('tree', 3);
// 获取zTree对象，可以调⽤zTree⽅法
// var treeObj = treeSelect.zTree('tree');
// console.log(treeObj);
// 刷新树结构
// fresh();
}
};
var jsonTreeSelect = {
elem: '#tree', // 选择器
data: "/Scripts/layui/data/data3.json", // 数据
type: 'get', // 异步加载⽅式：get/post，默认get
placeholder: '修改默认提⽰信息', // 占位符
search: true, // 是否开启搜索功能：true/false，默认false
click: function (d) { // 点击回调
console.log(d);
},
success: function (d) { // 加载完成后的回调函数
console.log(d);
/
/ 选中节点，根据id筛选
// treeSelect.checkNode('tree', 3);
// 获取zTree对象，可以调⽤zTree⽅法
// var treeObj = treeSelect.zTree('tree');
// console.log(treeObj);
// 刷新树结构
// fresh();
}
};
功能-树下拉框2种绑定
var statusSwitch= function (data) {
//layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
// offset: '6px'
//});
//layer.tips('温馨提⽰：请注意开关状态的⽂字可以随意定义，⽽不仅仅是ON|OFF', his)
}
功能-开关事件
var formSubmit = function (data) {
// 验证⽇期
if ($("input[name='Birthday']").val() == "") {
layer.alert("出⽣⽇期不能为空!");
// 设置当前tab项，也可通过触发tab项的单击事件
layui.element.tabChange('UserTab', 2);
return false;
}
// 获得富⽂本编辑器内容，并进⾏htmlEncode加码，显⽰的时候需要解码
data.field.Note = editEncodeContent.htmlEncode(Content(editIndex));
// 获得树控件下拉框选项值
if (Select.zTree("DeptSysNo").getSelectedNodes().length > 0)
data.field.DeptSysNo = Select.zTree("DeptSysNo").getSelectedNodes()[0].id;
else
data.field.DeptSysNo = 0;
// 表单提交确认提⽰
btn: ['确定', '取消']
}, function () {
$.ajax({
type: "Post", // 要⽤post⽅式
data: data.field, // 提交表单的输⼊值
url: "/Views/Admin/SysUser_Detail.aspx?action=SaveUser", // 提交给服务器处理的地址
dataType: "json",
success: function (res) {
var resObj = JSON.parse(res.d); // 返回的数据⽤data.d获取内容，此处使⽤返回值的d属性，因为请求的是WebSerivce接⼝if (resObj.Code == 0) {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论