layui 前端 UI 组件库
- 说明：
- layui是一个js的前端UI组件库
- layui内嵌了jquery库
- V2.9.X及以前版本支持IE8，比较常见的是使用：2.7.6
- 资源：
- 自定义扩展模块不被浏览器缓存：
layui.config({
dir: '/res/layui/' //layui.js 所在目录（如果是 script 单独引入 layui.js，无需设定该参数）一般可无视
,version: false //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。⚠️也可以设为一个固定的值，如：201610
,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
});
- select-input2「第三方组件」
- 资料：
- 功能：
- selectInput2.x 是selectInput的升级版本
- 是将input框变成即可输入亦可选择的select下拉组件
- 主要使用场景是用户可以输入关键词，匹配系统存在的联想词形成select下拉框以供用户选择
- 当然用户也可以使用自行输入的信息，支持模糊匹配
- 数据源可以本地赋值，也可以异步url请求加载，或者干脆点直接实时输入远程请求联想呈现
- 支持翻页
- selectInput2.x 借鉴 xm-select 的开发方式, 利用preact进行渲染, 大幅度提高渲染速度
- 并且可以灵活拓展，感谢xm-select的作者
- 例子：
<!DOCTYPE html>
<html >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../Include/layui-v2.7.6/css/layui.css" />
<title></title>
</head>
<body>
<form id="form1" runat="server" class="layui-form" lay-filter="form-data">
<div>
<div id="demo" ></div>
</div>
<button type="submit" lay-submit class="layui-btn" lay-filter="data-save-btn">保存</button>
</form>
</body>
</html>
<script src="../Include/axiso-v1.9.0/axios.min.js"></script>
<script src="../Include/layui-v2.7.6/layui.js"></script>
<script src="../Include/layui-v2.7.6/select-input2/select-input2.x-1.0.2.js"></script>
<script>
layui.config({
base: '/Include/layui-v2.7.6/extend/', //假设这是你存放拓展模块的根目录
version: '2025041501'
}).use(['layer', 'form', 'table', 'tool', 'jquery'], function () {
var
$ = layui.jquery,
form = layui.form,
table = layui.table,
util = layui.util,
laydate = layui.laydate,
tool = layui.tool,
layer = layui.layer;
var res;
var t;
//name
tool.ajax('GetMedicineNames', null, function (data) { res = data; }, false);
console.log(res);
var value = '1'
let ins = selectInput.render({
elem: '#demo',
name: 'name',
layVerify: 'required|string_max_50',
//data: [
// { name: '小米', value: 1 },
// { name: '苹果', value: 2 },
// { name: '华为', value: 3 },
// { name: 'vivo', value: 4 }
//]
data: res.value,
ignoreCase: true
})
ins.setValue(value);
form.verify({
string_max_50: function (value, item) {
if (!tool.validateStringLength(value, 0, 50)) {
return '长度不能大于50';
}
}
});
form.on('submit(data-save-btn)', function () {
var info = form.val('form-data')
console.log(info)
return false;
});
});
</script>
- form.val 表单信息设置和获取
<form id="form1" runat="server" class="layui-form" lay-filter="formSearch">
<input type="text" name="dname" autocomplete="off" class="layui-input">
<input type="checkbox" name="delSign" title="删除" lay-skin="primary" value="1" lay-filter="delsign">
</form>
<script>
//获取表单内容
//checkbox，选中了有内容，没有选上就不会有内容，就是连字段都没有。
var searchInfo = form.val('formSearch')
//此处没有收到内容”1“，设置 ”“「设置以后也是有内容」，这样才可以覆盖掉上一次设置的where.delSign
searchInfo.delSign = searchInfo.delSign ? "1" : ""
table.reload('list', { where: searchInfo, page: { curr : 1} }, true);
//设置表单内容
//checkbox 也必须设置，只要有内容checkbox就会被选中「不论是什么内容"0"也一样」
//此时要设置为"",就不会被选中了
searchInfo.delSign = searchInfo.delSign != "1" ? "1" : ""
form.val('formSearch', searchInfo)
</script>
//0. loading
var index = layer.load(1, {
shade: [0.8, '#fff'] //0.1透明度的白色背景
});
//waiting
layer.close(index);
//图标
<i class="layui-icon layui-icon-face-smile"></i>
<i class="layui-icon layui-icon-close"></i>
//ajax
tool.ajax('AddAnswer', { id: lastId, content: ans,
answerUserName: answerUserName },
function (d) {
if (d.isOk) {
layer.msg("...成功！");
return;
} else {
layer.msg("...失败！");
return;
}
}
);
//confirm
layer.confirm('...，确定要...吗？', function (index) {
tool.ajax('Delete', { id: data.ID }, function (d) {
if (d.isOk) {
layer.msg('删除成功');
obj.del();
} else {
layer.msg(d.errorMsg)
}
});
layer.close(index);
}
);
<!-- from class="layui-form" -->
<form id="form1" runat="server" class="layui-form">
<!-- 一个div块 class="layui-form-item" 里面内容多了会自动换行 -->
<div class="layui-form-item" style="margin: 15px;">
<!-- 一个元素块，lable + input -->
<div class="layui-inline" style="padding-right: 10px;">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline">
<input type="text" name="TextBoxName" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 一个inline中包含多个lable和input -->
<div class="layui-inline" style="padding-right: 10px;">
<label class="layui-form-label">日期</label>
<div class="layui-input-inline">
<input type="text" id="fromDt" readonly name="fromDt" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="text" id="toDt" readonly name="toDt" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-export-btn"><i class="layui-icon layui-icon-search"></i>数据生成并导出</button>
</div>
</div>
</form>
<!-- 4. select 显示 需要在form上增加 class="layui-form" lay-filter="form-data"
select 的宽度 使用css调节 .layui-form-select { width: 220px;}
-->
<form id="form1" runat="server" class="layui-form" lay-filter="form-data" >
//获取form 内容
var ser = form.val('formSearch');
//table.render
//list
table.render({
elem: '#list',
id: 'list',
url: 'ajax.aspx?m=Search',
method: 'post',
where: form.val('formSearch'),
contentType: 'application/json; charset=utf-8',
page: { limit: 20, limits: [10, 20, 30, 50, 100] },
cols: [[ //标题栏
{ field: 'ID', title: 'ID', width: 80 }
, { field: 'AccountDT', title: '报账日期', width: 120, templet: function (d) { return util.toDateString(d.dt, 'yyyy-MM-dd'); } }
, { field: 'Name', title: '姓名', width: 120 }
, { field: 'Gender', title: '性别', width: 120 }
, { field: 'Character', title: '特征', width: 80 }
, { field: 'WorkAge', title: '工龄', width: 80 }
, { field: 'Age', title: '年龄', width: 80 }
, { title: '操作', minWidth: 80, toolbar: '#currentTableBar', align: "center" }
]],
parseData: function (res) {
if (res.isOk) {
//console.log(res);
return {
code: 0,
msg: '',
count: res.count,
data: res.value
}
} else {
return { code: 1, msg: res.errorMsg };
}
}
});
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//动态增加折叠面板
//注意：动态增加的还要加一句
element.render();
});