这两天刚刚入手使用Flexigrid插件,这是一个不错的插件,官方的演示也很漂亮。不过可惜是仿Ext的。
基于之前对Ext3,Ext4的熟悉开始尝试使用JQuery+Flexigrid这个更轻量级的配置,同时也避开Ext在IE内核下JS计算能力属于低能级别的问题(当然这个插件也有性能问题,只不过相对于Ext来讲简直就是大巫见小巫了)
按照常规做法,Header引入JQuery的css,js,然后引入Flexigrid的css,js文件然后敲代码类似于
<
div
id
="grd_ex"
></
div
>
然后使用Flexigrid:
$(".grd_" + divId).flexigrid({
url: '../JScript/FrontEffect/flexigrid/js/data.json',
dataType: 'json',
colModel: [
{ display: 'Id', name: 'plcid', width: 40, sortable: true, align: 'center', hide: true },
{ display: '代理费率', name: 'disc', width: 80, sortable: true, align: 'center' },
{ display: '红包', name: 'extReward', width: 80, sortable: true, align: 'center' },
{ display: '票价(RMB/人)', name: 'ibePrice', width: 100, sortable: true, align: 'center' },
{ display: '利润', name: 'profits', width: 60, sortable: true, align: 'center' },
{ display: '营业时间', name: 'workTime', width: 100, sortable: true, align: 'center' },
{ display: '出票速度', name: 'outTime', width: 60, sortable: true, align: 'center' }
],
title: '可选政策',
useRp: true,
width: 580,
height: 200
})
url: '../JScript/FrontEffect/flexigrid/js/data.json',
dataType: 'json',
colModel: [
{ display: 'Id', name: 'plcid', width: 40, sortable: true, align: 'center', hide: true },
{ display: '代理费率', name: 'disc', width: 80, sortable: true, align: 'center' },
{ display: '红包', name: 'extReward', width: 80, sortable: true, align: 'center' },
{ display: '票价(RMB/人)', name: 'ibePrice', width: 100, sortable: true, align: 'center' },
{ display: '利润', name: 'profits', width: 60, sortable: true, align: 'center' },
{ display: '营业时间', name: 'workTime', width: 100, sortable: true, align: 'center' },
{ display: '出票速度', name: 'outTime', width: 60, sortable: true, align: 'center' }
],
title: '可选政策',
useRp: true,
width: 580,
height: 200
之后效果是在chrome,firex,ie8下能够显示读取到的数据,但是ie6,ie7不显示任何数据只有表头。
对表格体进行查看后发现数据行生成的html代码如下:
<
div
class
="grd_ex"
cellpadding
="0"
cellspacing
="0"
border
="0"
>
< tbody >
< tr id ="rowId" >
< td align ="center" abbr ="plcid" style ="display: none;" >
< div style ="text-align: center; width: 40px;" >
undefined </ div >
</ td >
< td align ="center" abbr ="disc" >
< div style ="text-align: center; width: 80px;" >
123 </ div >
</ td >
< td align ="center" abbr ="extReward" >
< div style ="text-align: center; width: 80px;" >
222 </ div >
</ td >
< td align ="center" abbr ="ibePrice" >
< div style ="text-align: center; width: 100px;" >
123 </ div >
</ td >
< td align ="center" abbr ="profits" >
< div style ="text-align: center; width: 60px;" >
11 </ div >
</ td >
< td align ="center" abbr ="workTime" >
< div style ="text-align: center; width: 100px;" >
123 </ div >
</ td >
< td align ="center" abbr ="outTime" >
< div style ="text-align: center; width: 60px;" >
432 </ div >
</ td >
</ tr >
</ tbody >
< tbody >
< tr id ="rowId" >
< td align ="center" abbr ="plcid" style ="display: none;" >
< div style ="text-align: center; width: 40px;" >
undefined </ div >
</ td >
< td align ="center" abbr ="disc" >
< div style ="text-align: center; width: 80px;" >
123 </ div >
</ td >
< td align ="center" abbr ="extReward" >
< div style ="text-align: center; width: 80px;" >
222 </ div >
</ td >
< td align ="center" abbr ="ibePrice" >
< div style ="text-align: center; width: 100px;" >
123 </ div >
</ td >
< td align ="center" abbr ="profits" >
< div style ="text-align: center; width: 60px;" >
11 </ div >
</ td >
< td align ="center" abbr ="workTime" >
< div style ="text-align: center; width: 100px;" >
123 </ div >
</ td >
< td align ="center" abbr ="outTime" >
< div style ="text-align: center; width: 60px;" >
432 </ div >
</ td >
</ tr >
</ tbody >
</div>
问题就出在最外层div标签上,Flexigrid并没有在我们的div内部插入整个table,而是直接植入了tbody体,插入tr行,但是这种做法在低版本IE中是不能被识别的。
问题修复也很简单,将最外层的div替换成table即可解决问题
将
<
div
id
="grd_ex"
></
div
>替换成
<
table
id
="grd_ex"
></
table
>