jQuery插件flexigrid使用总结

一、参考资料

1、jQuery插件flexiGrid的完全使用，附代码下载

2、修改flexigrid源码一(json,checkbox)[原创]

3、jQuery +UI + flexigrid做的一个用户管理界面

4、ASP.NET MVC Flexigrid sample

5、基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明

6、官方网站

7、总结!最佳jQuery窗口插件jqModal

二、说明

本文是在参考了以上内容后写出的，引用了相关代码。如有侵权，请与我联系。

自己整理了2套皮肤。

附件为eclipse工程文件，带数据库文件，导入相关sql，修改配置文件就能运行。

注意：部署的时候下面的一个文件：.mymetadata这个里面关系到这个项目的名称，由于我是直接拷贝的/gtgrid_LianDong这个项目，所以导致了名字不是flexigrid，请自行修改，

 

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <project-module  
3.   type="WEB"  
4.   name="flexigrid"  
5.   id="myeclipse.1267149904578"  
6.   context-root="<span style="color: #ff0000;">/gtgrid_LianDong</span>"  
7.   j2ee-spec="1.4"  
8.   archive="flexigrid.war">  
9.   <attributes>  
10.     <attribute name="webrootdir" value="WebRoot" />  
11.   </attributes>  
12. </project-module>  

 

三、代码

 

 

Flexigrid部分代码代码  

1. if (t.grid)  
2.             return false; // return if already exist  
3.   
4.         // apply default properties  
5.         p = $.extend({  
6.             height : 200, // flexigrid插件的高度，单位为px  
7.             width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算  
8.             striped : true, // 是否显示斑纹效果，默认是奇偶交互的形式  
9.             novstripe : false,  
10.             minwidth : 30, // 列的最小宽度  
11.             minheight : 80, // 列的最小高度  
12.             resizable : true, // 是否可伸缩  
13.             url : false, // ajax方式对应的url地址  
14.             method : 'POST', // 数据发送方式  
15.             dataType : 'xml', // 数据加载的类型  
16.             checkbox : false,// 是否要多选框  
17.             errormsg : '连接错误!',// 错误提示信息  
18.             usepager : false, // 是否分页  
19.             nowrap : true, // 是否不换行  
20.             page : 1, // 默认当前页  
21.             total : 1, // 总页面数  
22.             useRp : true, // 是否可以动态设置每页显示的结果数  
23.             rp : 15, // 每页默认的结果数  
24.             rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数  
25.             title : false,// 是否包含标题  
26.             pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式  
27.             procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息  
28.             query : '',// 搜索查询的条件  
29.             qtype : '',// 搜索查询的类别  
30.             nomsg : '没有数据存在!',// 无结果的提示信息  
31.             minColToggle : 1, // 允许显示的最小列数  
32.             showToggleBtn : true, // 是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错  
33.             hideOnSubmit : true,// 隐藏提交  
34.             autoload : true,// 自动加载  
35.             blockOpacity : 0.5,// 透明度设置  
36.             onToggleCol : false,// 当在行之间转换时，可在此方法中重写默认实现，基本无用  
37.             onChangeSort : false,// 当改变排序时，可在此方法中重写默认实现，自行实现客户端排序  
38.             onSuccess : false,// 成功后执行  
39.             onSubmit : false  
40.               // 调用自定义的计算函数  
41.           }, p);  

 

 

Test.js代码  

