前言
最近的一个项目使用到了layui，然后就想总结一下使用过的知识吧。
一.复选框
<div class="layui-form-item">
<label class="layui-form-label" style="width: auto;">是否单身</label>
<div class="layui-input-block" style="margin-left: 200px;width: 55%;">
<input type="radio" name="single" value="是" title="是">
<input type="radio" name="single" value="否" title="否" checked>
</div>
</div>取值：
$('input[name="single"]:checked').val()点击事件 ：
layui.form.on('radio(radioName)', function(data){
if( data.value == '是'){
......
}else{
......
}
});二.select框
<div class="layui-form-item">
<label class="layui-form-label" style="width: auto;">文字内容</label>
<div class="layui-input-block" style="margin-left: 200px;width: 55%;">
<select class="form-control className" id="id"
lay-filter="此处的名称就是下面的点击事件的名称"
data-actions-box="true" data-live-search="true"
data-live-search-placeholder="请选择xxx" >
<option value="" selected>请选择xxx</option>
</select>
</div>
</div>点击事件：
layui.use("form", function () {
$ = layui.jquery;
form = layui.form;
form.on('select(点击事件的名称)', function(data){
$('.className').empty();//清空select，不然每点一次都循环添加一遍数据越来越多
进行具体的操作
});
});PS:此处若需要知道select框选中的值是啥，应该用data.value。
将字段设为未选中状态：
$("#id名称").removeAttr("disabled");
form.render("select");三.异步请求（Get）
此处结合上面的select框一起说明，
// 页面加载时就会发送异步请求
$(document).ready(function() {
// 职业资格
$.get('url地址','',function(res){
for (var i=0;i<res.length;i++) {
$('.id名称').append('<optionid="'+i+'">'+res[i].name+'</option>')
}
renderForm();
})
});PS:此处的url地址可以弄成一个配置文件，然后直接引入。
渲染函数：
function renderForm(){
layui.use('form',function(){
var form = layui.form;
form.render();
});
};四.多分录
<div class="layui-form" lay-filter="freshform">
<table class="layui-table" lay-filter="test">
<tbody class="addlists">
......填写需要变成多分录的样式......
</tbody>
</table>
</div><script src="layui/layui.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function () {
let form = layui.form,
laydate = layui.laydate,
laypage = layui.laypage,
layer = layui.layer,
table = layui.table;//非模块化加载相应的依赖
let i=1;
$('.layui-icon-addition').click(function () {
i++;
addstrs1(i);//增加一条内容函数
form.render();//每次点击添加按钮就会重新渲染一次
});
//下面整个是弹出询问框是否删除，
$('body').on("click",".layui-icon-subtraction",function () {
var pre = $(this);//这里获取点击当前行，就是要删除此行把此行的属性交给变量pre
layer.confirm('确定要删除么？',{
btn:['确定','取消']
},function () {
//为什么这个里不能直接用this表示当前行，因为作用域不一样，通过变量传递的方式获取当前行
$(pre).parent().parent().remove();//这里是移除当前删除行的内容
layer.closeAll('dialog');//这里是点击确定删除后关闭整个弹出层
})
});
//产生随机数函数
function getRandomNum() {
return parseInt(Math.random()*50);
}
//动态添加表单的函数
function addstrs1(i) {
let iNums = getRandomNum();//获取随机数
let strs1;
strs1 = '此处填写要变成多分录的内容，注意要在第一个div标签里面加上value="'+i+'"';
$('.addlists').append(strs1);
//重新渲染
laydate.render({
elem: '#getTime'+iNums //获取时间
,trigger: 'click' //采用click弹出
});
})
</script>强调 ：这个方法是我之前在网上看到的一遍博客中学到的。
五.设置select中的option为选中状态
// 当前的select的id
$('#id').val('value值');
// 更新全部,不渲染一遍的话不会看到效果，虽然实际上已经赋值了
layui.form.render();六.将控件设为不可编辑（禁用状态）
$("#id名称").attr("disabled", false);
layui.form.render('id名称');七.上传照片
HTML5：
<div class="layui-upload-drag required" id="ongImg">
<i class="layui-icon"></i>
<p>点击上传证件照</p>
</div>JS:
// 照片上传功能
layui.use('upload', function() {
var upload = layui.upload;
upload.render({
elem: '#ongImg',
url: 'submit',
auto: false, //是否自动上传
accept: 'images', //指定允许上传的文件类型
bindAction: '#submit', //指向一个按钮触发上传
//选择文件后的回调函数
choose: function(obj) {
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件，如果是多文件，则会遍历。
obj.preview(function(index, file, result) {
//console.log(index); //得到文件索引
//console.log(file); //得到文件对象
//console.log(result); //得到文件base64编码，比如图片
window["imgNumber"] = result;
//图片插入到选择框中，
$("#ongImg").html("<img src = '" + result +
"' height='150px;' width='130px;' />");
});
},
//上传完成后回调，res为服务器端返回的数据
done: function(res) {
//关闭loading
layer.close(index);
}
});
});本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
