LayUI + PHP + MySQL 使用小结

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

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

　　1、验证码的点击更新：

<img class="validateImg"  src="captcha.php"  onclick="this.src=this.src+'?'+Math.random()" width="100" height="38">

　　2、ajax的更新

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

<script src="./lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    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;			
        });
    });
</script>

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

<div class="layuimini-container">
	<div class="layuimini-main">
		<div class="header">
			<div class="left">			
				<div style="display: inline-block;vertical-align: middle;margin-top: 5px;margin-left: 5px;">
					<img src="./images/logo.png" width="40px" height="40px">
				</div>
				<div style="display: inline-block;vertical-align: middle;margin-left: 10px;">
					<label style="font-size: 24px;color: #333333;">数据记录</label>
				</div>												
			</div>
			<div class="right">			
				<!-- 菜单栏 -->
				<ul class="layui-nav" style="float: left;" id="layerDemo">
					<li class="layui-nav-item"><a href="">计划安排</a></li>
					<li class="layui-nav-item">
						<a href="">设置参数</a>
						<dl class="layui-nav-child">
							<a data-method="notice"  id="DRUser" >用户表</a>
							<a data-method="confirmTrans" id="DRMemberList">人员列表</a>
							<a data-method="setTop"  id="DRUnitList">单位列表</a>							
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<div class="content"></div>
		<div class="footer"></div>
	</div>
</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<data.length;i++){
					$.ajax({
						url:'DRUserDel.php',
						data:"C01="+data[i]['C01'],
						type:'POST',
						success:function (data) {
							$(".layui-laypage-btn")[0].click();
						}
					});
					// console.log(data[i]['C01']);
				}

　　这里偷懒了，其实还是按照ID值来删除的。

　　7、修改数据前，检查数据是否经过了改动。

		Init_C01=GetQueryString("C01");
		Init_C02=GetQueryString("C02");
		Init_C03=GetQueryString("C03");
		Init_C04=GetQueryString("C04");
		Init_C05=GetQueryString("C05");
		
		document.getElementById("CC01").value=Init_C01;
		document.getElementById("CC02").value=Init_C02;
		document.getElementById("CC03").value=Init_C03;
		document.getElementById("CC05").value=Init_C05;

		if(GetQueryString("C04")=='管理员'){
			$('#CC04_A ').attr("checked", true);
			$('#CC04_B ').attr("checked", false);
		}else{
			$('#CC04_A ').attr("checked", false);			
			$('#CC04_B ').attr("checked", true);
		}
		form.render('radio'); //必须加上这一句

        //监听提交
        form.on('submit(saveBtn)', function (data) {
			var table = layui.table;
			//判断数据是否更改
			var strUpdate='';

			if(document.getElementById("CC02").value != Init_C02){
				strUpdate=" C02='"+document.getElementById("CC02").value+"'";
			}

			if(document.getElementById("CC03").value != Init_C03){
				if(strUpdate==''){
					strUpdate=" C03='"+document.getElementById("CC03").value+"'";
				}else{
					strUpdate=strUpdate+" , C03='"+document.getElementById("CC03").value+"'";
				}
			}
			
			var strUserType=$('#UserType input[name="CC04"]:checked ').val();
			
			if(!strUserType != Init_C04){
				if(strUpdate==''){
					strUpdate=" C04='"+strUserType+"'";
				}else{
					strUpdate=strUpdate+" , C04='"+strUserType+"'";
				}
			}
			
			if(document.getElementById("CC05").value != Init_C05){
				if(strUpdate==''){
					strUpdate=" C05='"+document.getElementById("CC05").value+"'";
				}else{
					strUpdate=strUpdate+" , C05='"+document.getElementById("CC05").value+"'";
				}
			}
			
			if(strUpdate !=''){
				//提交更改	
				var jsonData=[];//准备一个空数组			 
				var updateData=new Object();//准备对象
				updateData.C01=Init_C01;
				updateData.Update=strUpdate;
				jsonData.push(updateData);
				var json_str=JSON.stringify(jsonData);
				$.ajax({
					url:'DRUserUpdate.php',
					data:json_str,
					type:'POST',
					datetype:'json',
					success:function (data) {
						window.parent.location.reload();
					}
				});
			}
			var iframeIndex = parent.layer.getFrameIndex(window.name);
			parent.layer.close(iframeIndex);

            return false;
        });

　　没有改动就不提交，改动了就只提交改动后的字段。

　　radio的更新必须加上form.render('radio'); 

　　8、提交数据前的处理

			//检查数据
			var canContinue=true;//假定没有错误
			var strFalse="";
			
			var jsonData=[];//准备一个空数组			 
			var updateData=new Object();//准备对象
			updateData.strTable="druserlist";
			updateData.strWhere="c01='"+document.getElementById("DC01").value+"'";
			jsonData.push(updateData);
			var json_str=JSON.stringify(jsonData);

			$.ajax({//检查员工编号是否存在
				url:'isExist.php',
				data:json_str,
				type:'POST',
				datetype:'json',
				async:false,//必须设置为同步
				success:function (data) {
					console.log(data);
					if(data=='YES'){ 
						canContinue=false;
						strFalse="员工编号已经存在！";
					}
				}
			});

			jsonData=[];//数组清空
			updateData.strWhere="c02='"+document.getElementById("DC02").value+"'";
			jsonData.push(updateData);
			var json_str=JSON.stringify(jsonData);
			$.ajax({//检查姓名是否重复
				url:'isExist.php',
				data:json_str,
				type:'POST',
				datetype:'json',
				async:false,//必须设置为同步
				success:function (data) {
					console.log(data);
					if(data=='YES'){ 
						canContinue=false;
						strFalse="用户姓名已经存在！";
					}
				}
			});

			if(canContinue){
				$.ajax({
						url:'DRUserAdd.php',
						data:"C01="+data.DC01+"&C02="+data.DC02+"&C03="+data.DC03+"&C04="+data.DC04+"&C05="+data.DC05,
						type:'POST',
						success:function (data) {
							var iframeIndex = parent.layer.getFrameIndex(window.name);
							parent.layer.close(iframeIndex);
														
							window.parent.location.reload();						
						}
					});				
			}else{
					layer.alert(strFalse);
					console.log(strFalse);
			}

　　9、php的操作

　　在php部分，可以统一处理，就是在前端合成SQL语句发到PHP接收处理就行了，不需要分增、删、改，这样程序就简单多了。

　　查询需要单独处理一下。

　　fetch_all() ：抓取所有的结果行并且以关联数据，数值索引数组，或者两者皆有的方式返回结果集。
　　fetch_array() ：以一个关联数组，数值索引数组，或者两者皆有的方式抓取一行结果。
　　fetch_object() ：以对象返回结果集的当前行。
　　fetch_row() ：以枚举数组方式返回一行结果
　　fetch_assoc()： 以一个关联数组方式抓取一行结果。
　　fetch_field_direct()： 以对象返回结果集中单字段的元数据。
　　fetch_field() ：以对象返回结果集中的列信息。
　　fetch_fields() ：以对象数组返回代表结果集中的列信息。

　　在分页操作中，有些数据不方便跟踪，可以把数据写到临时文件中，这样就可以跟踪数据变化了。

　　后面再更新。