1. $(function() {  
2.         $("#flex").flexigrid({  
3.                 url : 'all.action',  
4.                 dataType : 'json',  
5.                 colModel : [{  
6.                         display : 'ID',  
7.                         name : 'id',  
8.                         width : 50,// 得加上 要不IE报错  
9.                         sortable : true,  
10.                         align : 'center'  
11.                     }, {  
12.                         display : '商品名称',  
13.                         name : 'name',  
14.                         width : 100,  
15.                         sortable : true,  
16.                         align : 'center'  
17.                     }, {  
18.                         display : '标准',  
19.                         name : 'stand',  
20.                         width : 100,  
21.                         sortable : true,  
22.                         align : 'center'  
23.                     }, {  
24.                         display : '单价',  
25.                         name : 'money',  
26.                         width : 100,  
27.                         sortable : true,  
28.                         align : 'center'  
29.                     }, {  
30.                         display : '库存',  
31.                         name : 'leavings',  
32.                         width : 100,  
33.                         sortable : true,  
34.                         align : 'center'  
35.                     }, {  
36.                         display : '已经订购',  
37.                         name : 'orders',  
38.                         width : 100,  
39.                         sortable : true,  
40.                         align : 'center'  
41.                     }],  
42.                 buttons : [{  
43.                         name : '添加',  
44.                         bclass : 'add',  
45.                         onpress : action  
46.                     }, {  
47.                         // 设置分割线  
48.                         separator : true  
49.                     }, {  
50.                         name : '删除',  
51.                         bclass : 'delete',  
52.                         onpress : action  
53.                     }, {  
54.                         separator : true  
55.                     }, {  
56.                         name : '修改',  
57.                         bclass : 'edit',  
58.                         onpress : action  
59.                     }, {  
60.                         separator : true  
61.                     }],  
62. //              searchitems : [{  
63. //                      display : 'ID',  
64. //                      name : 'id',  
65. //                      isdefault : true  
66. //                  }, {  
67. //                      display : '库存',  
68. //                      name : 'leavings'  
69. //                  }],  
70.                 sortname : "id",  
71.                 sortorder : "asc",  
72.                 usepager : true,  
73.                 title : '商品信息',  
74.                 useRp : true,  
75.                 checkbox : true,// 是否要多选框  
76.                 rowId : 'id',// 多选框绑定行的id  
77.                 rp : 10,  
78.                 showTableToggleBtn : true,  
79.                 width : 700,  
80.                 height : 263  
81.             });  
82.         var actions="";  
83.         function action(com, grid) {  
84.             switch (com) {  
85.                 case '添加' :  
86.                     $("#savegoods input[type='text']").each(function() {  
87.                             $(this).val("");  
88.                         });  
89.                      $('#savegoods input[name="id"]').removeAttr("<span style="font-family: 'Courier New', monospace;">disabled<span style="font-family: Verdana, Arial, Helvetica, sans-serif;">");</span></span>  
90.                      $('#savegoods').attr("action","add.action");  
91.                     actions="add.action";  
92.                     $("#goods").jqmShow();  
93.                     break;  
94.                 case '修改' :  
95.                     selected_count = $('.trSelected', grid).length;  
96.                     if (selected_count == 0) {  
97.                         alert('请选择一条记录!');  
98.                         return;  
99.                     }  
100.                     if (selected_count > 1) {  
101.                         alert('抱歉只能同时修改一条记录!');  
102.                         return;  
103.                     }  
104.                     data = new Array();  
105.                     $('.trSelected td', grid).each(function(i) {  
106.                             data[i] = $(this).children('div').text();  
107.                         });  
108.                     $('#savegoods input[name="id"]').val(data[0]).attr("<span style="font-family: 'Courier New', monospace;">disabled<span style="font-family: Verdana, Arial, Helvetica, sans-serif;">",true);</span></span>  
109.                     $('#savegoods input[name="name"]').val(data[1]);  
110.                     $('#savegoods input[name="stand"]').val(data[2]);  
111.                     $('#savegoods input[name="money"]').val(data[3]);  
112.                     $('#savegoods input[name="leavings"]').val(data[4]);  
113.                     $('#savegoods input[name="orders"]').val(data[5]);  
114.                       
115.                    actions="modify.action";  
116.   
117.                     $("#goods").jqmShow();  
118.                     break;  
119.                 case '删除' :  
120.                     selected_count = $('.trSelected', grid).length;  
121.                     if (selected_count == 0) {  
122.                         alert('请选择一条记录!');  
123.                         return;  
124.                     }  
125.                     names = '';  
126.                     $('.trSelected td:nth-child(3) div', grid).each(function(i) {  
127.                             if (i)  
128.                                 names += ',';  
129.                             names += $(this).text();  
130.                         });  
131.                     ids = '';  
132.                     $('.trSelected td:nth-child(2) div', grid).each(function(i) {  
133.                             if (i)  
134.                                 ids += ',';  
135.                             ids += $(this).text();  
136.                         })  
137.                     if (confirm("确定删除商品[" + names + "]?")) {  
138.                         delUser(ids);  
139.                     }  
140.                     break;  
141.             }  
142.         }  
143.         $("#goods").jqm({  
144.             // trigger : 'a.showDialog',// 触发  
145.             // ajax: '@href',//ajax读取方式  
146.             // ajaxText:'',//提示语言  
147.             modal : true,// 限制输入（鼠标点击，按键）的对话  
148.             overlay : 60 // 遮罩程度%  
149.               // target : t,// 提示  
150.               // onHide : function(h) {  
151.               // // // t.html('Please Wait...'); // Clear Content HTML on Hide.  
152.               // h.o.remove(); // remove overlay  
153.               // // h.w.fadeOut(888); // hide window  
154.               // }  
155.           }).jqmAddClose('.close')// 添加触发关闭的selector  
156.           .jqDrag('.drag');// 添加拖拽的selector  
157.           
158.         function delUser(ids) {  
159.             $.ajax({  
160.                     url : 'delete.action',  
161.                     data : {  
162.                         ids : ids  
163.                     },  
164.                     type : 'POST',  
165.                     dataType : 'json',  
166.                     success : function() {  
167.                         $('#flex').flexReload();//表格重载  
168.                     }  
169.                 });  
170.         }  
171.         $("#submit").click(function(){  
172.              $.ajax({  
173.                     url : actions,  
174.                     data : $("#savegoods").serialize(),  
175.                     type : 'POST',  
176.                     dataType : 'json',  
177.                     success : function(data) {  
178.                         $("#goods").jqmHide();  
179.                         $('#flex').flexReload();  
180.                     }  
181.                 });  
182.         })  
183.     });  

 

