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() ：以物件陣列回傳代表結果集中的列資訊，
在分頁操作中，有些資料不方便跟蹤，可以把資料寫到臨時檔案中，這樣就可以跟蹤資料變化了，
后面再更新，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/391583.html
標籤：其他