如何居中JqGrid [英] How to center a JqGrid
本文介绍了如何居中JqGrid的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< div class =center>
< table id =results>< / table>
< / div>
< script type =text / javascript>
$(document).ready(function(){
$(#results)。jqGrid({
datatype:local,
height:250,
colNames:['Inv No','Date','Client','Amount','Tax','Total','Notes'],
colModel:[
{name: id',index:'id',width:60,sorttype:int},
{name:'invdate',index:'invdate',width:90,sorttype:date},
{name:'name',index:'name',width:100},
{name:'amount',index:'amount',width:80,align:right,sorttype: float},
{name:'tax',index:'tax',width:80,align:right,sorttype: :'total',width:80,align:right,sorttype:float},
{name:'note',index:'note',width:150,sortable:false}
],
multiselect:true,
caption:Manipulating Array Data
});
var mydata = [
{id:1,invdate:2007-10-01,name:test,note:note,amount:200.00,tax: 10.00,total:210.00},
{id:2,invdate:2007-10-02,name:test2,note:note2,amount:300.00 :20.00,total:320.00},
{id:3,invdate:2007-09-01,name:test3 ,税:30.00,总计:430.00},
{id:4,invdate:2007-10-04,name:test 200.00,tax:10.00,total:210.00},
{id:5,invdate:2007-10-05,name:test2,note:note2 :300.00,tax:20.00,total:320.00},
{id:6,invdate:2007-09-06,name:test3 ,金额:400.00,税:30.00,总计:430.00},
{id:7,invdate:2007-10-04,name:test note,amount:200.00,tax:10.00,total:210.00},
{id:8,invdate:2007-10-03,name:test2 :note2,amount:300.00,tax:20.00,total:320.00},
{id:9,invdate:2007-09-01 ,note:note3,amount:400.00,tax:30.00,total:430.00}
];
for(var i = 0; i <= mydata.length; i ++)
$(#results)。jqGrid('addRowData',i + 1,mydata [i]);
});
< / script>
但是,网格不会出现在中心,因为使用该类的所有东西都居中。 / p>
如何使网格居中? CSS如下所示:
div.header
{
text-align:center;
}
解决方案
:
.center
{
width:640px;
margin-left:auto;
margin-right:auto;
}
<div class="center">
<table id="results"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#results").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
for (var i = 0; i <= mydata.length; i++)
$("#results").jqGrid('addRowData', i + 1, mydata[i]);
});
</script>
However the grid doesn't not appear centered where as everything else that uses that class is centered.
How can I center the grid? The CSS looks like this:
div.header
{
text-align: center;
}
解决方案
Add the following to your CSS:
.center { width: 640px; margin-left: auto; margin-right: auto; }
这篇关于如何居中JqGrid的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文