LayUI + PHP + MySQL 使用小结

　　LayUI是一款很不错的前端框架，下线有点可惜了。在前端的开发中，作为一般的小型开发还是可以的。

　　将这几天在使用过程中的问题整理一下，方便以后的使用。

　　1、验证码的点击更新：

　　2、ajax的更新

　　在加载了layui.js后，可以按它指定的方式进行ajax的操作。

    layui.use(['form','jquery'], function () {
        var $ = layui.jquery,form = layui.form,layer = layui.layer;
        // 进行登录操作
        form.on('submit(login)', function (data) {
            $.ajax({
                url:'login.php',
                data:"username="+data.username+"&password="+data.password+"&captcha="+data.captcha,
                type:'POST',
                success:function (data) {
                    if (data == 'OK'){
                        location.href = "index.php";
                    }else{
                        layer.msg(data);
                    }
                }
            });
            return false;			
        });
    });

　　3、为了方便使用LayUI，在页面上使用两个DIV在最前面。

	

		

			
			
				

					
				
				

					数据记录
				
												
			
			
			
				
				

					
计划安排
					

						设置参数
						
							用户表
							人员列表
							单位列表							
						
					
				
			
		
		

		

	

　　上面就是实际的做法，可以在空白的页面上设计好，比如上面的是最简单的上、中、下的界面布局，这个布局的细微部分（包含了LayUI的界面组件）都按照自己的想法随意定制页面，最后套上两个LayUI的DIV，方便对LayUI元素的引用操作。

　　4、界面元素可以随意定义事件和响应，设置了ID。

    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        $('#DRUserList').on('事件名', function () {
                layer.open({
                    type: 2
                    , title: '用户管理' //显示标题栏：['用户管理', 'font-size:18px;']
                    , closeBtn: 0
                    , area: ['870px', '700px']   //
                    , shade: 0.3
                    , id: 'LAY_layuipro_DRUser' //设定一个id，防止重复弹出
                    , btn: ['关闭']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: 'DRUserList.html'
                    , success: function (layero) {
						
                        // var btn = layero.find('.layui-layer-btn');
                        // btn.find('.layui-layer-btn0').attr({
                        //     href: 'http://www.xjyt.petrochina/'
                        //     , target: '_blank'
                        // });
						
                    }
                });		
        });

　　5、在做记录的增、删、改后的表格的刷新，也可以增加刷新按钮，通过触发它的点击来实现更新。

　　注意：表格提交的方式需要留意，开始我以为是POST，始终分页不变换数据，换成GET就可以了。

$(".layui-laypage-btn")[0].click();

　　6、表格中的删除多行。

                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                // layer.alert(JSON.stringify(data));
				// console.log(JSON.stringify(data));
				for(var i=0;i