[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',  40, sortable: true, align: 'center', hide: true },

    { display: '代理费率', name: 'disc',  80, sortable: true, align: 'center' },

    { display: '红包', name: 'extReward',  80, sortable: true, align: 'center' },

    { display: '票价(RMB/人)', name: 'ibePrice',  100, sortable: true, align: 'center' },

    { display: '利润', name: 'profits',  60, sortable: true, align: 'center' },
    { display: '营业时间', name: 'workTime',  100, sortable: true, align: 'center' },
    { display: '出票速度', name: 'outTime',  60, sortable: true, align: 'center' }

    ],

    title: '可选政策',

    useRp: true,

     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;  40px;">

                    undefined</div>

            </td>

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

                <div style="text-align: center;  80px;">

                    123</div>

            </td>

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

                <div style="text-align: center;  80px;">

                    222</div>

            </td>

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

                <div style="text-align: center;  100px;">

                    123</div>

            </td>

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

                <div style="text-align: center;  60px;">

                    11</div>

            </td>

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

                <div style="text-align: center;  100px;">

                    123</div>

            </td>

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

                <div style="text-align: center;  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>