Jquery表格插件flexgrid使用心得

Jquery表格插件flexgrid使用心得

基本环境的配置。所需要的JS文件和CSS文件如下所示：

<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../flexigrid-1.1/js/flexigrid.js"></script> <link rel="stylesheet" type="text/css" href="../flexigrid-1.1/css/flexigrid.css" />

一、基本容器与设置。

1.首先先建立一个空的表格，设置好ID。

<table id="t_user0" style="display:none;"></table>

2.在表格代码的下方初始化表格。

<table id="t_user0" style="display:none;"> </table> <script type="text/javascript"> $(function() { $("#t_user0").flexigrid({ url : "bguser!CommonUsers", dataType : "json", colModel : [ { display : '用户ID', name : 'usrRegname', sortable : true, width : '120' }, { display : '用户名', sortable : true, width : '80' }, { display : '真实姓名', sortable : true, width : '100' }, { display : '生日', sortable : true, width : '60' }, { display : '身份证号码', sortable : true, width : '80' }, { display : '密码提示问题', sortable : true, width : '320' }, { display : '密码提示答案', sortable : true, width : '320' }, { display : '所在大学', sortable : true, width : '320' }, { display : '所在学院', sortable : true, width : '320' }, { display : '专业班级', sortable : true, width : '320' }, { display : '入学年份', sortable : true, width : '160' }, { display : '性别', sortable : true, width : '320' }, { display : '电子邮件', sortable : true, width : '320' }, { display : '联系方式', sortable : true, width : '320' }, { display : 'QQ号码', sortable : true, width : '320' }, { display : '特长爱好', sortable : true, width : '320' }, { display : '用户权限', sortable : true, width : '320' } ], buttons : [ { name : "设为内部人员", bclass : "add", onpress : setinner }, { name : "删除", bclass : "delete", onpress : deleteitem } ], searchitems : [ { display : '用户名', name : 'usrRegname' }, { separator : true } ], sortname : "usrId", sortorder : "desc", usepager : true, title : "普通用户管理", usrRp : true, rp : 10, showTableToggleBtn : true, height : '300', width : 'auto' }); }); </script>

注：参数列表（来自网络，未验证是否齐全）

1. height: 200, //flexigrid插件的高度，单位为px  

2. width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题  

3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式  

4. novstripe: false,//没用过这个属性  

5. minwidth: 30, //列的最小宽度  

6. minheight: 80, //列的最小高度  

7. resizable: false, //resizable table是否可伸缩  

8. url: false, //ajax url,ajax方式对应的