程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> php實戰第九天

php實戰第九天

編輯:關於PHP編程

1.jquery事件可以綁定N個,如果不進行取消就會重復調用綁定的事件。深感體會,搞了兩小時終於發現其中奧妙。
以下代碼不能單獨運行的。需要 bootstrap和jquery
[javascript]  /**
* 用於顯示對話框消息框
* 參數 title 消息標題
* 參數 content 消息內容
* 參數 buttomTitle 處理消息的按鈕自定義的,比如確認刪除
* 參數 fun 自定義按鈕click事件
* 參數 passOnData 傳遞到自定義fun裡的參數
*/ 
function show_Msg (title,content,buttomTitle,fun,passOnData) { 
    $("#msg #myModalLabel").html(title); 
    $("#msg .modal-body").html(content); 
    $('#msg #msg_c').html(buttomTitle).click(function(){ 
        fun(passOnData);//調用自定義的函數,以及傳遞自定義的數據  
        $('#msg').modal('hide');//點擊完就把窗口隱藏了  
        $(this).unbind('click');//如果不取消事件,那麼將重復調用。。  
    });; 
    $('#msg').modal('show'); 

/**
* 用於顯示對話框消息框
* 參數 title 消息標題
* 參數 content 消息內容
* 參數 buttomTitle 處理消息的按鈕自定義的,比如確認刪除
* 參數 fun 自定義按鈕click事件
* 參數 passOnData 傳遞到自定義fun裡的參數
*/
function show_Msg (title,content,buttomTitle,fun,passOnData) {
 $("#msg #myModalLabel").html(title);
 $("#msg .modal-body").html(content);
 $('#msg #msg_c').html(buttomTitle).click(function(){
  fun(passOnData);//調用自定義的函數,以及傳遞自定義的數據
  $('#msg').modal('hide');//點擊完就把窗口隱藏了
  $(this).unbind('click');//如果不取消事件,那麼將重復調用。。
 });;
 $('#msg').modal('show');
}html消息框模板
[html]  <!-- 消息框模板 --> 
<div id="msg" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
  <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel"></h3> 
  </div> 
  <div class="modal-body"> 
 
  </div> 
  <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button> 
    <button id="msg_c" class="btn btn-primary"></button> 
  </div> 
</div> 

<!-- 消息框模板 -->
<div id="msg" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel"></h3>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
    <button id="msg_c" class="btn btn-primary"></button>
  </div>
</div>調用例程
[javascript]  show_Msg('標題要長長長長的','這裡可以寫html比如加粗的<b>的字體噢</b>','刪除',function(e){ 
    alert(e); 
},'這裡是點擊刪除後我傳遞過去的數據'); 

show_Msg('標題要長長長長的','這裡可以寫html比如加粗的<b>的字體噢</b>','刪除',function(e){
 alert(e);
},'這裡是點擊刪除後我傳遞過去的數據');

[javascript]  function admin_content_del (id) { 
    var data=listData[id]; 
    show_Msg('確認刪除',data.content,'確認刪除',function(delId){ 
        $.ajax({ 
          url: 'http://localhost/l/index.php', 
          type: 'get', 
          dataType: 'json', 
          data: { 
            m: 'admin', 
            a: 'delcontent', 
            id: delId 
          }, 
          complete: function(xhr, textStatus) { 
            //called when complete  
          }, 
          success: function(data, textStatus, xhr) { 
            if(data.state='ok'){ 
                admin_content(1); 
                show_Msg_success('刪除成功'); 
                 
            }else{ 
                show_Msg_success('刪除失敗'); 
            } 
          }, 
          error: function(xhr, textStatus, errorThrown) { 
            //called when there is an error  
          } 
        }); 
         
    },data.id); 

function admin_content_del (id) {
 var data=listData[id];
 show_Msg('確認刪除',data.content,'確認刪除',function(delId){
  $.ajax({
    url: 'http://localhost/l/index.php',
    type: 'get',
    dataType: 'json',
    data: {
     m: 'admin',
     a: 'delcontent',
     id: delId
    },
    complete: function(xhr, textStatus) {
      //called when complete
    },
    success: function(data, textStatus, xhr) {
     if(data.state='ok'){
      admin_content(1);
      show_Msg_success('刪除成功');
      
     }else{
      show_Msg_success('刪除失敗');
     }
    },
    error: function(xhr, textStatus, errorThrown) {
      //called when there is an error
    }
  });
  
 },data.id);
}


2.setTimeout延遲執行事件,這消息過真不錯,挺常用的,但是這清空消息的方式,簡單粗暴。


[javascript]  /**
* 用於顯示頂部消息。顯示的消息3秒後自動銷毀。
* 參數 content 消息內容
* 參數 face 消息的樣式,真,為成功綠色的;假,為錯誤紅色的
*/ 
function show_Msg_success(content,face){ 
    if (face==null) { 
        face=true; 
    } 
 
    face = face?'success':'error'; 
     
    strTag='<div class="alert alert-'+face+'" data-dismiss="alert">'+content+'</div>'; 
 
    $(strTag).prependTo('#main'); 
 
    setTimeout(function(){ 
        $(".alert").alert('close'); 
    },3000); 

/**
* 用於顯示頂部消息。顯示的消息3秒後自動銷毀。
* 參數 content 消息內容
* 參數 face 消息的樣式,真,為成功綠色的;假,為錯誤紅色的
*/
function show_Msg_success(content,face){
 if (face==null) {
  face=true;
 }

 face = face?'success':'error';
 
    strTag='<div class="alert alert-'+face+'" data-dismiss="alert">'+content+'</div>';

 $(strTag).prependTo('#main');

 setTimeout(function(){
  $(".alert").alert('close');
 },3000);
}


3.checkbox選中還是純dom操作好. jquery的arrt()方法坑爹
checkbox.attr('checked',$(this).get()[0].checked);

選中復選框,但是第一次有效,第二次也有效,第三次以後,離奇失效了。問題不名真相。
[javascript]  function click_tr() { 
    var checkbox = $("#mainData tr input"); 
 
    checkbox.eq(0).click(function() { 
        //checkbox.attr('checked',$(this).get()[0].checked);  
 
        bool = $(this).get()[0].checked; 
 
        for (var i = 1; i < checkbox.length; i++) { 
            checkbox[i].checked = bool; 
        }; 
 
    }); 
 
    $("#mainData tr").each(function(index) { 
        $(this).click(function() { 
 
            if (index == 0) { 
 
            } else { 
                var val = checkbox.eq(index); 
                    val = val.get()[0]; 
                var bool = val.checked; 
 
                //alert(index);  
                if (bool) { 
                    val.checked = false; 
                } else { 
                    val.checked = true; 
                } 
            } 
             
        }); 
 
    }); 

function click_tr() {
 var checkbox = $("#mainData tr input");

 checkbox.eq(0).click(function() {
  //checkbox.attr('checked',$(this).get()[0].checked);

  bool = $(this).get()[0].checked;

  for (var i = 1; i < checkbox.length; i++) {
   checkbox[i].checked = bool;
  };

 });

 $("#mainData tr").each(function(index) {
  $(this).click(function() {

   if (index == 0) {

   } else {
    var val = checkbox.eq(index);
        val = val.get()[0];
    var bool = val.checked;

    //alert(index);
    if (bool) {
     val.checked = false;
    } else {
     val.checked = true;
    }
   }
   
  });

 });進行探究一番寫了一測試代碼,但是依然無果,不明真相的全選不了。
[html]  <html> 
<head> 
    <title></title> 
     
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script> 
 
</head> 
<body> 
<form id="myform" action="index.php" method="post"> 
    <input type="checkbox" name="del[]" value="1"> 
    <input type="checkbox" name="del[]" value="2"> 
    <input type="checkbox" name="del[]" value="3"> 
    <input type="checkbox" name="del[]" value="4"> 
    <input type="checkbox" name="del[]" value="5"> 
    <input type="submit" value="提交"> 
</form> 
<a href="#" id="quanxuan">全選</a> 
<a href="#" id="quxiao">取消選中</a> 
</body> 
 
 
<script type="text/javascript"> 
     
$(document).ready(function() { 
     
    $("#quanxuan").click(function(){ 
        $("#myform input").attr('checked',true); 
    });  
 
    $("#quxiao").click(function(){ 
        $("#myform input").attr('checked',false); 
    }); 
}); 
 
</script> 
 
</html> 

<html>
<head>
 <title></title>
 
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>

</head>
<body>
<form id="myform" action="index.php" method="post">
 <input type="checkbox" name="del[]" value="1">
 <input type="checkbox" name="del[]" value="2">
 <input type="checkbox" name="del[]" value="3">
 <input type="checkbox" name="del[]" value="4">
 <input type="checkbox" name="del[]" value="5">
 <input type="submit" value="提交">
</form>
<a href="#" id="quanxuan">全選</a>
<a href="#" id="quxiao">取消選中</a>
</body>


<script type="text/javascript">
 
$(document).ready(function() {
 
 $("#quanxuan").click(function(){
  $("#myform input").attr('checked',true);
 }); 

 $("#quxiao").click(function(){
  $("#myform input").attr('checked',false);
 });
});

</script>

</html>
4.說了這麼多都沒上效果圖呢.

 \

\

5.標題說是php實戰,怎麼前面帖的都是php代碼。。下面帖出處理批量刪除的php代碼
[php] /**
* 用於批量刪除留言
*/ 
function batchDelContent(){ 
    $json['state']="no"; 
 
    $data=Array(); 
 
    $arr=$_POST['delcontent']; 
    if (count($arr)>0) { 
        $json['state']="ok"; 
    } 
 
    foreach ($arr as $value) { 
 
        $result=$this->db 
             ->where("id=".$value) 
             ->table("data") 
             ->delete(); 
 
        if ($result) { 
            $arr_data['state']="ok"; 
        }else{ 
            $arr_data['state']="no"; 
        } 
        $arr_data['id']=$value; 
 
        $data[]=$arr_data; 
    } 
 
    $json['data']=$data; 
    echo json_encode($json); 

  /**
  * 用於批量刪除留言
  */
  function batchDelContent(){
   $json['state']="no";

   $data=Array();

   $arr=$_POST['delcontent'];
   if (count($arr)>0) {
    $json['state']="ok";
   }

   foreach ($arr as $value) {

    $result=$this->db
      ->where("id=".$value)
      ->table("data")
      ->delete();

    if ($result) {
     $arr_data['state']="ok";
    }else{
     $arr_data['state']="no";
    }
    $arr_data['id']=$value;

    $data[]=$arr_data;
   }

   $json['data']=$data;
   echo json_encode($json);
  }今天寫的php代碼也就這麼點了。。大部分都是javascript


我把admin.js帖出來給大家觀賞一下。
[javascript]  // JavaScript Document  
$(document).ready(function(e) { 
 
    $("#menu a").click(function() { 
 
        switch ($(this).text()) { 
            case '所有留言': 
                admin_content(1); 
                break; 
 
            case '基本設置': 
                $("#main #mainData").load('admin_config.html?r='+Math.random()); 
                break; 
 
            default: 
                break; 
        } 
 
 
 
    }); 
 
$("#main #mainData").load('admin_config.html?r='+Math.random()); 
    //$("#start").click();  
}); 
 
 
/**
*留言管理
*/ 
listData=null; 
function admin_content(page) { 
 
    $.ajax({ 
        url: 'http://localhost/l/admin.php?m=admin&a=content&page=' + page + '&rand=' + Math.random(), 
        type: 'get', 
        dataType: 'json', 
        data: {}, 
        complete: function(xhr, textStatus) { 
            //called when complete  
        }, 
        success: function(json, textStatus, xhr) { 
            if (json['state'] == 'ok') { 
                var page_start = json['start'];//分頁開始  
                var page_end = json['end'];//分頁結束  
                var page_page = json['page'];//分頁當前頁面  
                    listData = json['data'];//分頁數據  
 
                table_html=''; 
                table_html+='<a class="btn btn-info" href="javascript:admin_content_del_pl();">批量刪除</a>'; 
/**             
* 生成 表格內容
*/               
                table_html+= '<table class="table table-hover"><tr><th><input type="checkbox"> 操作</th><th>用戶名</th><th>留言內容</th><th>發表時間</th></tr>'; 
                for (i = 0; i < listData.length; i++) { 
                    var trClass = (i % 2 == 0) ? 'class="info"' : ''; 
 
                    //var tr_html = '<tr ' + trClass + '><td width=100><a href="javascript:admin_content_del('+i+');">刪除</a></td><td width=100>' + listData[i].userName + '</td><td width=400 ><div style="max-width:400px;max-height:150px;overflow-y:auto;">' + listData[i].content + '</div></td><td >' + getLocalTime(listData[i].time) + '</td></tr>';  
                    tr_html = '<tr ' + trClass + '>'; 
                    tr_html+='<td width=100><input type="checkbox" name="delcontent[]" value="'+listData[i].id+'">'+listData[i].id+'</td>'; 
                    //<a href="javascript:admin_content_del('+i+');">刪除</a>  
 
                    tr_html+='<td width=100>' + listData[i].userName + '</td>'; 
                    tr_html+='<td width=400 ><div style="max-width:400px;max-height:150px;overflow-y:auto;">' + listData[i].content + '</div></td>'; 
                    tr_html+='<td>' + getLocalTime(listData[i].time) + '</td></tr>'; 
 
                    table_html += tr_html; 
                } 
                table_html += '</table>'; 
 
/**
*生成分頁
*/ 
                var page_html = '<div id="mainPage"><div class="pagination"><ul>'; 
                if (page_end !== 0) { 
                    if (page_page == 1) { 
                        page_html = page_html + '<li class="disabled"><a href="JavaScript:void(0);">«</a></li>'; 
                    } else { 
                        page_html = page_html + '<li><a href="JavaScript:void(0);">«</a></li>'; 
                    } 
                } 
                for (var i = page_start; i <= page_end; i++) { 
                    if (page_page == i) { 
                        page_html = page_html + '<li class="active"><a href="JavaScript:void(0);">' + i + '</a></li>'; 
                    } else { 
                        page_html = page_html + '<li><a href="JavaScript:void(0);">' + i + '</a></li>'; 
                    } 
 
                } 
                if (page_end !== 0) { 
                    if (page_page == page_end) { 
                        page_html = page_html + '<li class="disabled"><a href="JavaScript:void(0);">»</a></li>'; 
                    } else { 
                        page_html = page_html + '<li><a href="JavaScript:void(0);">»</a></li>'; 
                    } 
 
                } 
                page_html = page_html + '</ul></div></div>'; 
 
 
                var mainData = $("#main #mainData"); 
                mainData.html(table_html); 
                mainData.append(page_html); 
 
                admin_content_page(page_page,page_end); //掛接分頁點擊事件  
                click_tr();//掛接行點擊事件;  
            } 
 
 
 
            //alert(json.data);  
        }, 
        error: function(xhr, textStatus, errorThrown) { 
            //called when there is an error  
        } 
    }); 

 
/**
* 掛機分頁事件
* 參數 page_page 當前分頁
* 參數 page_end  分頁數量
*/ 
function admin_content_page(page_page,page_end) { 
    $("#mainPage a").click(function() { 
        var charStr = $(this).text(); 
        var num = charStr; 
        if (charStr == "»") { 
            num = parseInt(page_page) + 1; 
            if (page_end < num) { 
                return; 
            } 
 
        } else if (charStr == "«") { 
            num = parseInt(page_page) - 1; 
            if (num <= 0) { 
                return; 
            } 
        } 
 
        admin_content(num); 
 
    }); 

 
 
 
function getLocalTime(nS) { 
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' '); 

 
function admin_content_del (id) { 
    var data=listData[id]; 
    show_Msg('確認刪除',data.content,'確認刪除',function(delId){ 
        $.ajax({ 
          url: 'http://localhost/l/index.php', 
          type: 'get', 
          dataType: 'json', 
          data: { 
            m: 'admin', 
            a: 'delcontent', 
            id: delId 
          }, 
          complete: function(xhr, textStatus) { 
            //called when complete  
          }, 
          success: function(data, textStatus, xhr) { 
            if(data.state='ok'){ 
                admin_content(1); 
                show_Msg_success('刪除成功'); 
                 
            }else{ 
                show_Msg_success('刪除失敗'); 
            } 
          }, 
          error: function(xhr, textStatus, errorThrown) { 
            //called when there is an error  
          } 
        }); 
         
    },data.id); 

 
function admin_content_del_pl() { 
 
    var checkbox = $("#mainData :checked"); 
 
    var listId = Array(); 
 
    checkbox.each(function() { 
        //alert($(this).get()[0].name);  
        if ($(this).get()[0].name == 'delcontent[]') { 
            listId.unshift($(this).val()); 
        } 
    }); 
 
    $.ajax({ 
      url: 'http://localhost/l/admin.php?m=admin&a=batchDelContent', 
      type: 'POST', 
      dataType: 'json', 
      data: {delcontent: listId 
      }, 
      complete: function(xhr, textStatus) { 
        //called when complete  
      }, 
      success: function(json, textStatus, xhr) { 
        if(json.state=='ok'){ 
            var data = json.data; 
            for (var i = 0; i < data.length; i++) { 
                if(data[i]['state']=='ok'){ 
                    show_Msg_success(data[i].id + '刪除成功'); 
                }else{ 
                    show_Msg_success(data[i].id + '刪除失敗',false); 
                } 
            }; 
 
        }else{ 
 
        } 
        admin_content(1); 
      }, 
      error: function(xhr, textStatus, errorThrown) { 
        //called when there is an error  
      } 
    }); 
     
//  alert(listId);  

 
 
/**
* 用於顯示對話框消息框
* 參數 title 消息標題
* 參數 content 消息內容
* 參數 buttomTitle 處理消息的按鈕自定義的,比如確認刪除
* 參數 fun 自定義按鈕click事件
* 參數 passOnData 傳遞到自定義fun裡的參數
*/ 
function show_Msg (title,content,buttomTitle,fun,passOnData) { 
    $("#msg #myModalLabel").html(title); 
    $("#msg .modal-body").html(content); 
    $('#msg #msg_c').html(buttomTitle).click(function(){ 
        fun(passOnData);//調用自定義的函數,以及傳遞自定義的數據  
        $('#msg').modal('hide');//點擊完就把窗口隱藏了  
        $(this).unbind('click');//如果不取消事件,那麼將重復調用。。  
    });; 
    $('#msg').modal('show'); 

/**
* 用於顯示頂部消息。顯示的消息3秒後自動銷毀。
* 參數 content 消息內容
* 參數 face 消息的樣式,真,為成功綠色的;假,為錯誤紅色的
*/ 
function show_Msg_success(content,face){ 
    if (face==null) { 
        face=true; 
    } 
 
    face = face?'success':'error'; 
     
    strTag='<div class="alert alert-'+face+'" data-dismiss="alert">'+content+'</div>'; 
 
    $(strTag).prependTo('#main'); 
 
    setTimeout(function(){ 
        $(".alert").alert('close'); 
    },3000); 

 
//show_Msg_content('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊所得稅')  
/*
show_Msg('標題要長長長長的','這裡可以寫html比如加粗的<b>的字體噢</b>','刪除',function(e){
    alert(e);
},'這裡是點擊刪除後我傳遞過去的數據');
*/ 
 
function click_tr() { 
    var checkbox = $("#mainData tr input"); 
 
    checkbox.eq(0).click(function() { 
        //checkbox.attr('checked',$(this).get()[0].checked);  
 
        bool = $(this).get()[0].checked; 
 
        for (var i = 1; i < checkbox.length; i++) { 
            checkbox[i].checked = bool; 
        }; 
 
    }); 
 
    $("#mainData tr").each(function(index) { 
        $(this).click(function() { 
 
            if (index == 0) { 
 
            } else { 
                var val = checkbox.eq(index); 
                    val = val.get()[0]; 
                var bool = val.checked; 
 
                //alert(index);  
                if (bool) { 
                    val.checked = false; 
                } else { 
                    val.checked = true; 
                } 
            } 
 
        }); 
 
    }); 

// JavaScript Document
$(document).ready(function(e) {

 $("#menu a").click(function() {

  switch ($(this).text()) {
   case '所有留言':
    admin_content(1);
    break;

   case '基本設置':
    $("#main #mainData").load('admin_config.html?r='+Math.random());
    break;

   default:
    break;
  }

 

 });

$("#main #mainData").load('admin_config.html?r='+Math.random());
 //$("#start").click();
});


/**
*留言管理
*/
listData=null;
function admin_content(page) {

 $.ajax({
  url: 'http://localhost/l/admin.php?m=admin&a=content&page=' + page + '&rand=' + Math.random(),
  type: 'get',
  dataType: 'json',
  data: {},
  complete: function(xhr, textStatus) {
   //called when complete
  },
  success: function(json, textStatus, xhr) {
   if (json['state'] == 'ok') {
    var page_start = json['start'];//分頁開始
    var page_end = json['end'];//分頁結束
    var page_page = json['page'];//分頁當前頁面
        listData = json['data'];//分頁數據

    table_html='';
    table_html+='<a class="btn btn-info" href="javascript:admin_content_del_pl();">批量刪除</a>';
/**    
* 生成 表格內容
*/    
    table_html+= '<table class="table table-hover"><tr><th><input type="checkbox"> 操作</th><th>用戶名</th><th>留言內容</th><th>發表時間</th></tr>';
    for (i = 0; i < listData.length; i++) {
     var trClass = (i % 2 == 0) ? 'class="info"' : '';

     //var tr_html = '<tr ' + trClass + '><td width=100><a href="javascript:admin_content_del('+i+');">刪除</a></td><td width=100>' + listData[i].userName + '</td><td width=400 ><div style="max-width:400px;max-height:150px;overflow-y:auto;">' + listData[i].content + '</div></td><td >' + getLocalTime(listData[i].time) + '</td></tr>';
     tr_html = '<tr ' + trClass + '>';
     tr_html+='<td width=100><input type="checkbox" name="delcontent[]" value="'+listData[i].id+'">'+listData[i].id+'</td>';
     //<a href="javascript:admin_content_del('+i+');">刪除</a>

     tr_html+='<td width=100>' + listData[i].userName + '</td>';
     tr_html+='<td width=400 ><div style="max-width:400px;max-height:150px;overflow-y:auto;">' + listData[i].content + '</div></td>';
     tr_html+='<td>' + getLocalTime(listData[i].time) + '</td></tr>';

     table_html += tr_html;
    }
    table_html += '</table>';

/**
*生成分頁
*/
    var page_html = '<div id="mainPage"><div class="pagination"><ul>';
    if (page_end !== 0) {
     if (page_page == 1) {
      page_html = page_html + '<li class="disabled"><a href="JavaScript:void(0);">«</a></li>';
     } else {
      page_html = page_html + '<li><a href="JavaScript:void(0);">«</a></li>';
     }
    }
    for (var i = page_start; i <= page_end; i++) {
     if (page_page == i) {
      page_html = page_html + '<li class="active"><a href="JavaScript:void(0);">' + i + '</a></li>';
     } else {
      page_html = page_html + '<li><a href="JavaScript:void(0);">' + i + '</a></li>';
     }

    }
    if (page_end !== 0) {
     if (page_page == page_end) {
      page_html = page_html + '<li class="disabled"><a href="JavaScript:void(0);">»</a></li>';
     } else {
      page_html = page_html + '<li><a href="JavaScript:void(0);">»</a></li>';
     }

    }
    page_html = page_html + '</ul></div></div>';


    var mainData = $("#main #mainData");
    mainData.html(table_html);
    mainData.append(page_html);

    admin_content_page(page_page,page_end); //掛接分頁點擊事件
    click_tr();//掛接行點擊事件;
   }

 

   //alert(json.data);
  },
  error: function(xhr, textStatus, errorThrown) {
   //called when there is an error
  }
 });
}

/**
* 掛機分頁事件
* 參數 page_page 當前分頁
* 參數 page_end  分頁數量
*/
function admin_content_page(page_page,page_end) {
 $("#mainPage a").click(function() {
  var charStr = $(this).text();
  var num = charStr;
  if (charStr == "»") {
   num = parseInt(page_page) + 1;
   if (page_end < num) {
    return;
   }

  } else if (charStr == "«") {
   num = parseInt(page_page) - 1;
   if (num <= 0) {
    return;
   }
  }

  admin_content(num);

 });
}

 

function getLocalTime(nS) {
 return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
}

function admin_content_del (id) {
 var data=listData[id];
 show_Msg('確認刪除',data.content,'確認刪除',function(delId){
  $.ajax({
    url: 'http://localhost/l/index.php',
    type: 'get',
    dataType: 'json',
    data: {
     m: 'admin',
     a: 'delcontent',
     id: delId
    },
    complete: function(xhr, textStatus) {
      //called when complete
    },
    success: function(data, textStatus, xhr) {
     if(data.state='ok'){
      admin_content(1);
      show_Msg_success('刪除成功');
      
     }else{
      show_Msg_success('刪除失敗');
     }
    },
    error: function(xhr, textStatus, errorThrown) {
      //called when there is an error
    }
  });
  
 },data.id);
}

function admin_content_del_pl() {

 var checkbox = $("#mainData :checked");

 var listId = Array();

 checkbox.each(function() {
  //alert($(this).get()[0].name);
  if ($(this).get()[0].name == 'delcontent[]') {
   listId.unshift($(this).val());
  }
 });

 $.ajax({
   url: 'http://localhost/l/admin.php?m=admin&a=batchDelContent',
   type: 'POST',
   dataType: 'json',
   data: {delcontent: listId
   },
   complete: function(xhr, textStatus) {
     //called when complete
   },
   success: function(json, textStatus, xhr) {
     if(json.state=='ok'){
      var data = json.data;
      for (var i = 0; i < data.length; i++) {
       if(data[i]['state']=='ok'){
        show_Msg_success(data[i].id + '刪除成功');
       }else{
     show_Msg_success(data[i].id + '刪除失敗',false);
       }
      };

     }else{

     }
     admin_content(1);
   },
   error: function(xhr, textStatus, errorThrown) {
     //called when there is an error
   }
 });
 
// alert(listId);
}


/**
* 用於顯示對話框消息框
* 參數 title 消息標題
* 參數 content 消息內容
* 參數 buttomTitle 處理消息的按鈕自定義的,比如確認刪除
* 參數 fun 自定義按鈕click事件
* 參數 passOnData 傳遞到自定義fun裡的參數
*/
function show_Msg (title,content,buttomTitle,fun,passOnData) {
 $("#msg #myModalLabel").html(title);
 $("#msg .modal-body").html(content);
 $('#msg #msg_c').html(buttomTitle).click(function(){
  fun(passOnData);//調用自定義的函數,以及傳遞自定義的數據
  $('#msg').modal('hide');//點擊完就把窗口隱藏了
  $(this).unbind('click');//如果不取消事件,那麼將重復調用。。
 });;
 $('#msg').modal('show');
}
/**
* 用於顯示頂部消息。顯示的消息3秒後自動銷毀。
* 參數 content 消息內容
* 參數 face 消息的樣式,真,為成功綠色的;假,為錯誤紅色的
*/
function show_Msg_success(content,face){
 if (face==null) {
  face=true;
 }

 face = face?'success':'error';
 
    strTag='<div class="alert alert-'+face+'" data-dismiss="alert">'+content+'</div>';

 $(strTag).prependTo('#main');

 setTimeout(function(){
  $(".alert").alert('close');
 },3000);
}

//show_Msg_content('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊所得稅')
/*
show_Msg('標題要長長長長的','這裡可以寫html比如加粗的<b>的字體噢</b>','刪除',function(e){
 alert(e);
},'這裡是點擊刪除後我傳遞過去的數據');
*/

function click_tr() {
 var checkbox = $("#mainData tr input");

 checkbox.eq(0).click(function() {
  //checkbox.attr('checked',$(this).get()[0].checked);

  bool = $(this).get()[0].checked;

  for (var i = 1; i < checkbox.length; i++) {
   checkbox[i].checked = bool;
  };

 });

 $("#mainData tr").each(function(index) {
  $(this).click(function() {

   if (index == 0) {

   } else {
    var val = checkbox.eq(index);
        val = val.get()[0];
    var bool = val.checked;

    //alert(index);
    if (bool) {
     val.checked = false;
    } else {
     val.checked = true;
    }
   }

  });

 });
}index.html代碼
[html]  <!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>無標題文檔</title> 
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></head> 
 
<body> 
 
  <div class="container-fluid"> 
    <div class="row-fluid"> 
      <div class="span4"> 
        <h3>瀑布流留言板管理系統</h3> 
      </div> 
    </div> 
 
    <div class="row-fluid"> 
      <div id="menu" class="span2"> 
        <ul class="nav nav-list"> 
          <li class="nav-header">留言管理</li> 
          <li class="active"> 
            <a href="javascript:void(0);">所有留言</a> 
          </li> 
          <li class="nav-header">網站管理</li> 
          <li class=""> 
            <a href="javascript:void(0);">基本設置</a> 
          </li> 
 
        </ul> 
      </div> 
 
      <div id="main" class="span10"> 
 
        <div id="mainData"></div> 
      </div> 
    </div> 
 
  </div> 
 
 
<!-- 消息框模板 --> 
<div id="msg" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
  <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel"></h3> 
  </div> 
  <div class="modal-body"> 
 
  </div> 
  <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button> 
    <button id="msg_c" class="btn btn-primary"></button> 
  </div> 
</div> 
 
</body> 
  <script src="js/jquery-2.0.1.min.js"></script> 
  <script type="text/javascript" src="js/bootstrap.min.js"></script> 
  <script type="text/javascript" src="js/admin.js"></script> 
 
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>無標題文檔</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></head>

<body>

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span4">
        <h3>瀑布流留言板管理系統</h3>
      </div>
    </div>

    <div class="row-fluid">
      <div id="menu" class="span2">
        <ul class="nav nav-list">
          <li class="nav-header">留言管理</li>
          <li class="active">
            <a href="javascript:void(0);">所有留言</a>
          </li>
          <li class="nav-header">網站管理</li>
          <li class="">
            <a href="javascript:void(0);">基本設置</a>
          </li>

        </ul>
      </div>

      <div id="main" class="span10">

        <div id="mainData"></div>
      </div>
    </div>

  </div>


<!-- 消息框模板 -->
<div id="msg" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel"></h3>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
    <button id="msg_c" class="btn btn-primary"></button>
  </div>
</div>

</body>
  <script src="js/jquery-2.0.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/admin.js"></script>

</html>
恩,今天是充實的一天。激情的明天也即將到來。


 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved