layui學習筆記（通俗易懂）

layui加載表格

<table id="zjTable" lay-filter="czjTable"></table>

 對應的js代碼

 layui.use('table', function () {
            var table = layui.table;
            //寬度設置
            var w_width = window.screen.width;
            var p_width = (w_width - 222 - 96) / 9;
            console.log("分辨率寬度:",w_width);
            console.log("表格每格寬度:",p_width);
            table.render({
                elem: '#zjTable',
                url: '${basePath}/manage/demand/list?sort=demand_id&order=desc',
                limit: 10,
                page: true, //開啓分頁
                id: 'testReload',
                cellMinWidth: p_width,
                cols: [
                    [ //表頭
                        {
                            title: '序號',
                            templet: '#indexTpl',
							width:53
                        },
                        {
                            field: 'unitName',
                            title: '企業名稱'
                        },
                        {
                            field: 'contacts',
                            title: '法人姓名',
                            width:84
                        },
                        {
                            field: 'tel',
                            title: '聯繫方式'
                        },
                        {
                            field: 'amount',
                            title: '融資金額',
                            width:90
                        },
                        {
                            field: 'demandType',
                            title: '需求類型',
                            width:92
                        },
                        {
                            field: 'status',
                            title: '狀態',
                            width:92
                        },
	                    {
							field: 'registTime',
							title: '發佈時間',
                            sort: true,
                            templet: '#registTime'
						}
                        {
                            field: 'checkTag',
                            title: '發佈狀態',
                            width:92
                        },
                        {
                            field: 'right',
                            title: '操作',
                            toolbar: "#barDemo",
                            width:255
                        }
                    ]
                ],
                done: function (res, page, count) {
                    $("[data-field='checkTag']").children().each(function () {
                        if ($(this).text() == '0') {
                            $(this).html('待審覈');
                        }
                        if ($(this).text() == '1') {
                            $(this).html('已發佈');
                        }
                        if ($(this).text() == '2') {
                            $(this).html('不通過');
                        }
                    });
                    $("[data-field='amount']").children().each(function () {
                        if ($(this).text() == '融資金額') {
                            $(this).html($(this).text());
                        }else {
                            $(this).html($(this).text()+'萬元');
			}
                    });
                    $("[data-field='status']").children().each(function () {
                        if ($(this).text() == '1') {
                            $(this).html('項目約談');
                        }
                        if ($(this).text() == '2') {
                            $(this).html('對接中');
                        }
                        if ($(this).text() == '3') {
                            $(this).html('已完成');
                        }
                    });
                    $("[data-field='demandType']").children().each(function () {
                        if ($(this).text() == '2') {
                            $(this).html('股權融資');
                        }
                        if ($(this).text() == '3') {
                            $(this).html('債權融資');
                        }
                        if ($(this).text() == '4') {
                            $(this).html('整體轉讓');
                        }
                        if ($(this).text() == '5') {
                            $(this).html('其他融資');
                        }
                    });
                }
            });

時間的優化

<!--時間處理方法-->
	<script id="registTime" type="text/html">
		{{createTime(d.registTime)}}
	</script>
	<script type="text/javascript">
        function createTime(v){
            var date = new Date();
            date.setTime(+v);
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            m = m<10?'0'+m:m;
            var d = date.getDate();
            d = d<10?("0"+d):d;
            var h = date.getHours();
            h = h<10?("0"+h):h;
            var M = date.getMinutes();
            M = M<10?("0"+M):M;
            var str = y+"-"+m+"-"+d;
            return str;
        }
	</script>

ajax返回數據成功之後重新加載表單內容

   table.reload('testReload', {
                                        page:{
                                            curr:1
										}
                                    });

form表單自定校驗的時候，能夠直接return字符串提示消息

	//自定義驗證規則
		  	form.verify({
		    	pho: [/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/, '請輸入正確的手機號碼'],
		    	password: [/^[A-Za-z0-9]{6,32}$/, '密碼爲6-32位字母/數字組合'],
				repassword:function(value){
					var repassvalue = $('.pass').val();
					if(value != repassvalue){
						return '兩次輸入的密碼不一致!';
					}
				}
		  	});

提交form表單，用layer.msg顯示提示信息時，出現提示框閃現或顯示不出來的情況，是因爲表單提交後默認是表單跳轉，如果想顯示提示信息，需要加上"return flase;"，阻止表單跳轉。

form.on('submit(sub)',function(data){
			  	var field = data.field;
			  	
			  	layer.msg(field.username,{icon:1});
			  	
			  	return false;
			  });

提交form表單，用if語句對錶單字段進行判斷時，如果不滿足if 語句的條件，而想中斷操作時，要加上"return false;"，不然程序默認繼續執行。

form.on('submit(sub2)',function(data){
			  	var field = data.field,
			  	username = field.username,
			  	name = field.name;
			  	
			  	if(username!==name){
			  		layer.msg('輸入有錯');
			  		return false;//return false將中斷操作，否則會繼續執行程序
			  	}
			  	if(username=='1'){
			  		layer.msg('是的');
			  	}
			  	return false;
			  });

彈出層設置

   if (obj.event === 'view') {
                    layer.open({
                        type: 1,
                        title: '服務需求詳情',
                        shade: 0.3, //遮罩層
						shadeClose: false,
                        area: ['875px', '550px'],
                        content: $('.amend'),
                        cancel: function (index, layero) {
                            layer.closeAll();
                            $('.amend').hide()
                        }
                    })

                } 

layui.use中自定義函數的調用

layui.use(['jquery'], function(){
    //在自定義函數中使用了jQuery，所以這裏要加載該模塊
    var $ = layui.$;
 
    var Test=function(){
			      	$('#sub').css("background-color","#00F7DE");
			      }
    
    $('#sub').click(function() {
			            // todo
			           	Test();
			        });
});

• layui.use內自定義的函數，在layui.use外調用

//因爲頁面加載的函數裏用到了jQuery，所以這裏要加載jQuery
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
layui.use(['jquery'], function(){
			      var $ = layui.$;
 
                  window.Show=function(){
			      	$("#test").html("hello world");
			      }
});
 
$(function(){
			    	$('#sub1').click(function(){
			    		Show();
			    	});
			    });
</script>

• .layui使用jQuery

layui.use('layer', function(){ 
  var $ = layui.$ //由於layer彈層依賴jQuery，所以可以直接得到
  ,layer = layui.layer;
 
  //……
});

layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重點處
  ,layer = layui.layer;
  
  //後面就跟你平時使用jQuery一樣
  $('body').append('hello jquery');
});