文章/答案/技术大牛

发布

社区首页 >问答首页 >我的omnigrid看起来与google chrome中的官方演示不同

问我的omnigrid看起来与google chrome中的官方演示不同
EN

Stack Overflow用户

提问于 2011-01-04 16:39:28

回答 2查看 631关注 0票数 0

下面是官方demo的样子：

这是我的：

网格顶部的按钮没有垂直居中，网格底部的分页栏看起来也很难看。

我的代码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>

我的代码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-size','11px');
 });
});

omnigrid

html

css

mootools

回答 2

Stack Overflow用户

发布于 2011-01-04 18:33:25

它看起来像是一个css行高问题。使用Chrome的Web Inspector (查看>开发人员> Web检查器)，单击放大镜并选择表格标题。检查line-height属性。它与omnigrid演示有什么不同吗？

要快速修复脏问题，请添加：

.omnigrid {
  line-height: 120% !important;
}

票数 0

Stack Overflow用户

发布于 2011-01-05 09:22:32

对不起，这个问题是我自己造成的，我在google chrome中缩小了页面。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4591816

复制

相似问题

问我的omnigrid看起来与google chrome中的官方演示不同
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的omnigrid看起来与google chrome中的官方演示不同EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的omnigrid看起来与google chrome中的官方演示不同
EN