1、【form】元素
<div class="site-title">
<fieldset>><legend><a name="use">小睹为快</a></legend></fieldset>
</div>
<div class="site-text site-block">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="reqquired" 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="password" name="password" required lay-verify="required" lay-verType="tips" placeholder="请输入密码" autocomplete="off" 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-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest" value="1">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text" >
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</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>2、【form】更新渲染
页面元素设计完成后，要使用JS刷新form，否则，select，radio等元素无法显示。
</form>
<script src="layui.js"></script>
<script>
layui.use('form',function(){
var form=layui.form;
//form events;
form.render();
});
</script>2.1—局部渲染
可局部渲染的元素
- 单选框——radio
- 复选框——checkbox
- 下拉列表——switch
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染2.2—form提供的JS接口精确控制。目前我们可支持的属性如下表所示：
3、动态新增节点
在html、JS文件中动态新增节点，需要强制初始化才能启用节点的效果
var parentN=document.getElementById('user-controlbox');
parentN.insertAdjacentHTML('beforeEnd', '<li class="layui-nav-item" id="user-set-login"><a href="javascript:;">登录'+
'</a><dl class="layui-nav-child">'+
' <dd><a href="">项目一</a></dd>'+
' <dd><a href="">项目二</a></dd>'+
'</dl></li>');
parentN.insertAdjacentHTML('beforeEnd','<li class="layui-nav-item"><a href="javascript:;">注册</a></li>');
layui.use('element',function(){
layui.element.init();
});4、lay-verify定义
lay-verify：是表单验证的关键字
有以下值供选择：
required (必填项)
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity(身份证)
自定义值
同时支持多条规则的验证：
格式：lay-verify=”验证A|验证B”
如：lay-verify=”required|phone|number”
五、table分页标签中文乱码
初步处理方法：使用notepad将layui.js另存为UTF-8 BOM格式。html代码中加载layui.js设置为utf-8。
问题依然存在。
将lay文件夹中laypage.js另存为UTF-8 BOM格式。问题解决
六、table元素
1、非后台连接的table
可用于前台数据的临存
<table id="grid01" class="layui-table" lay-skin="line">
<colgroup>
<col width="5%">
<col width="5%">
<col width="10%" >
<col width="5%" >
<col width="75%" >
</colgroup>
<thead>
<tr>
<th></th>
<th>学号</th>
<th>姓名</th>
<th>年级</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>效果如下
表格数据新增如下：
var tdPiace="<input type='checkbox' name='ckbRow' lay-skin='primary' />";
$("#btnok").on('click',function(){
var addform=document.getElementById("form-new");
console.log("TAG-------------"+addform["txtnumber"].value);
$("#grid01 tbody").append("<tr><td>"+tdPiace+
"</td><td>"+addform["txtnumber"].value+
"</td><td>"+addform["txtname"].value+
"</td><td>"+addform["txtgrade"].value+
"</td><td>"+addform["txtdesc"].value+
"</td></tr>");
})
//form-new代码如下
<form class="layui-form" id="form-new" action="">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-form-label">学号</div>
<div class="layui-input-inline">
<input type="text" name="txtnumber" class="layui-input" />
</div>
</div>
<div class="layui-inline">
<div class="layui-form-label">姓名</div>
<div class="layui-input-inline">
<input type="text" name="txtname" class="layui-input" />
</div>
</div>
<div class="layui-inline">
<div class="layui-form-label">年级</div>
<div class="layui-input-inline">
<input type="text" name="txtgrade" class="layui-input" />
</div>
</div>
<div class="layui-inline">
<div class="layui-form-label">备注</div>
<div class="layui-input-inline">
<input type="text" name="txtdesc" class="layui-input" />
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-form-label"></div>
<div class="layui-input-inline">
<button type="button" id="btnok" class="layui-btn">
<i class="layui-icon layui-icon-ok"></i>确定
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
//删除逻辑：先勾选行前复选框，删除指定的行
$("#btnremove").click(function(){
/*
$("#grid01 tr").eq(1).remove();
*/
var rows=$("input[name=ckbRow]:checked");
if(rows.size()>0){
rows.each(function(index, element) {
$(this).parent().parent().remove();
});
}else{
layer.msg("请选择要删除的记录行");
}
})
//清空表格全部行
$("#btnclear").click(function(){
var rows=$("input[name=ckbRow]");
if(rows.size()>0){
rows.each(function(index, element) {
$(this).parent().parent().remove();
});
}
})读取行数据的操作
$("#btnsubmit").click(function(){
var keyArray=new Array();
var rows=$("#grid01 tbody tr");
rows.each(function(index,element) {
var number= $(this).find("td:nth-child(2)").text();
var name= $(this).find("td:nth-child(3)").text();
keyArray.push({uCD:number,Name:name});
console.log("TAG-----------------2列的值="+number );
console.log("TAG-----------------3列的值="+ name);
});
//查看队列的json
console.log("RES----------------"+JSON.stringify(keyArray));
});
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
