[Javascript - JQuery - Plugin] Flexigrid 使用笔记，一

这两天刚刚入手使用Flexigrid插件，这是一个不错的插件，官方的演示也很漂亮。不过可惜是仿Ext的。

基于之前对Ext3，Ext4的熟悉开始尝试使用JQuery+Flexigrid这个更轻量级的配置，同时也避开Ext在IE内核下JS计算能力属于低能级别的问题（当然这个插件也有性能问题，只不过相对于Ext来讲简直就是大巫见小巫了）

按照常规做法，Header引入JQuery的css，js，然后引入Flexigrid的css,js文件然后敲代码类似于

<div ></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

})

之后效果是在chrome,firex,ie8下能够显示读取到的数据，但是ie6,ie7不显示任何数据只有表头。

对表格体进行查看后发现数据行生成的html代码如下：

<div class="grd_ex" cellpadding="0" cellspacing="0" >

<tbody>

<tr >

<td align="center" abbr="plcid" >

<div >

undefined</div>

</td>

<td align="center" abbr="disc">

<div >

123</div>

</td>

<td align="center" abbr="extReward">

<div >

222</div>

</td>

<td align="center" abbr="ibePrice">

<div >

123</div>

</td>

<td align="center" abbr="profits">

<div >

11</div>

</td>

<td align="center" abbr="workTime">

<div >

123</div>

</td>

<td align="center" abbr="outTime">

<div >

432</div>

</td>

</tr>

</tbody>

</div>

问题就出在最外层div标签上，Flexigrid并没有在我们的div内部插入整个table，而是直接植入了tbody体，插入tr行，但是这种做法在低版本IE中是不能被识别的。

问题修复也很简单，将最外层的div替换成table即可解决问题

将<div ></div>替换成<table ></table>