jQuery插件flexigrid使用总结

jQuery

一、参考资料

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，请自行修改，

 

1. e id="flex" style="display: none"></table>  
2.         <div class="jqmWindow" style="width: 300px;" id="goods">  
3.             <div class="drag">  
4.                 商品信息编辑  
5.                 <div class="close"></div>  
6.             </div>  
7.             <form id="savegoods" method="post">  
8.                 <table width="252" border="0" align="center"  
9.                     cellpadding="0" cellspacing="0">  
10.                     <tr>  
11.                         <td>ID：</td>  
12.                         <td><input type="text" name="id" ></td>  
13.                     </tr>  
14.                     <tr>  
15.                         <td>商品名称：</td>  
16.                         <td><input type="text" name="name"></td>  
17.                     </tr>  
18.                     <tr>  
19.                         <td>标准：</td>  
20.                         <td><input type="text" name="stand"></td>  
21.                     </tr>  
22.                     <tr>  
23.                         <td>单价：</td>  
24.                         <td><input type="text" name="money"></td>  
25.                     </tr>  
26.                     <tr>  
27.                         <td>库存：</td>  
28.                         <td><input type="text" name="leavings"></td>  
29.                     </tr>  
30.                     <tr>  
31.                         <td>已经订购：</td>  
32.                         <td><input type="text" name="orders"></td>  
33.                     </tr>  
34.                 </table>  
35.                 <div align="center">  
36.                     <input type="button" id="submit" class="input-button" value="提交" />  
37.                     <input type="reset" class="input-button" value="重置" />  
38.                 </div>  
39.             </form>  
40.         </div>  
41.     </body>  
42. </html><span style="white-space: normal;"><strong>  
43. </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");

 

用JQuery让GT-Grid的下拉列表实现二级联动