2019-08-07

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]

});

​

//打开其他的页面，并且要传参

​