[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 >