8detect
4/22/2014 - 8:51 PM
ez-grid
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>
test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="http://phn.test/assets/share/vendor/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://phn.test/assets/share/css/common.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type= "text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="http://phn.test/assets/share/vendor/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://phn.test/assets/share/js/extra-1.0.src.js"></script>
<!--init config from server-->
<script type="text/javascript">
</script>
<style type="text/css">
/*youtube body style*/
body {
color: #333;
background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0 0;
background-color: #EBEBEB;
background-repeat: repeat;
}
.ui-loading{
background: url('http://app.test/libwww/images/loading/loading-gray.gif') no-repeat ;
}
.ez-grid {
position: relative;
border: 0 solid #EEE;
overflow: hidden;
color: #000;
}
.ez-grid .header{
background: #f8f8f8;
}
.ez-grid .header th, .ez-grid .body td {
text-align: left;
border-right: 1px solid #DDD;
border-left: 1px solid #FFF;
overflow: hidden;
vertical-align: top!important;
padding-left: 0;
padding-right: 0;
}
.ez-grid .drag {
position: absolute;
z-index: 2;
overflow: visible;
}
.ez-grid .drag div {
float: left;
background: #333;
display: block;
position: absolute;
height: 24px;
width: 5px;
cursor: col-resize;
}
.ez-grid .body {
background: #FFF;
overflow: auto;
position: relative;
}
.ez-grid .toolbar{
height:30px;
background: #fafafa;
}
.head-container{
overflow: hidden;
position: relative;
}
.body-container{
overflow: auto;
position: relative;
}
.head-table,.body-table{
position: relative;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
.col{
position: relative;
height:30px;
background: #CCC;
}
.spliter{
position:absolute;
background: transparent;
top:0px;
height:30px;
cursor: col-resize;
width:4px;
right:-2px;
z-index: 2;
opacity:0.3;
}
</style>
</head>
<body>
<div style="margin:auto;width:800px">
<div class="ez-grid" id="grid">
<div style="height:10px">
</div>
<div class="head-container" id="head-container" style="background: #ddd;height:30px">
<table class="head-table" >
<thead >
<tr id="tr-col">
<th >
<div class="col" style="width:100px">
<div class="spliter" style=""></div>
<div >title 1</div>
</div>
</th>
<th >
<div class="col" style="width:100px">
<div class="spliter" style=""></div>
<div >title 1</div>
</div>
</th>
<th >
<div class="col" style="width:100px">
<div class="spliter" style=""></div>
<div >title 1</div>
</div>
</th>
</tr>
</thead>
</table>
</div> <!--head-->
<div class="body-container" id="body-container" style="background: #ddd;height:100px">
<table style="background: #eee;max-width:none">
<thead>
<tr id="body-tr-col">
<th ><div></div></th>
<th ><div></div></th>
<th ><div></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
</tr>
</tbody>
</table>
</div>
<table style='width:100%'>
<tr>
<td style='width:30%'>
[create][delete][edit]
</td>
<td style='width:40%'>
[paging]
</td>
<td>
status
</td>
</tr>
</table>
</div>
</div>
<!-- wrap div 1024-->
<script type="text/javascript">
/*
on domready
*/
$(function(){
//init width
//synch width head & body
var $grid = $('#grid');
var $head = $('#grid').find('.head-container');
var $headTable = $('#grid').find('.head-table');
var $body = $('#body-container');
$body.on('scroll',function(){
var $this = $(this);
$headTable.css({ left: -$this.scrollLeft() });
});
$( "#tr-col" ).sortable({
axis: "x",
start:function(e,ui){
var $this = $(this);
$this.css({cursor:'move'});
console.log(ui.item.index());
},
sort:function(e,ui){
var $this = $(this);
$this.css({cursor:'move'});
},
stop:function(e,ui){
var $this = $(this);//tr-col
$this.css({cursor:'pointer'});
var $item=ui.item;
var index,index_next,index_prev;
index = $item.index();
var $next=$item.next();
if ($next.length) {
index_next = $next.index();
}
else {
var $prev = $item.prev();
index_prev = $prev.index();
}
console.log( index,index_next,index_prev)
}
});
$( ".spliter" ) .on('mouseenter',function(){
$(this).css({backgroundColor:'#333'});
}).on('mouseout',function(){
$(this).css({backgroundColor:'transparent'});
}).draggable({
axis: "x",containment: "#head-container" ,
drag: function( e, ui ) {
//console.log(e);
//console.log(ui);
var pos=ui.position;
var $this = $(this);
var $parent=$this.parent();
if (pos.left < 50) {
pos.left=50;
$this.css({left:'50px'});//resposition
}
else pos.left = Math.round(pos.left);
$parent.width(pos.left);
var index=$parent.parent().index();
$body.find('table > thead > tr').children().eq(index).find('div').width(pos.left);
},
start: function( e, ui ) {
var pos=ui.position;
var $this = $(this);
$this.css({backgroundColor: '#333'});
},
stop: function( e, ui ) {
var pos=ui.position;
var $this = $(this);
$this.css({background: 'transparent'});
var $parent=$this.parent();
},
});
});
</script>
</body>
</html>