lihai
/
Synear_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="./css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link  href="./css/bootstrap.min.css" />
		<link rel="stylesheet" href="./css/boot/bootstrap-table.css" />
		<link href="./css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
		<link href="./css/animate.min.css" rel="stylesheet">
		<link href="./css/style.min862f.css?v=4.1.0" rel="stylesheet">
		<title>联系</title>
	</head>
	<script src="./js/jquery.min.js?v=2.1.4"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/bootstrap-table.js"></script>
	<script src="./js/bootstrap-table-zh-CN.js"></script>
	<body>
		<div style="width: 100%;padding: 10px;">
			<table id="goods" data-row-style="rowStyle"  data-query-params="queryParams" data-pagination="true">
				
			 <thead>
            <tr>
					  <th data-field="state" data-checkbox="true"></th>            	
            	  <th data-sortable="true" data-formatter="getIndex"  >下标</th>
                <th data-sortable="true" data-field="Code" data-formatter="setCode" data-halign="center" data-align="center">序号</th>
                <th data-sortable="true" data-field="TuanGouName" data-formatter="setName">录音</th>
                <th data-sortable="true" data-field="StartDate">开始时间</th>
                 <th data-sortable="true" data-field="EndTime">结束时间</th>
                  <th data-sortable="true" data-field="StartDate">开始时间</th>
                 <th data-sortable="true" data-field="EndTime">结束时间</th>
                  <th data-sortable="true" data-field="StartDate">开始时间</th>
                 <th data-sortable="true" data-field="EndTime">结束时间</th>
                  <th data-sortable="true" data-field="StartDate">开始时间</th>
                 <th data-sortable="true" data-field="EndTime">结束时间</th>
                  <th data-sortable="true" data-field="StartDate">开始时间</th>
                 <th data-sortable="true" data-field="EndTime">结束时间</th>
                  <th data-sortable="true" data-field="StartDate">开始时间</th>
                 <th data-sortable="true" data-field="EndTime">结束时间</th>
                  <th data-sortable="true" data-field="StartDate">开始时间</th>
                 <th data-sortable="true" data-field="EndTime">结束时间</th>
            </tr>
      	     </thead>
	    </table>
		</div>
		 <script>
		 	 var json =  [{"Code":"1","TuanGouName":"好多鱼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"2","TuanGouName":"旺旺雪饼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"3","TuanGouName":"旺旺仙贝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"4","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"5","TuanGouName":"勇闯天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"6","TuanGouName":"九洲奇味饼干","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"1","TuanGouName":"好多鱼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"2","TuanGouName":"旺旺雪饼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"3","TuanGouName":"旺旺仙贝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"4","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"5","TuanGouName":"勇闯天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"6","TuanGouName":"九洲奇味饼干","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"1","TuanGouName":"好多鱼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"2","TuanGouName":"旺旺雪饼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"3","TuanGouName":"旺旺仙贝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"4","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"5","TuanGouName":"勇闯天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"6","TuanGouName":"九洲奇味饼干","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
		 	 ];
        /*初始化table数据*/
        $(function(){
            $("#goods").bootstrapTable({
                data:json
            });
        });
        
 
/*分页*/
//       function queryParams() {
//          return {
//              type: 'owner',            
//              sort: 'updated',     
//              direction: 'desc',            //排序方向
//              per_page: 5,                //一次加载数据条数
//              page:1                        //加载数据第几次
//          };
//      }
         /*隔行变色*/
         function rowStyle(value, row, index) {
    var classes = ['active', 'success', 'info', 'warning', 'danger'];
    if (index % 2 === 0) {
        return { classes: 'success' };
    }
    return {};
}
           function getIndex(val,row,index){
            return index + 1;
        }
        function setCode(val){
            return '<audio controls>'+
  					'<source  src="mp3/song.mp3" type="audio/ogg">'+
  				'<source   src="mp3/song.mp3" type="audio/mpeg">'+
	    	'</audio>';
        }
        function setName(val){
            return "<span style='color:red;font-weight:900;'>" + val + "</span>";
        }
		 </script>
	</body>
</html>