<!DOCTYPE html>
<html>
  <head>
 	 <base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
 	  <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">
    
       <!-- DataTables -->
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
    
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
	
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    tr{width:25%;float:left;}
    tr td img{}
    </style>   
  </head> 
  <body class="hold-transition skin-blue sidebar-mini">


 <div class="wrapper">
    <div class="content-wrapper"  style="margin-left:0;">
    
     <section class="content-header">
          <h1>
             	图库管理
            <small>图库信息</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#springUrl('/page/user/showstatics')"><i class="fa fa-dashboard"></i>首页</a></li>
            <li><a class="active">图库列表</a></li>
          </ol>
        </section>
    
	
        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-xs-12">
              <div class="box">
              <div class="box-header">
					<div class="col-xs-5"> 
						  #if($shiro.hasPermission("mp:imagemedia:edit")) 
                  			 <a href="#springUrl('/a/imageMedia/imageForm')"  class="btn bg-olive">新增图片</a>
                   		  #end
					</div> 
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <table id="userlilst" class="table table-bordered table-striped">
	                    <tbody id="tablebody">
	                    
	                    </tbody>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->  
   	


      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class="control-sidebar-bg"></div>
    </div><!-- ./wrapper -->

<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<!-- END FOOTER -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
     <script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="dist/js/demo.js"></script>
 <script src="plugins/bootbox/bootbox.min.js"></script>
 <script src="common/js/cfapp.js"></script>

 <script>
     var csrfheader = {name:'_csrf_header',value:'${_csrf.headerName}'};
     var csrftoken  = {name:'_csrf',value:'${_csrf.token}'};
 </script>
<!-- END PAGE LEVEL PLUGINS -->
<script>
	
function   formatDates(now)   {
	var now = new Date(now);
    var   year=now.getFullYear();     
    var   month=now.getMonth()+1;     
    var   date=now.getDate();     
    var   hour=now.getHours();     
    var   minute=now.getMinutes();     
    var   second=now.getSeconds();     
    return   year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second;     
} 
function   formatDateTimes(now)   {
	var now = new Date(now);
	 var   month=now.getMonth()+1;     
	    var   date=now.getDate();     
    return  month+"月"+date+"日";     
} 

 
var sSource = "#springUrl('/a/imageMedia/fetchData')"; //列表数据
  
    jQuery(document).ready(function() {
    	
    	
    	
    	function alertHtml(msg){
    		Cfapp.alert({
                message: msg,
                btntext: "确定",
                success: function () {
                   
                }
            })
    	}
    	
    	
     	 
     	 var aoData = {
   			   iDisplayStart:1,
   			   iDisplayLength:15
   	   		};  
     	 var retrieveData = function (sSource, aoData, fnCallback) {
             $.ajax({    
                 "type": "GET",
                 "contentType": "application/json",
                 "url": sSource,
                 "dataType": "json",
                 "data": aoData, //以json格式传递
                 "success":fnCallback
             });
         };
         
     	   
     		      $('#userlilst').DataTable({
     		            "lengthChange": false, 
     		            "searching": false,
     		            "iDisplayLength":24,
     		            "ordering": false,
     		            "bFiltered": false,
     		           "bStateSave" : true, // save datatable state(pagination, sort, etc) in cookie.
     		            "bProcessing": true, 
     		            "bServerSide": true,
     		            "sAjaxSource": sSource,
     		            "fnServerData": retrieveData,
     		            "pagingType": "full_numbers",
     		            "fnDrawCallback":function(){
     		            },
     		            "aoColumns": [
     		                        {"mData": "id"},
     		                        {"mData": "qcloudUrl"}
     		                        ], 
     		                    "aoColumnDefs": [
     		                        {  // set default column settings
     		                            'visible': false, 
     		                            'targets': [0]
     		                        }, 
     		                        {
     		                        	"targets": [1],
      		                            "mData": "qcloudUrl",
      		                            "className":"piccenter",
      		                            "mRender": function (a, b, c, d) 
      		                            {   
      		                            	//a表示id对应的值，c表示当前记录行对象
      		                                return '<img width="100px" height="auto" src="'+a+'" />';
      		                            }
     		                        }]//, 
//      		                        {
//      		                            "aTargets": [8],
//      		                            "mData": "id",
//      		                            "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
     		                            	
//      		                                var viewHTML = '<a href="#" data-id="'+a+'" data-action="view" class="btn green">查看</a>';
//      		                                if(c.delflag==0){
//      		                                	 var removeHTML = '<a href="#" data-id="'+a+'" data-action="remove" class="btn red">删除</a>';
//      		                                }else{
//      		                                	 var removeHTML = '<a href="javascript:void(0)" data-id="'+a+'" data-action="remove" class="btn red" style="color:red">已取消关注</a>';
//      		                                }
//      		                                return viewHTML+removeHTML;
//      		                            }
//      		                        }
     		            
     		        });
     		      
     		      
     		     
     		     
		   		
    });
    function removeData(id){ 
		   Cfapp.confirm({
			 message: "确定要删除吗",
			 btnoktext:"确定",
			 btncanceltext:"取消",
			 success:function(){
				 $.ajax({
		              "type": "POST",
		              "url": "#springUrl('/a/imagetext/remove')",
		              "dataType": "json",
		              "data": {id:id,"_csrf_header":csrfheader.value,"_csrf":csrftoken.value}, //以json格式传递
		              "success": function(data){
		            	  if(data.errorNo==0){
		            		  Cfapp.alert({
		                          message: "删除成功",
		                          btntext: "确定",
		                          success: function () {
		                        	 location.href = "#springUrl('/a/imagetext/list')";
		                          }
		                      })
		            	  }else{
		            		  Cfapp.alert({
		                          message: "删除失败",
		                          btntext: "确定",
		                          success: function () {
		                              location.href = "#springUrl('/a/imagetext/list')";
		                          }
		                      })
		            	  }
		              }
		          }); 
			 },
			cancel:function(){
				$(".modal-backdrop").fadeOut();

			 }
		   })
	   }
</script>
</body>
<!-- END BODY -->
</html>