有關菜單進行“估清”的功能

這里的估清，我用在了菜單上，也就是這個菜品當天能不能點餐，這就是估清的功能。

進行估清的菜單，我是寫在了數據庫中，讓數據庫這張菜單表進行遍歷出想要顯示的內容：

一、數據庫的結構

在數據庫中建立一張菜單表，字段內容有點關聯，比如這個類別中的菜品

下面的表就是我建立的表

二、表建立結束后，就是想想這個功能了

（1）用什么方式顯示出這個這個功能

（2）顯示出來，進行估清時，是不是要對應數據庫的修改

一步一步的來，首先是這個估清功能的樣式

注意：在編寫代碼之前，要把將要運用到的所有東西提前調入，比如bootstrap、封裝好的數據庫的類

1.可以通過一個按鈕來進行顯示菜單，單擊這個按鈕進行彈出框，然后顯示菜單

<div data-toggle="modal" data-target="#myModal2" style="font-size:20px; font-weight:bold">估清</div>

這是對這個估清添加了彈出模態框效果

2.模態框可以運用bootstrap的模態框

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">估清餐品</h4>
               </div>
               <div class="modal-body" id="content">
               　　//這里就是遍歷數據庫的菜單內容
               </div>
               <div class="modal-footer">
                    <button id="tijiao" type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                        
                </div>
         </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

3.進行遍歷數據庫，這里的遍歷時有條件的

（1）如果它的狀態是1的話就是這個菜是不能點餐的，相反則是可以別點餐

（2）因為類別有點多，這里也是可以借助bootstrap的標簽頁

（3）可以用ajax也可以直接寫php，我這里是直接寫的php代碼

 

3.1 這是顯示類別的，相當於一個標簽，點擊每一個標簽名會顯示不同的標簽內容

<ul id="myTab" class="nav nav-tabs">
    <li class="active" style=" font-size:30px" ><a href="#home" data-toggle="tab"> 飯面類</a>
    </li>
    <li style=" font-size:30px"><a href="#ios" data-toggle="tab">特色小吃</a>
    </li>
    <li class="dropdown" style=" font-size:30px">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
                                       data-toggle="dropdown">酒水飲品 <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" style=" font-size:25px">
             <li><a href="#jmeter" tabindex="-1" data-toggle="tab">酒水</a>
             </li>
             <li><a href="#ejb" tabindex="-1" data-toggle="tab">飲品</a>
             </li>
         </ul>
   </li>
</ul>

3.2 這個就是遍歷數據中的菜品：要調用封裝好的類

include("DBDA.php");
$db = new DBDA();

 

<div class="tab-pane fade in active" id="home">
　　<p id="mian">
　　　　<?php
	　　$sql = "select * from caidan where fcode =('1101')"; //查詢這個類別中的所有菜單
	　　$attr = $db->Query($sql);  //執行封裝好類中的方法
											
	　　foreach($attr as $v)
	　　{
	　　　　$v1 = $v[4];  //讓菜單中的狀態相等
	　　　　$sql1 = "select isok from caidan ";
	　　　　$attr1 = $db->StrQuery($sql1);
	　　　　if($attr1=$v1)
	　　　　{
　　　　　　　　　　　//如果等於那就像是出來，這里的aa1的樣式灰色，表示不能點;aa就是綠色表示能點
	　　　　　　echo "<input type='button' value='$v[2]' class='aa1' biaoshi='lv' code='$v[1]' />";		
	　　　　}
	　　　　else
	　　　　{											
	　　　　　　echo "<input type='button' value='$v[2]' class='aa' biaoshi='hui' code='$v[1]' />";	
	　　　　}										
	　　}									  
　　　　?>
　　</p>
</div>

下面就是顯示的按鈕的樣式了，也就是aa1和aa

.aa{ width:200px; height:50px; font-size:16px; float:left; margin:5px; background-color:#3F6;text-align:center; vertical-align:middle; line-height:50px}

.aa1{ width:200px; height:50px; font-size:16px; float:left; margin:5px; background-color:#999;text-align:center; vertical-align:middle; line-height:50px}

3.3 最后的關閉按鈕了

<div class="modal-footer">
    <button id="tijiao" type="button" class="btn btn-default" data-dismiss="modal">關閉</button>              
</div>

　　

可以看一下從數據庫中遍歷出來的內容和樣式了

 

4.以上只是遍歷出來的，還沒有給它添加功能，單一任意一個菜品名稱，成灰色，並且改變數據庫的狀態，使前台也是顯示不能點菜；再次單擊呈綠色，數據庫也是改變狀態，使前台可以點餐

在進行遍歷時已經加上個事件，叫做biaoshi

"<input type='button' value='$v[2]' class='aa' biaoshi='hui' code='$v[1]' />";	

4.1 對這個添加事件就可以

$(".aa").click(function(){
	var aa=$(this).attr("biaoshi");
	
	if(aa=="hui")
	{
	　　$(this).css("background-color","#999");  //是灰色就把背景色變成灰色
	　　$(this).attr("biaoshi","lv");
	}
	else
	{
	　　$(this).css("background-color","#3F6"); //否則就是綠色
	　　$(this).attr("biaoshi","hui");
	}
})

4.2 這只是進行了單擊變色，數據庫還是沒有修改，下面就是進行修改數據庫了

var code = $(this).attr("code");  //遍歷數據庫時，已經標出code是數據庫中的那一列
    $.ajax({
	url:"guqing.php",  //處理頁面
	data:{c:code},  //將code傳過去
	type:"POST", //傳輸方式
	dataType:"TEXT",  //返回格式
	success: function(data){  //處理頁面成功后執行下面
		if(data.trim()=="ok")
		{
					
		}
			
	}
})

4.3 編寫處理頁面

<?php
include("DBDA.php");  //調用封裝好的類
$db = new DBDA();

$code = $_POST["c"]; //接受穿過來的值
$sql=" update caidan set isok=1 where  code='{$code}' ";  //編寫語句，如果code和數據庫中的一樣，那么就把狀態改成1
$attr = $db->Query($sql,0);  //執行語句
echo "ok";

?>

4.4 這樣就把4.2步驟添加到4.1中的灰色部分就好了

4.5  變回原來顏色的那個是一樣的做法，不多說直接上完整的代碼　　

注意：這只是對aa進行了單擊事件，也要對aa1進行單擊事件，同樣的做法而已

//對aa的點擊事件
$(".aa").click(function(){
　　var aa=$(this).attr("biaoshi");
　　if(aa=="hui")
　　{
	$(this).css("background-color","#999");
	$(this).attr("biaoshi","lv");

	var code = $(this).attr("code");
	$.ajax({
	　　url:"guqing.php",
	　　data:{c:code},
	　　type:"POST",
	　　dataType:"TEXT",
	　　success: function(data){
	　　　　if(data.trim()=="ok")
	　　　　{
					
	　　　　}		
	　　}
	})
　　}
　　else
　　{
　　　　$(this).css("background-color","#3F6");
　　　　$(this).attr("biaoshi","hui");

　　　　var code = $(this).attr("code");
　　　　$.ajax({
　　　　　　url:"guqing1.php",  //處理頁面和guqing的處理頁面只有狀態值的不同
　　　　　　data:{c:code},
　　　　　　type:"POST",
　　　　　　dataType:"TEXT",
　　　　　　success: function(data){
　　　　　　　　if(data.trim()=="ok")
　　　　　　　　{
							
　　　　　　　　}
					
　　　　　　}
　　　　})
　　}
})
//對aa1的單擊事件
$(".aa1").click(function(){
　　var aa=$(this).attr("biaoshi");
	
　　if(aa=="hui")
　　{
	$(this).css("background-color","#999");
	$(this).attr("biaoshi","lv");
	var code = $(this).attr("code");
	$.ajax({
	　　url:"guqing.php",
	　　data:{c:code},
	　　type:"POST",
	　　dataType:"TEXT",
	　　success: function(data){
	　　　　if(data.trim()=="ok")
	　　　　{
	　　　　}
	　　}
	})
　　}
　　else
　　{
	$(this).css("background-color","#3F6");
	$(this).attr("biaoshi","hui");
	var code = $(this).attr("code");
	$.ajax({
	　　url:"guqing1.php",
	　　data:{c:code},
	　　type:"POST",
	　　dataType:"TEXT",
	　　success: function(data){
	　　　　if(data.trim()=="ok")
	　　　　{
	　　　　}
	　　}
	})
　　}
})			

到此，就這樣這個估清功能就寫完了

這樣數據庫也是可以修改其狀態的