my omnigrid looks different from the official demo in google chrome
this is how official demo looks:
this is mine:
the button at top of the grid is not verticaly centered,the paging bar at bottom of my gird also looks ugly.
my code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="screen" href="omnigrid.css" type="text/css" />
<style type="text/css">
body{font-size:11px}
.omnigrid div.fbutton .add {
background:transparent url(images/add.png) no-repeat scroll left center;
}
</style>
<script type="text/javascript" src="mootools-1.2.1.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
<script type="text/javascript" src="omnigrid.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div style="border:1px solid #cde;padding:25px 25px 25px 25px">
<div id="mygrid"></div>
</div>
</body>
my code javascript :
function onGridSelect(evt) {
var str = 'row: ' + evt.row + ' indices: ' + evt.indices;
str += ' id: ' + evt.target.getDataByRow(evt.row).id;
alert(str);
}
function gridButtonClick(button, grid) {
alert(button);
}
var cmu = [ {
header : "ID",
dataIndex : 'help_category_id',
dataType : 'number'
}, {
header : "Parent ID",
dataIndex : 'parent_category_id',
dataType : 'number',
width : 50
}, {
header : "Name",
dataIndex : 'name',
dataType : 'string',
width : 200
} ];
window.addEvent("load", function() {
datagrid = new omniGrid('mygrid', {
columnModel : cmu,
buttons : [ {
name : 'Add',
bclass : 'add',
onclick : gridButtonClick
}, {
name : 'Delete',
bclass : 'delete',
onclick : gridButtonClick
}, {
separator : true
}, {
name : 'Duplicate',
bclass : 'duplicate',
onclick : gridButtonClick
} ],
url : "data.jsp?" + Math.random(),
perPageOptions : [ 10, 20, 50, 100, 200 ],
perPage : 10,
page : 1,
pagination : true,
serverSort : true,
showHeader : true,
alternaterows : true,
sortHeader : false,
resizeColumns : true,
multipleSelection : true,
// uncomment this if you want accordion behavior for every row
/*
accordion:true,
accordionRenderer:accordionFunction,
autoSectionToggle:false,
*/
width : 600,
height : 220
});
datagrid.addEvent('click', onGridSelect);
$$(".omnigrid .pDiv").each(e,function (){
e.setStyle('font-siz开发者_Python百科e','11px');
});
});
It look like a css line-height problem. Use Chrome's Web Inspector (View > Developer > Web inspector), click on the magnifying glass and select the table header. Check the line-height property. Is it any different from the omnigrid demo?
For a quick dirty fix add:
.omnigrid {
line-height: 120% !important;
}
sorry guys, the problem is caused by myself, I zoomed out the page in google chrome
加载中,请稍侯......
精彩评论