layui 常用操作
一、index（管理）頁面
1.渲染數(shù)據(jù)表格
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:'優(yōu)惠券id',sort:true}
, {field:'store_name',title:'店鋪名稱'}
, {field:'store_id',title:'店鋪id',hide:true}
, {field:'coupon_name',title:'優(yōu)惠券名稱'}
, {field:'coupon_value',title:'優(yōu)惠券金額'}
, {field:'reg_date',title:'開始時(shí)間'}
, {field:'end_time',title:'結(jié)束時(shí)間'}
, {field:'min_amount',title:'最小使用價(jià)格'}
, {field:'coupon_num',title:'優(yōu)惠券數(shù)量'}
, {field:'number',title:'已領(lǐng)優(yōu)惠券數(shù)量'}
, {field:'if_issue',title:'是否發(fā)布',templet:function(d) {if(d.if_issue==0) {return"否"; }else{return"是"} } }
, {fixed:'right',title:'操作',align:'center',toolbar:'#barDemo'}
? ? ? ? ?? ]]
,page:true
? ? ?? });
?
//監(jiān)聽行工具事件
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('確定刪除該產(chǎn)品嗎?',function(index) {
//執(zhí)行刪除
console.log(index)
del(data.coupon_id);
layer.close(index)
location.reload();
? ? ? ? ? ? ?? })
}else{
$("#suretype").html("您確認(rèn)要拒絕通過嗎？")
layer.open({
type:1
,title:'拒絕通過'
,area: ['390px','160px']
,shade:0
,maxmin:true
,offset: [0]
,content:$("#examine")
? ? ? ? ? ? ?? });
brand_id=data.brand_id;
? ? ? ? ?? }
? ? ?? });
?
?
通過搜索按鈕進(jìn)行表格數(shù)據(jù)重載
//查詢按鈕
$(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: {//設(shè)定異步數(shù)據(jù)接口的額外參數(shù)，任意設(shè)
brand_name,
? ? ? ? ?? }
,page: {
curr:1//重新從第 1 頁開始
? ? ? ? ?? }
? ? ?? });
?? });
});
二类浪、表單相關(guān)
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標(biāo)簽上
$("#now_img ").prop("src","{$site_url}"+"/"+data.brand_logo);
?
//多選框賦值
1.獲取單個(gè)checkbox選中項(xiàng)(三種寫法)：
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
?
2.獲取多個(gè)checkbox選中項(xiàng)：
$('input:checkbox').each(function() {
if($(this).attr('checked')==true) {
alert($(this).val());
?? }
});
?
3.設(shè)置第一個(gè)checkbox為選中值：
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
?
4.設(shè)置最后一個(gè)checkbox為選中值：
$('input:radio:last').attr('checked','checked');
或者
$('input:radio:last').attr('checked','true');
?
5.根據(jù)索引值設(shè)置任意一個(gè)checkbox為選中值：
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked','true');
?
6.選中多個(gè)checkbox：
同時(shí)選中第1個(gè)和第2個(gè)的checkbox：
$('input:radio').slice(0,2).attr('checked','true');
?
7.根據(jù)Value值設(shè)置checkbox為選中值：
$("input:checkbox[value='1']").attr('checked','true');
?
8.刪除Value=1的checkbox：
$("input:checkbox[value='1']").remove();
?
9.刪除第幾個(gè)checkbox：
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如刪除第3個(gè)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//是否允許填充初始值纠吴，默認(rèn)為 true
})
?
//其他表單
//name:value
functionsetFormValue(data) {//data是數(shù)據(jù)表格的toolbar按鈕的obj.data
//表單初始賦值
form.val('example', {
"modules1":data.store_id
,"Coupon_name":data.coupon_name//
,"Coupon_money":data.coupon_value//優(yōu)惠券金額
/* ,"test6": "data.reg_date+' - '+data.end_time"http://優(yōu)惠券時(shí)間 */
,"minPrice":data.min_amount//最小使用價(jià)格
,"release":data.if_issue//是否發(fā)布
,"Coupon_num":data.coupon_num//優(yōu)惠券數(shù)量
? ? ?? })
?? }
3.獲取form表單的值
請注意：如果不加載form模塊，select慧瘤、checkbox戴已、radio等將無法顯示，并且無法使用form相關(guān)功能
?
required：注冊瀏覽器所規(guī)定的必填字段
lay-verify：注冊form模塊需要驗(yàn)證的類型
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) {
?? //表單數(shù)據(jù)formData
?? var formData = data.field;
});
4.表單的事件監(jiān)聽
具體語法：form.on('event(過濾器值)',callback);
可以用于監(jiān)聽：select锅减，checkbox糖儡，switch，radio怔匣，submit的改變
?
一握联、監(jiān)聽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>
?
監(jiān)聽checkbox復(fù)選
form.on('checkbox(filter)',function(data){
console.log(data.elem);//得到checkbox原始DOM對象
console.log(data.elem.checked);//是否被選中，true或者false
console.log(data.value);//復(fù)選框value值每瞒，也可以通過data.elem.value得到
console.log(data.othis);//得到美化后的DOM對象
});
?
監(jiān)聽switch開關(guān)：
form.on('switch(filter)',function(data){
console.log(data.elem);//得到checkbox原始DOM對象
console.log(data.elem.checked);//開關(guān)是否開啟金闽，true或者false
console.log(data.value);//開關(guān)value值，也可以通過data.elem.value得到
console.log(data.othis);//得到美化后的DOM對象
});
?
監(jiān)聽radio單選：
form.on('radio(filter)',function(data){
console.log(data.elem);//得到radio原始DOM對象
console.log(data.value);//被點(diǎn)擊的radio的value值
});
?
監(jiān)聽submit提交：
<buttonlay-submitlay-filter="*">提交</button>
form.on('submit(*)',function(data){
console.log(data.elem)//被執(zhí)行事件的元素DOM對象剿骨，一般為button對象
console.log(data.form)//被執(zhí)行提交的form對象代芜，一般在存在form標(biāo)簽時(shí)才會(huì)返回
console.log(data.field)//當(dāng)前容器的全部表單字段，名值對形式：{name: value}
returnfalse;//阻止表單跳轉(zhuǎn)浓利。如果需要表單跳轉(zhuǎn)蜒犯，去掉這段即可。
});
5.獲取表單的innerHTML
//要jq和layui結(jié)合使用荞膘，先獲取input的value，再用jq的屬性選擇器對value進(jìn)行篩選并獲取innerHTML
?
?
三玉工、彈窗相關(guān)
1.confirm彈框
//監(jiān)聽表單的toolbar的刪除按鈕
if(flag=='del') {
type="del";
layer.confirm('確定刪除該產(chǎn)品嗎?',function(index) {
//執(zhí)行刪除
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]
});
?
//打開其他的頁面羽资，并且要傳參
?
