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

这两天刚刚入手使用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
})

之后效果是在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>

</div>  

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

 

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

 

<div id="grd_ex"></div>替换成<table id="grd_ex"></table>

 

 

posted @ 2012-01-14 14:47  咖啡@Home  阅读(446)  评论(0编辑  收藏  举报