layui 常用操作
一、index（管理）页面
1.渲染数据表格
html:
<tableclass="layui-hide"id="demo"lay-filter="demo"></table>
<scripttype="text/html"id="barDemo">
<aclass="layui-btn layui-btn-xs"lay-event="edit">修改</a>
<aclass="layui-btn layui-btn-xs"lay-event="del">删除</a>
</script>
js:
table.render({
elem:'#demo'
,url:'{$site_url}/admin/index.php?app=coupon&act=coupon_getAll'
,limits: [20,40,60,80]
,limit:20
,cols: [[
// { type: 'checkbox' }
{field:'coupon_id',title:'优惠券id',sort:true}
, {field:'store_name',title:'店铺名称'}
, {field:'store_id',title:'店铺id',hide:true}
, {field:'coupon_name',title:'优惠券名称'}
, {field:'coupon_value',title:'优惠券金额'}
, {field:'reg_date',title:'开始时间'}
, {field:'end_time',title:'结束时间'}
, {field:'min_amount',title:'最小使用价格'}
, {field:'coupon_num',title:'优惠券数量'}
, {field:'number',title:'已领优惠券数量'}
, {field:'if_issue',title:'是否发布',templet:function(d) {if(d.if_issue==0) {return"否"; }else{return"是"} } }
, {fixed:'right',title:'操作',align:'center',toolbar:'#barDemo'}
]]
,page:true
});
//监听行工具事件
table.on('tool(demo)',function(obj) {
vardata=obj.data;
varflag=obj.event;
if(flag=='edit') {
layer.open({
type:1,
title:"修改品牌信息",
area: ['1000px','700px'],
content:$("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
maxmin:true,
offset: [0]
});
getStores("#stores");
coupon_id=data.coupon_id
console.log(coupon_id,123)
form.render('select');
setFormValue(obj,data);
}elseif(flag=='del') {
type="del";
layer.confirm('确定删除该产品吗?',function(index) {
//执行删除
console.log(index)
del(data.coupon_id);
layer.close(index)
location.reload();
})
}else{
$("#suretype").html("您确认要拒绝通过吗？")
layer.open({
type:1
,title:'拒绝通过'
,area: ['390px','160px']
,shade:0
,maxmin:true
,offset: [0]
,content:$("#examine")
});
brand_id=data.brand_id;
}
});
通过搜索按钮进行表格数据重载
//查询按钮
$(document).on('click','#ss',function() {//#ss为搜索按钮的id
varbrand=$("#brand_name");
varbrand_name=brand.val();
layui.use('table',function() {
vartable=layui.table;
table.reload('demo', {
url:'{$site_url}/admin/index.php?app=newstore&act=brand_list'
,where: {//设定异步数据接口的额外参数，任意设
brand_name,
}
,page: {
curr:1//重新从第 1 页开始
}
});
});
});
二、表单相关
1.通过jq赋值
//input的值
//获取：
vartag_name=$("#couponAddName").val()
//使，下拉框的option的value为xx的被选中
$("#all_scategory option[value="+store_data.cate_id+"]").prop("selected",true);
//给日期输入框赋值，赋值必须按照这种格式才能成功“2019-08-07”
document.getElementById("myDate").value="2019-08-07";
//单选框赋值/取值
$("input:[type='radio']").attr("checked",true);
$("input:[type='radio']").val()
//jq的属性赋值，可以用在img标签上
$("#now_img ").prop("src","{$site_url}"+"/"+data.brand_logo);
//多选框赋值
1.获取单个checkbox选中项(三种写法)：
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2.获取多个checkbox选中项：
$('input:checkbox').each(function() {
if($(this).attr('checked')==true) {
alert($(this).val());
}
});
3.设置第一个checkbox为选中值：
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4.设置最后一个checkbox为选中值：
$('input:radio:last').attr('checked','checked');
或者
$('input:radio:last').attr('checked','true');
5.根据索引值设置任意一个checkbox为选中值：
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked','true');
6.选中多个checkbox：
同时选中第1个和第2个的checkbox：
$('input:radio').slice(0,2).attr('checked','true');
7.根据Value值设置checkbox为选中值：
$("input:checkbox[value='1']").attr('checked','true');
8.删除Value=1的checkbox：
$("input:checkbox[value='1']").remove();
9.删除第几个checkbox：
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10.遍历checkbox：
$('input:checkbox').each(function(index,domEle) {
//写入代码
});
11.全部选中
$('input:checkbox').each(function() {
$(this).attr('checked',true);
});
12.全部取消选择：
$('input:checkbox').each(function() {
$(this).attr('checked',false);
});
2.表单赋值**
//日期表单
laydate.render({
elem:'#test'
,value:'2017-09-10'
,isInitValue:false//是否允许填充初始值，默认为 true
})
//其他表单
//name:value
functionsetFormValue(data) {//data是数据表格的toolbar按钮的obj.data
//表单初始赋值
form.val('example', {
"modules1":data.store_id
,"Coupon_name":data.coupon_name//
,"Coupon_money":data.coupon_value//优惠券金额
/* ,"test6": "data.reg_date+' - '+data.end_time"//优惠券时间 */
,"minPrice":data.min_amount//最小使用价格
,"release":data.if_issue//是否发布
,"Coupon_num":data.coupon_num//优惠券数量
})
}
3.获取form表单的值
请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类
html:
<form class="layui-form">
<button id="btnSubmit" lay-filter="btnSubmit" lay-submit>保存</button>
</form>
js
form.on('submit(btnSubmit)', function (data) {
//表单数据formData
var formData = data.field;
});
4.表单的事件监听
具体语法：form.on('event(过滤器值)',callback);
可以用于监听：select，checkbox，switch，radio，submit的改变
一、监听select的改变
<!--不用form用div也可以-->
<formclass="layui-form">
<divclass="layui-form-item">
<labelclass="layui-form-label">下拉选择框</label>
<divclass="layui-input-block">
<selectname="interest"lay-filter="aihao">
<optionvalue="0">写作</option>
<optionvalue="1">阅读</option>
<optionvalue="2">听歌</option>
<optionvalue="4">游戏</option>
</select>
</div>
</div>
</form>
<scripttype="text/javascript"src="./layui/layui.js"></script>
<scripttype="text/javascript">
layui.use('form',function(){
varform=layui.form;
form.on('select(aihao)',function(data){
console.log(data);
console.log(data.elem);//得到select原始DOM对象
console.log(data.value);//得到被选中的值
console.log(data.othis);//得到美化后的DOM对象
});
});
</script>
监听checkbox复选
form.on('checkbox(filter)',function(data){
console.log(data.elem);//得到checkbox原始DOM对象
console.log(data.elem.checked);//是否被选中，true或者false
console.log(data.value);//复选框value值，也可以通过data.elem.value得到
console.log(data.othis);//得到美化后的DOM对象
});
监听switch开关：
form.on('switch(filter)',function(data){
console.log(data.elem);//得到checkbox原始DOM对象
console.log(data.elem.checked);//开关是否开启，true或者false
console.log(data.value);//开关value值，也可以通过data.elem.value得到
console.log(data.othis);//得到美化后的DOM对象
});
监听radio单选：
form.on('radio(filter)',function(data){
console.log(data.elem);//得到radio原始DOM对象
console.log(data.value);//被点击的radio的value值
});
监听submit提交：
<buttonlay-submitlay-filter="*">提交</button>
form.on('submit(*)',function(data){
console.log(data.elem)//被执行事件的元素DOM对象，一般为button对象
console.log(data.form)//被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field)//当前容器的全部表单字段，名值对形式：{name: value}
returnfalse;//阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
5.获取表单的innerHTML
//要jq和layui结合使用，先获取input的value，再用jq的属性选择器对value进行筛选并获取innerHTML
三、弹窗相关
1.confirm弹框
//监听表单的toolbar的删除按钮
if(flag=='del') {
type="del";
layer.confirm('确定删除该产品吗?',function(index) {
//执行删除
console.log(index)
del(data.coupon_id);
layer.close(index)
location.reload();
})
2.layer.open
layer.open({
type:1,
title:"修改品牌信息",
area: ['1000px','700px'],
content:$("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
maxmin:true,
offset: [0]
});
//打开其他的页面，并且要传参
