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

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>

三、代码

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

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. actions="modify.action";
115. $("#goods").jqmShow();
116. break;
117. case '删除' :
118. selected_count = $('.trSelected', grid).length;
119. if (selected_count == 0) {
120. alert('请选择一条记录!');
121. return;
122. }
123. names = '';
124. $('.trSelected td:nth-child(3) div', grid).each(function(i) {
125. if (i)
126. names += ',';
127. names += $(this).text();
128. });
129. ids = '';
130. $('.trSelected td:nth-child(2) div', grid).each(function(i) {
131. if (i)
132. ids += ',';
133. ids += $(this).text();
134. })
135. if (confirm("确定删除商品[" + names + "]?")) {
136. delUser(ids);
137. }
138. break;
139. }
140. }
141. $("#goods").jqm({
142. // trigger : 'a.showDialog',// 触发
143. // ajax: '@href',//ajax读取方式
144. // ajaxText:'',//提示语言
145. modal : true,// 限制输入（鼠标点击，按键）的对话
146. overlay : 60 // 遮罩程度%
147. // target : t,// 提示
148. // onHide : function(h) {
149. // // // t.html('Please Wait...'); // Clear Content HTML on Hide.
150. // h.o.remove(); // remove overlay
151. // // h.w.fadeOut(888); // hide window
152. // }
153. }).jqmAddClose('.close')// 添加触发关闭的selector
154. .jqDrag('.drag');// 添加拖拽的selector
155. function delUser(ids) {
156. $.ajax({
157. url : 'delete.action',
158. data : {
159. ids : ids
160. },
161. type : 'POST',
162. dataType : 'json',
163. success : function() {
164. $('#flex').flexReload();//表格重载
165. }
166. });
167. }
168. $("#submit").click(function(){
169. $.ajax({
170. url : actions,
171. data : $("#savegoods").serialize(),
172. type : 'POST',
173. dataType : 'json',
174. success : function(data) {
175. $("#goods").jqmHide();
176. $('#flex').flexReload();
177. }
178. });
179. })
180. });

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");

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