Index.jsp代码  

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
2. <html>  
3.     <head>  
4.         <title>商品信息</title>  
5.         <link rel="stylesheet" type="text/css"  
6.             href="flexigrid_my/css/flexigrid_gray.css">  
7.         <link rel="stylesheet" type="text/css"  
8.             href="flexigrid_my/jqModal/css/jqModal_gray.css">  
9.         <script type="text/javascript" src="flexigrid_my/jquery-1.3.2.min.js"></script>  
10.         <script type="text/javascript" src="flexigrid_my/flexigrid.js"></script>  
11.         <script type="text/javascript" src="flexigrid_my/jqModal/jqDnR.js"></script>  
12.         <script type="text/javascript" src="flexigrid_my/jqModal/jqModal.js"></script>  
13.         <script type="text/javascript" src="flexigrid_my/test.js"></script>  
14.     </head>  
15.     <body>  
16.         <table id="flex" style="display: none"></table>  
17.         <div class="jqmWindow" style="width: 300px;" id="goods">  
18.             <div class="drag">  
19.                 商品信息编辑  
20.                 <div class="close"></div>  
21.             </div>  
22.             <form id="savegoods" method="post">  
23.                 <table width="252" border="0" align="center"  
24.                     cellpadding="0" cellspacing="0">  
25.                     <tr>  
26.                         <td>ID：</td>  
27.                         <td><input type="text" name="id" ></td>  
28.                     </tr>  
29.                     <tr>  
30.                         <td>商品名称：</td>  
31.                         <td><input type="text" name="name"></td>  
32.                     </tr>  
33.                     <tr>  
34.                         <td>标准：</td>  
35.                         <td><input type="text" name="stand"></td>  
36.                     </tr>  
37.                     <tr>  
38.                         <td>单价：</td>  
39.                         <td><input type="text" name="money"></td>  
40.                     </tr>  
41.                     <tr>  
42.                         <td>库存：</td>  
43.                         <td><input type="text" name="leavings"></td>  
44.                     </tr>  
45.                     <tr>  
46.                         <td>已经订购：</td>  
47.                         <td><input type="text" name="orders"></td>  
48.                     </tr>  
49.                 </table>  
50.                 <div align="center">  
51.                     <input type="button" id="submit" class="input-button" value="提交" />  
52.                     <input type="reset" class="input-button" value="重置" />  
53.                 </div>  
54.             </form>  
55.         </div>  
56.     </body>  
57. </html><span style="white-space: normal;"><strong>  
58. </strong></span>  

 四、部分效果图

蓝色皮肤

蓝色皮肤下的修改

 

灰色皮肤

灰色皮肤下的修改

 

五、BUG

在Firefox3.6、IE6、7、8、Chrome5下测试通过。

修复了在ie8下checkbox显示的问题。

修改了禁止修改ID,改为： $('#savegoods input[name="id"]').val(data[0]).attr("disabled",true);同时： $('#savegoods input[name="id"]').removeAttr("disabled");

 

http://matychen.iteye.com/blog/611837