jQuery.FlexiGrid使用总结

经过对FlexiGrid的大量使用，及时不时琢磨下其代码，对她的脾性有了一定的了解，是该做总结的时候了。

一、FlexiGrid下载

1、原版代码

最近Paulo P. Marinas对FlexiGrid做了修改，以适应jQuery 1.4.2。看了下作者列出来的特性表，该表很长，但与过去比，却没有增加什么新功能，所以版本号不做修改，仍然是1.0b3。
其中提到的一点值得注意，就是flexAddData方法已改写，性能是否有很大提高，还没测试，要看结果。（最近，抽时间看了一下渲染表格数据的代码，估计效率还是不理想）。还有Editable功能的增加，仍然处于长期计划中，这一点比较令人纠结。

在此说明一下，本文仍然只是对旧版进行总结。

下载：http://code.google.com/p/flexigrid/downloads/list

2、功能优化扩展版
该版本为xuanye（http://www.cnblogs.com/xuanye ）的修改版，很好，很强大。

下载１：http://code.google.com/p/xjplugin/downloads/list

下载２：http://xjplugin.googlecode.com/svn/trunk/ControlsSample/Javascripts/Plugins/jquery.flexigrid.js

下载2中的代码新增了getSelectedRows()方法，获取表格行数据将更加简单。

二、配置参数（options）说明

默认参数设置代码：

Js代码  

  1. // apply default properties
  2. p = $.extend({
  3. height: 200,
  4. //default height
  5. width: ‘auto‘,
  6. //auto width
  7. striped: true,
  8. //apply odd even stripes
  9. novstripe: false,
  10. minwidth: 30,
  11. //min width of columns
  12. minheight: 80,
  13. //min height of columns
  14. resizable: true,
  15. //resizable table
  16. url: false,
  17. //ajax url
  18. method: ‘POST‘,
  19. // data sending method
  20. dataType: ‘xml‘,
  21. // type of data loaded
  22. errormsg: ‘Connection Error‘,
  23. usepager: false,
  24. //
  25. nowrap: true,
  26. //
  27. page: 1,
  28. //current page
  29. total: 1,
  30. //total pages
  31. useRp: true,
  32. //use the results per page select box
  33. rp: 15,
  34. // results per page
  35. rpOptions: [10, 15, 20, 25, 40],
  36. title: false,
  37. pagestat: ‘Displaying {from} to {to} of {total} items‘,
  38. procmsg: ‘Processing, please wait ...‘,
  39. query: ‘‘,
  40. qtype: ‘‘,
  41. nomsg: ‘No items‘,
  42. minColToggle: 1,
  43. //minimum allowed column to be hidden
  44. showToggleBtn: true,
  45. //show or hide column toggle popup
  46. hideOnSubmit: true,
  47. autoload: true,
  48. blockOpacity: 0.5,
  49. onToggleCol: false,
  50. onChangeSort: false,
  51. onSuccess: false,
  52. onSubmit: false
  53. // using a custom populate function
  54. },
  55. p);

参数说明：

height: 200, //flexigrid插件的高度，单位为px
width: ‘auto‘, //宽度值，auto表示根据每列的宽度自动计算
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false, //没用过，不知怎么用，还需分析源代码
minwidth: 30, //列的最小宽度
minheight: 80, //列的最小高度
resizable: true, //是否可伸缩
url: false, //ajax方式对应的url地址
method: ‘POST‘, // 数据发送方式
dataType: ‘xml‘, // 数据加载的类型
errormsg: ‘Connection Error‘,//错误提示信息
usepager: false, //是否分页
nowrap: true, //是否不换行
page: 1, //默认当前页
total: 1, //总页面数
useRp: true, //是否可以动态设置每页显示的结果数
rp: 15, // 每页默认的结果数
rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
title: false, //标题设置
pagestat: ‘Displaying {from} to {to} of {total} items‘,//显示分页状态
procmsg: ‘Processing, please wait …’,//正在处理的提示信息
query: ‘‘,//搜索查询的条件，提交到服务器
qtype: ‘‘,//搜索查询的类别，提交到服务器
nomsg: ‘No items‘,//无结果的提示信息
minColToggle: 1, //是否允许隐藏列
showToggleBtn: true, //显示或隐藏数据表格
hideOnSubmit: true,//隐藏提交
autoload: true,//自动加载
blockOpacity: 0.5,//透明度设置
onToggleCol: false,//当在行之间转换时
onChangeSort: false,//当改变排序时
onSuccess: false,//成功后执行
onSubmit: false // 触发自定义populate的提交事件

三、使用步骤说明

１、在<head>标识里加入引用文件代码（注意文件存放路径）：

Html代码  

  1. < link rel = "stylesheet"href = "flexigrid/flexigrid.css"type = "text/css" > </link>
  2. <script type="text/javascript " src="jquery / jquery.1.3.2.mini.js "></script>
  3. <script type="text / javascript " src="flexigrid / flexigrid.js "></script>"

添加工具按钮图标样式：

Html代码  

  1. < style type = "text/css" >
  2. /* === 增加工具按钮图标样式  ====*/
  3. .flexigrid div.fbutton.add
  4. {
  5. padding - left: 20px;
  6. background: url(images / row_add.gif) no - repeat center left;
  7. }
  8. .flexigrid div.fbutton.edit
  9. {
  10. padding - left: 20px;
  11. background: url(images / row_edit.gif) no - repeat center left;
  12. }
  13. .flexigrid div.fbutton.delete
  14. {
  15. padding - left: 20px;
  16. background: url(images / row_delete.gif) no - repeat center left;
  17. }
  18. .flexigrid div.fbutton.reset
  19. {
  20. padding - left: 20px;
  21. background: url(images / user_reset.gif) no - repeat center left;
  22. }
  23. .flexigrid div.fbutton.excel
  24. {
  25. padding - left: 20px;
  26. background: url(images / excel.gif) no - repeat center left;
  27. }
  28. < /style>/

为了方便以后使用，上面这段样式可以加入到flexigrid.css文件中。

２、在<body>标识里加入代码：

Html代码  

  1. <table id="grid" style="display:none"></table>

如果要增加/编辑数据，还要加入下面这样的HTML代码：

Html代码  

  1. <div id="dialog_div" style=‘display:none‘>
  2. <form id="dialog_form" name="dialog_form" action="">
  3. <table width="100%" class="tableinput">
  4. <tr>
  5. <td width="30%">操作工号：</td>
  6. <td width="70%">
  7. <input name="username" type="text" id="username" />*八位数字
  8. <input name="user_id" type="hidden" id="user_id" />
  9. </td>
  10. </tr>
  11. <tr>
  12. <td>真实姓名：</td>
  13. <td><input name="name" type="text" id="name" /></td>
  14. </tr>
  15. <tr>
  16. <td>市县机构：</td>
  17. <td>{{$input.html_sxjg}}</td>
  18. </tr>
  19. <tr>
  20. <td>营业机构：</td>
  21. <td>{{$input.html_yyjg}}</td>
  22. </tr>
  23. <tr>
  24. <td>分配角色：</td>
  25. <td>{{$input.html_auth}}</td>
  26. </tr>
  27. </table>
  28. </form>
  29. </div>

3、在<head>标识里编写JavaScript代码

代码示例：

Js代码  

  1. < script type = "text/javascript" >
  2. $(function() {
  3. // 表单中的文本输入栏绑定 inputtxt 样式类
  4. $(‘#dialog_form input:text‘).addClass(‘inputtxt‘);
  5. $("#grid").flexigrid({
  6. url: ‘{{url controller=‘Ghgl ‘ action=‘GetPagerData ‘}}‘,
  7. //url:‘index.php?ctl=User&act=GetJsonData‘,
  8. dataType: ‘json‘,
  9. colModel:
  10. [
  11. {
  12. display: ‘序号‘,
  13. name: ‘seq‘,
  14. width: 40,
  15. sortable: false,
  16. align: ‘center‘
  17. },
  18. {
  19. display: ‘#ID‘,
  20. name: ‘user_id‘,
  21. width: 40,
  22. sortable: true,
  23. align: ‘left‘,
  24. hide: true
  25. },
  26. {
  27. display: ‘操作工号‘,
  28. name: ‘username‘,
  29. width: 70,
  30. sortable: true,
  31. align: ‘left‘
  32. },
  33. {
  34. display: ‘真实姓名‘,
  35. name: ‘name‘,
  36. width: 60,
  37. sortable: false,
  38. align: ‘left‘
  39. },
  40. {
  41. display: ‘分配角色‘,
  42. name: ‘role‘,
  43. width: 80,
  44. sortable: false,
  45. align: ‘left‘
  46. },
  47. {
  48. display: ‘市县单位‘,
  49. name: ‘sxmc‘,
  50. width: 120,
  51. sortable: false,
  52. align: ‘left‘
  53. },
  54. {
  55. display: ‘营业机构‘,
  56. name: ‘jgmc‘,
  57. width: 120,
  58. sortable: true,
  59. align: ‘left‘
  60. },
  61. {
  62. display: ‘工号创建时间‘,
  63. name: ‘created‘,
  64. width: 110,
  65. sortable: false,
  66. align: ‘left‘,
  67. hide: false
  68. },
  69. {
  70. display: ‘密码更新时间‘,
  71. name: ‘pwdupdated‘,
  72. width: 110,
  73. sortable: false,
  74. align: ‘left‘,
  75. hide: false
  76. }
  77. ],
  78. searchitems:
  79. [
  80. {
  81. display: ‘用户工号‘,
  82. name: ‘username‘
  83. },
  84. {
  85. display: ‘用户姓名‘,
  86. name: ‘name‘,
  87. isdefault: true
  88. },
  89. {
  90. display: ‘市县单位‘,
  91. name: ‘sxmc‘
  92. },
  93. {
  94. display: ‘营业机构‘,
  95. name: ‘jgmc‘
  96. }
  97. ],
  98. sortname: "sx_id, jg_id, username",
  99. sortorder: "DESC",
  100. title: ‘<font color="#336699">操作工号维护</font>‘,
  101. usepager: true,
  102. useRp: true,
  103. rp: 15,
  104. showTableToggleBtn: false,
  105. width: 600,
  106. height: 400,
  107. striped: true,
  108. 　
  109. //onSubmit: addFormData,
  110. pagestat: ‘当前显示记录 {from} 到 {to} 条，总 {total} 条‘,
  111. procmsg: ‘正在处理，请稍等 ...‘,
  112. nomsg: ‘找不到符合条件的资料！‘,
  113. errormsg: ‘连接后台失败！‘,
  114. buttons:
  115. [
  116. {
  117. name: ‘添加‘,
  118. bclass: ‘add‘,
  119. onpress: opt
  120. },
  121. {
  122. name: ‘修改‘,
  123. bclass: ‘edit‘,
  124. onpress: opt
  125. },
  126. {
  127. name: ‘删除‘,
  128. bclass: ‘delete‘,
  129. onpress: opt
  130. },
  131. {
  132. separator: true
  133. },
  134. {
  135. name: ‘导出EXCEL‘,
  136. bclass: ‘excel‘,
  137. onpress: opt
  138. }
  139. ]
  140. });
  141. /**
  142. * 添加/修改对话框
  143. */
  144. $(‘#dialog_div‘).dialog({
  145. hide: ‘‘,
  146. //点击取消后隐藏,如果设为true，则无法关闭弹窗。
  147. autoOpen: false,
  148. width: 340,
  149. //height:230,
  150. modal: true,
  151. //蒙层
  152. //title:‘单位资料添加/修改‘,
  153. overlay: {
  154. opacity: 0.5,
  155. background: "black"
  156. },
  157. buttons: {
  158. ‘关闭‘: function() {
  159. $(this).dialog("close");
  160. },
  161. ‘重置‘: function() {
  162. $(this).children(‘form‘)[0].reset();
  163. },
  164. ‘提交‘: function() {
  165. addUpdate();
  166. }
  167. }
  168. });
  169. /**
  170. * 点击工具条按钮操作
  171. */
  172. function opt(com, grid) {
  173. switch (com) {
  174. case ‘添加‘:
  175. $(‘.ui-dialog-title‘).html(‘<font color="#336699">添加操作工号</font>‘);
  176. $(‘#dialog_form input[name=user_id]‘)[0].value = ‘‘;
  177. $(‘#dialog_div‘).dialog(‘open‘).children(‘form‘)[0].reset();
  178. break;
  179. case ‘修改‘:
  180. $(‘.ui-dialog-title‘).html(‘<font color="#336699">修改操作工号</font>‘);
  181. selected_count = $(‘.trSelected‘, grid).length;
  182. if (selected_count == 0) {
  183. JAlert(‘请选择一条记录。‘, ‘消息提示‘);
  184. return false;
  185. }
  186. if (selected_count > 1) {
  187. jAlert(‘抱歉每次只能修改一条记录。‘, ‘消息提示‘);
  188. return false;
  189. }
  190. // 读取表格所选行数据
  191. var data = new Array();
  192. $(‘.trSelected td‘, grid).each(function(i) {
  193. data[i] = $(this).children(‘div‘).text();
  194. });
  195. //alert(data);
  196. // 初始化编辑数据界面数据
  197. $(‘#dialog_form input[name=user_id]‘)[0].value = data[1];
  198. $(‘#dialog_form input[name=username]‘)[0].value = data[2];
  199. $(‘#dialog_form input[name=name]‘)[0].value = data[3];
  200. $.ajax({
  201. url: ‘{{url controller=‘Ghgl ‘ action=‘GetUpdData ‘}}‘,
  202. data: {
  203. user_id: data[1]
  204. },
  205. type: ‘POST‘,
  206. dataType: ‘json‘,
  207. success: function(data) {
  208. //alert($(‘#jg_id‘).options);
  209. var jg_slt = $(‘#dialog_form #jg_id option‘);
  210. var jg_len = jg_slt.length;
  211. if (jg_len > 0) {
  212. setSelected(jg_slt, data.jg_id);
  213. }
  214. var auth_radio = $(‘#dialog_form input:radio‘);
  215. //alert(auth_radio.length);
  216. if (auth_radio.length > 0) {
  217. setChecked(auth_radio, data.auth);
  218. }
  219. }
  220. });
  221. $(‘#dialog_div‘).dialog(‘open‘);
  222. break;
  223. case ‘删除‘:
  224. selected_count = $(‘.trSelected‘, grid).length;
  225. if (selected_count == 0) {
  226. jAlert(‘请选择一条记录。‘, ‘消息提示‘);
  227. return false;
  228. }
  229. if (selected_count > 1) {
  230. jAlert(‘抱歉每次只能删除一条记录。‘, ‘消息提示‘);
  231. return false;
  232. }
  233. var names = ‘‘;
  234. $(‘.trSelected td:nth-child(4) div‘, grid).each(function(i) {
  235. if (i) {
  236. names += ‘,‘;
  237. }
  238. names += $(this).text();
  239. });
  240. var ids = ‘‘;
  241. $(‘.trSelected td:nth-child(2) div‘, grid).each(function(i) {
  242. if (i) {
  243. ids += ‘,‘;
  244. }
  245. ids += $(this).text();
  246. })
  247. /*
  248. if (ids == ‘‘) {
  249. alert(‘请选择删除记录，允许同时选择多条记录。‘);
  250. return;
  251. }*/
  252. /*
  253. if(confirm("确认删除[" + names + "]的用户工号吗？")){
  254. del(ids);
  255. }*/
  256. jConfirm("确认删除[<font color=‘#FF0000‘>" + names + "</font>]的用户工号吗？", ‘删除确认‘,
  257. function(btn) {
  258. if (btn) {
  259. del(ids);
  260. }
  261. });
  262. break;
  263. case ‘导出EXCEL‘:
  264. document.location.href = "{{url controller=‘Ghgl‘ action=‘Export‘}}";
  265. break;
  266. }
  267. }
  268. /**
  269. * 添加记录
  270. */
  271. function addUpdate() {
  272. $(‘#dialog_form‘).ajaxSubmit({
  273. //$(‘#dialog_form‘).ajaxform({
  274. url: "{{url controller=‘Ghgl‘ action=‘Save‘}}",
  275. type: ‘POST‘,
  276. dataType: ‘json‘,
  277. resetForm: true,
  278. success: function(data) {
  279. if (data.success) {
  280. $(‘#grid‘).flexReload();
  281. $(‘#dialog_div‘).dialog(‘close‘);
  282. } else {
  283. jAlert(data.msg, ‘消息提示‘);
  284. return false;
  285. }
  286. },
  287. error: function() {}
  288. });
  289. };
  290. /**
  291. * 删除记录
  292. */
  293. function del(ids) {
  294. $.ajax({
  295. url: "{{url controller=‘Ghgl‘ action=‘Del‘}}",
  296. data: {
  297. ids: ids
  298. },
  299. type: ‘POST‘,
  300. dataType: ‘json‘,
  301. success: function(data) {
  302. if (data.success) {
  303. $(‘#grid‘).flexReload();
  304. } else {
  305. jAlert(data.msg, ‘消息提示‘);
  306. return false;
  307. }
  308. }
  309. });
  310. };
  311. /**
  312. * 重置密码
  313. */
  314. function reset(id) {
  315. $.ajax({
  316. url: "{{url controller=‘Ghgl‘ action=‘Reset‘}}",
  317. data: {
  318. user_id: id
  319. },
  320. type: ‘POST‘,
  321. dataType: ‘json‘,
  322. success: function(data) {
  323. if (data.success) {
  324. jAlert(data.msg, ‘消息提示‘);
  325. return;
  326. } else {
  327. jAlert(data.msg, ‘错误提示‘);
  328. return false;
  329. }
  330. },
  331. error: function() {}
  332. });
  333. };
  334. // 根据 value 初始化下拉列表框
  335. function setSelected(slt, value) {
  336. for (var i = 0; i < slt.length; i++) {
  337. if (slt[i].value == value) {
  338. slt[i].selected = true;
  339. } else {
  340. slt[i].selected = false;
  341. }
  342. }
  343. };
  344. // 根据 value 初始化单选按钮
  345. function setChecked(slt, value) {
  346. for (var i = 0; i < slt.length; i++) {
  347. if (slt[i].value == value) {
  348. slt[i].checked = true;
  349. } else {
  350. slt[i].checked = false;
  351. }
  352. }
  353. };
  354. });
  355. < /script>/

其中代码段：

Js代码  

  1. // 读取表格所选行数据
  2. var data = new Array();
  3. $(‘.trSelected td‘, grid).each(function(i) {
  4. 　　data[i] = $(this).children(‘div‘).text();
  5. });
  6. //alert(data);

为读取表格所选行数据，通过$(‘.trSelected td‘, grid)来读取。

Js代码  

  1. var ids = ‘‘;
  2. $(‘.trSelected td:nth-child(2) div‘,grid).each(function(i){
  3. 　　if(i){
  4. 　　ids += ‘,‘;
  5. 　　}
  6. ids += $(this).text();
  7. })

为读取所选行单元格数据代码，通过：$(‘.trSelected td:nth-child(2) div‘,grid)来读取，如果允许多选，读取回来的是一个数组值。注意：td:nth-child(2)的意思为所选行的第二个单元格，因为:nth-child(index)的索引值从１起。

FlexiGrid.options参数介绍：

１、colModel：列定义数组，用来设置数据网格的表头及数据显示格式。

参数说明：

display：设置列表头名称，必须设置，类型：string，默认值：无。
name：字段名称，必须设置，类型：string，默认值: 无。注意：如果dataType参数设置为json（dataType: ‘json‘），则name值必须与返回的元素名对应。
width：设置列宽度，必须设置，类型：数值（单位为像素px），默认值：无。
sortable：是否可排序，类型：boolen，默认值：false，不排序。
process：处理程序，类型：
function，可格式化单元格。
hide：设置列是否隐藏，类型：boolen，默认值：false
align：设置列数据对齐方式，有三个参数：left、center、right。

代码示例：

Js代码  

  1. colModel:
  2. [
  3. {
  4. display: ‘序号‘,
  5. name: ‘seq‘,
  6. width: 40,
  7. sortable: false,
  8. align: ‘center‘
  9. },
  10. {
  11. display: ‘#ID‘,
  12. name: ‘user_id‘,
  13. width: 40,
  14. sortable: true,
  15. align: ‘left‘,
  16. hide: true
  17. },
  18. {
  19. display: ‘操作工号‘,
  20. name: ‘username‘,
  21. width: 70,
  22. sortable: true,
  23. align: ‘left‘
  24. },
  25. {
  26. display: ‘真实姓名‘,
  27. name: ‘name‘,
  28. width: 60,
  29. sortable: false,
  30. align: ‘left‘
  31. },
  32. {
  33. display: ‘分配角色‘,
  34. name: ‘role‘,
  35. width: 80,
  36. sortable: false,
  37. align: ‘left‘
  38. },
  39. {
  40. display: ‘市县单位‘,
  41. name: ‘sxmc‘,
  42. width: 120,
  43. sortable: false,
  44. align: ‘left‘
  45. },
  46. {
  47. display: ‘营业机构‘,
  48. name: ‘jgmc‘,
  49. width: 120,
  50. sortable: true,
  51. align: ‘left‘
  52. },
  53. {
  54. display: ‘工号创建时间‘,
  55. name: ‘created‘,
  56. width: 110,
  57. sortable: false,
  58. align: ‘left‘,
  59. hide: false
  60. },
  61. {
  62. display: ‘密码更新时间‘,
  63. name: ‘pwdupdated‘,
  64. width: 110,
  65. sortable: false,
  66. align: ‘left‘,
  67. hide: false
  68. }
  69. ],

２、buttons：工具栏Button定义数组，用来设置数据网格的工具条按钮。

参数说明：

name：Botton的标识，类型:string， 默认值：无
bclass :样式， 类型:boolen，默认值：无
onpress :当button被点击时触发的事件接受button的name为第一个参数，Grid为第二个参数的一个function
separator :是否显示分隔符

代码示例：

Js代码  

  1. buttons:
  2. [
  3. {
  4. name: ‘添加‘,
  5. bclass: ‘add‘,
  6. onpress: opt
  7. },
  8. {
  9. name: ‘修改‘,
  10. bclass: ‘edit‘,
  11. onpress: opt
  12. },
  13. {
  14. name: ‘删除‘,
  15. bclass: ‘delete‘,
  16. onpress: opt
  17. },
  18. {
  19. separator: true
  20. },
  21. {
  22. name: ‘导出EXCEL‘,
  23. bclass: ‘excel‘,
  24. onpress: opt
  25. }
  26. ]

其中：
    
    name：设置按钮文字
    separator：设置是否显示分隔线
    bclass：设置按钮样式，示例：

Html代码  

  1. < style >
  2. .flexigrid div.fbutton.add
  3. {
  4. background: url(.. / lib / jquery / flexigrid / css / images / row_add.gif) no - repeat center left;
  5. }
  6. .flexigrid div.fbutton.edit
  7. {
  8. background: url(.. / lib / jquery / flexigrid / css / images / row_edit.gif) no - repeat center left;
  9. }
  10. .flexigrid div.fbutton.delete
  11. {
  12. background: url(.. / lib / jquery / flexigrid / css / images / row_delete.gif) no - repeat center left;
  13. }
  14. .flexigrid div.fbutton.reset
  15. {
  16. background: url(.. / images / user_reset.gif) no - repeat center left;
  17. }
  18. .flexigrid div.fbutton.excel
  19. {
  20. background: url(.. / images / excel.gif) no - repeat center left;
  21. }
  22. < /style>

onpress：点击按钮时触发的事件，接受button的name为第一个参数，grid为第二个参数的一个function。

示例代码：

Js代码  

  1. /**
  2. * 点击工具条按钮操作
  3. */
  4. function opt(com, grid) {
  5. switch (com) {
  6. case ‘添加‘:
  7. ...
  8. break;
  9. case ‘修改‘:
  10. ...
  11. break;
  12. case ‘删除‘:
  13. ...
  14. break;
  15. case ‘导出EXCEL‘:
  16. ...
  17. break;
  18. }
  19. }

３、后台PHP代码(json)：

摘自FlexiGrid最新版的示例代码：

Php代码  

  1. function runSQL($rsql) {
  2. $connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
  3. $db = mysql_select_db($dbname);
  4. $result = mysql_query($rsql) or die (‘test‘);
  5. return $result;
  6. mysql_close($connect);
  7. }
  8. function countRec($fname,$tname) {
  9. $sql = "SELECT count($fname) FROM $tname ";
  10. $result = runSQL($sql);
  11. while ($row = mysql_fetch_array($result)) {
  12. return $row[0];
  13. }
  14. }
  15. $page = $_POST[‘page‘];
  16. $rp = $_POST[‘rp‘];
  17. $sortname = $_POST[‘sortname‘];
  18. $sortorder = $_POST[‘sortorder‘];
  19. if (!$sortname) $sortname = ‘name‘;
  20. if (!$sortorder) $sortorder = ‘desc‘;
  21. $sort = "ORDER BY $sortname $sortorder";
  22. if (!$page) $page = 1;
  23. if (!$rp) $rp = 10;
  24. $start = (($page-1) * $rp);
  25. $limit = "LIMIT $start, $rp";
  26. $sql = "SELECT iso,name,printable_name,iso3,numcode FROM country $sort $limit";
  27. $result = runSQL($sql);
  28. $total = countRec(‘iso‘,‘country‘);
  29. // 生成json格式数据
  30. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
  31. header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
  32. header("Cache-Control: no-cache, must-revalidate" );
  33. header("Pragma: no-cache" );
  34. header("Content-type: text/x-json");
  35. $json = "";
  36. $json .= "{\n";
  37. $json .= "page: $page,\n";
  38. $json .= "total: $total,\n";
  39. $json .= "rows: [";
  40. $rc = false;
  41. while ($row = mysql_fetch_array($result)) {
  42. if ($rc) $json .= ",";
  43. $json .= "\n{";
  44. $json .= "id:‘".$row[‘iso‘]."‘,";
  45. $json .= "cell:[‘".$row[‘iso‘]."‘";
  46. $json .= ",‘".addslashes($row[‘name‘])."‘";
  47. $json .= ",‘".addslashes($row[‘printable_name‘])."‘";
  48. $json .= ",‘".addslashes($row[‘iso3‘])."‘";
  49. $json .= ",‘".addslashes($row[‘numcode‘])."‘]";
  50. $json .= "}";
  51. $rc = true;
  52. }
  53. $json .= "]\n";
  54. $json .= "}";
  55. echo $json;

本人的后台后代码：

Php代码  

  1. /**
  2. * 返回JSON分页数据到前台
  3. *
  4. */
  5. function actionGetPagerData()
  6. {
  7. $user = $this->user;
  8. $page = ($_POST[‘page‘]) ? $_POST[‘page‘] : 1;
  9. $limit = ($_POST[‘rp‘])?$_POST[‘rp‘] : 15;
  10. $sortname = ($_POST[‘sortname‘]) ? $_POST[‘sortname‘] : ‘username‘;
  11. $sortorder = ($_POST[‘sortorder‘]) ? $_POST[‘sortorder‘] : ‘DESC‘;
  12. $sort = "$sortname $sortorder";
  13. $offset = ($page - 1) * $limit;
  14. $query = ($_POST[‘query‘]) ? trim($_POST[‘query‘]) : ‘‘;
  15. $qtype = ($_POST[‘qtype‘]) ? trim($_POST[‘qtype‘]) : ‘‘;
  16. if ($qtype == ‘name‘ || $qtype == ‘sxmc‘) {
  17. $query = mb_convert_encoding($query, ‘GB2312‘, ‘utf-8‘);
  18. }
  19. if ($user[‘RBAC_ROLES‘][0] == ‘SYSTEM_ADMIN‘) {
  20. $conditions = array(
  21. array(‘auth‘, 1, ‘=‘, ‘OR‘),
  22. array(‘auth‘, 2, ‘=‘),
  23. );
  24. } elseif ($user[‘RBAC_ROLES‘][0] == ‘POWER_USER‘) {
  25. $conditions = array(
  26. array(‘sx_id‘, $user[‘SXID‘], ‘=‘, ‘AND‘),
  27. array(‘auth‘, 3, ‘=‘, ‘OR‘),
  28. array(‘sx_id‘, $user[‘SXID‘], ‘=‘, ‘AND‘),
  29. array(‘auth‘, 4, ‘=‘),
  30. );
  31. }
  32. if ($query  && $user[‘RBAC_ROLES‘][0] == ‘POWER_USER‘) {
  33. $conditions = array(
  34. array(‘sx_id‘, $user[‘SXID‘], ‘=‘, ‘AND‘),
  35. array($qtype, $query, ‘=‘)
  36. );
  37. }
  38. if ($qtype == ‘name‘ && $query != ‘‘  && $user[‘RBAC_ROLES‘][0] == ‘POWER_USER‘) {
  39. $conditions = array(
  40. array(‘sx_id‘, $user[‘SXID‘], ‘=‘, ‘AND‘),
  41. array($qtype, ‘%‘ . $query . ‘%‘, ‘LIKE‘)
  42. );
  43. }
  44. if ($qtype == ‘sxmc‘ && $query != ‘‘ && $user[‘RBAC_ROLES‘][0] == ‘SYSTEM_ADMIN‘) {
  45. $cxtj = array(
  46. array(‘sxmc‘, ‘%‘ . $query . ‘%‘, ‘LIKE‘)
  47. );
  48. $sxjg = & FLEA::getSingleton(‘Table_Sxjg‘);
  49. $row = $sxjg->find($cxtj);
  50. $conditions = array(
  51. array(‘sx_id‘, $row[‘SXID‘], ‘=‘, ‘AND‘),
  52. array(‘auth‘, 1, ‘=‘, ‘OR‘),
  53. array(‘sx_id‘, $row[‘SXID‘], ‘=‘, ‘AND‘),
  54. array(‘auth‘, 2, ‘=‘),
  55. );
  56. }
  57. if ($qtype == ‘jgmc‘ && $query != ‘‘ && $user[‘RBAC_ROLES‘][0] == ‘POWER_USER‘) {
  58. $cxtj = array(
  59. array(‘sx_id‘, $this->user[‘SXID‘], ‘=‘, ‘AND‘),
  60. array(‘jgmc‘, ‘%‘ . $query . ‘%‘, ‘LIKE‘)
  61. );
  62. $tblYyjg = & FLEA::getSingleton(‘Table_Yyjg‘);
  63. $row = $tblYyjg->find($cxtj);
  64. $conditions = array(
  65. array(‘sx_id‘, $this->user[‘SXID‘], ‘=‘, ‘AND‘),
  66. array(‘jg_id‘, $row[‘jg_id‘], ‘=‘)
  67. );
  68. }
  69. //$conditions = null;
  70. $this->_tblUsers->enableLinks();
  71. $rows = $this->_tblUsers->findAll($conditions, $sort, array($limit, $offset));
  72. $rs = $this->_tblUsers->findAll($conditions);
  73. $total = count($rs);
  74. $json = "";
  75. $json .= "{\n";
  76. $json .= "page: $page,\n";
  77. $json .= "total: $total,\n";
  78. $json .= "rows: [";
  79. $rc = false;
  80. $i = 1;
  81. foreach ($rows as $row) {
  82. if ($rc) $json .= ",";
  83. $json .= "\n{";
  84. $json .= "user_id:‘".$row[‘user_id‘]."‘,";
  85. $json .= "cell:[‘".$i."‘";
  86. $json .= ",‘".$row[‘user_id‘]."‘";
  87. $json .= ",‘".$row[‘username‘]."‘";
  88. $json .= ",‘".$row[‘name‘]."‘";
  89. $json .= ",‘".$row[‘roles‘][0][‘rolename_cn‘]."‘";
  90. $json .= ",‘".$row[‘sxjg‘][‘sxmc‘]."‘";
  91. $json .= ",‘".addslashes($row[‘yyjg‘][‘jgmc‘])."‘";
  92. $json .= ",‘".$row[‘created‘]."‘";
  93. //$json .= ",‘".$row[‘updated‘]."‘]";
  94. $json .= ",‘".$row[‘pwdupdated‘]."‘]";
  95. $json .= "}";
  96. $rc = true;
  97. $i++;
  98. }
  99. $json .= "]\n";
  100. $json .= "}";
  101. echo $json;
  102. exit;
  103. }

四、功能优化扩展版说明

功能优化扩展版的改变：

１、修改了仿ext的皮肤，界面更加漂亮；
２、优化了渲染表格代码，速度提高了60%；
３、增加了显示checkbox列功能；
４、为方便处理行数据，增加了行数据绑定功能。

options新增参数：

Js代码  

  1. qop: "Eq", //搜索的操作符
  2. showcheckbox: false, //是否在列首添加checkbox
  3. rowhandler: false, //在生成行时绑定事件，如双击，右键等
  4. rowbinddata: false,　// 是否在行上绑定数据
  5. extParam: {}, // 扩展外部参数动态注册到grid，实现如自定义查询等操作
  6. onrowchecked: false, // checkbox选中状态发生变化时触发的事件
  7. gridClass: "bbit-grid" //绑定样式

buttons新增参数:

btnText: 设置工具按钮附加文本，原来的为displayname，我这里改成了btnText。

示例：

Js代码  

  1. buttons:
  2. [
  3. {name: ‘Add‘, btnText: "新增", bclass: ‘add‘, onpress: function(Add, grid){alert(‘这是新增操作。‘);return false;}},
  4. {name: ‘Edit‘, btnText: "修改", bclass: ‘edit‘, onpress: ‘‘},
  5. {name: ‘Delete‘, btnText: "删除", bclass: ‘delete‘, onpress: ‘‘},
  6. {separator: true},
  7. {name: ‘Export‘, btnText: "导出Excel", bclass: ‘excel‘, onpress: ‘‘}
  8. ]

新增方法1：

Js代码  

  1. var ids = $("#grid").getCheckedRows(); 可以获取到选中行的主键值，里面保存的是记录的ID数组。

*注意：

该方法需要十分注意JSON分页格式数据，举例说明：

Js代码  

  1. ...
  2. $json .= "\n{";
  3. $json .= "user_id:‘".$row[‘user_id‘]."‘,";
  4. $json .= "cell:[‘".$i."‘";
  5. $json .= ",‘".$row[‘user_id‘]."‘";
  6. ...

其中的：

Js代码  

  1. $json .= "user_id:‘".$row[‘user_id‘]."‘,";

里面的主键名必须统一使用id，即为：

Js代码  

  1. $json .= "id:‘".$row[‘user_id‘]."‘,";

getCheckedRows()才能正确获取数据。

新增方法2：

Java代码  

  1. var rows = $("#grid).getSelectedRows(); // 获取表格行数据

*注意，该方法需要将 rowbinddata 参数设为 true，而且返回的数据为二维数组。

同时，为了保证该方法在IE、FF下都能使用正常，需要修改FlexiGrid.js代码。

打开FlexiGrid.js文件，找到代码行：

Js代码  

  1. items.push($(this).attr("ch").split(‘_FG$SP_‘));

将其修改为：

Js代码  

  1. items.push($(this).attr("CH").split(‘_FG$SP_‘));

功能实现示例：

１、查询的布局可自行设置，完了调用方法刷新grid即可，类似如下所示:

Js代码  

  1. var p = { extParam: [
  2. { name: "stuName", value: $("#selectinput").val() },
  3. { name: "stuId", value: $("#selectStuId").val() },
  4. { name: "stuNo", value: $("#selectNo").val() },
  5. { name: "stuGrade", value: $("#selectGrade").val() },
  6. { name: "SID", value: $("#sugvalue").val() },
  7. { name: "Sname", value: $("#sugname").val() },
  8. { name: "Sgust", value: $("#suggust").val() }
  9. ]
  10. };
  11. $("#grid").flexOptions(p).flexReload();

２、grid中有一些记录是已经选中的，我怎样让它们从数据库中查出来时前面的checkbox设置成选中？

首先把是否选中的值作为列表中的列和其他数据一起查询回来一次，
然后再在Flexigrid中的 rowhandler参数定义一个函数，如下所示:

Js代码  

  1. rowhandler: InitGridCheck,

函数实现:

Js代码  

  1. function InitGridCheck(tr) {
  2. var ch = $.browser.msie ? tr.ch : target.getAttribute("ch");
  3. var cell = ch.split("_FG$SP_");
  4. if(cell[7] != 1){return;}
  5. var chkb = $(tr).find(":checkbox");
  6. if (chkb.length>0) {
  7. chkb[0].checked = true;
  8. chkb[0].defaultChecked = true;
  9. $(tr).addClass(‘trSelected‘);
  10. }
  11. }

除错：

由于xuanye的修改版代码在取消显示checkbox列（showcheckbox: false）时，存在无法单击表格行时无法选定记录行的bug，因为如果不能选定记录行，则无法进行编辑、删除等操作。

打开jquery.flexigrid.js文件，找到735行，加入单击表格行事件代码：

Js代码  

  1. $(‘tbody tr‘, g.bDiv).each(
  2. function() {
  3. // 增加单击行时的处理代码(modified by hegz 2009/03/29)
  4. $(this)
  5. .click(
  6. function(e)
  7. {
  8. var obj = (e.target || e.srcElement);
  9. if (obj.href || obj.type) return true;
  10. if ($(this).hasClass(‘trSelected‘)) {
  11. $(this).removeClass(‘trSelected‘);
  12. if (p.showcheckbox)
  13. $("input.itemchk", this)[0].checked = false;
  14. } else {
  15. $(this).addClass(‘trSelected‘);
  16. if (p.showcheckbox)
  17. $("input.itemchk", this)[0].checked = true;
  18. }
  19. if (p.onrowchecked) p.onrowchecked.call(this);
  20. if (p.singleSelect) $(this).siblings().removeClass(‘trSelected‘);
  21. }
  22. );
  23. // modified end
  24. ...

其实，原版代码是有这样的代码的，但xuanye修改后取消了。

原版FlexiGrid代码：

Js代码  

  1. addRowProp: function() {
  2. $(‘tbody tr‘, g.bDiv).each(function() {
  3. $(this).click(function(e) {
  4. var obj = (e.target || e.srcElement);
  5. if (obj.href || obj.type) return true;
  6. $(this).toggleClass(‘trSelected‘);
  7. if (p.singleSelect) $(this).siblings().removeClass(‘trSelected‘)
  8. }).mousedown(function(e) {
  9. if (e.shiftKey) {
  10. $(this).toggleClass(‘trSelected‘);
  11. g.multisel = true;
  12. this.focus();
  13. $(g.gDiv).noSelect()
  14. }
  15. }).mouseup(function() {
  16. if (g.multisel) {
  17. g.multisel = false;
  18. $(g.gDiv).noSelect(false)
  19. }
  20. }).hover(function(e) {
  21. if (g.multisel) {
  22. $(this).toggleClass(‘trSelected‘)
  23. }
  24. },
  25. function() {});
  26. if ($.browser.msie && $.browser.version < 7.0) {
  27. $(this).hover(function() {
  28. $(this).addClass(‘trOver‘)
  29. },
  30. function() {
  31. $(this).removeClass(‘trOver‘)
  32. })
  33. }
  34. })
  35. },

（今天，通过与xuanye兄交流，这个不是bug，只是通过右键菜单来支持，现在的最新代码已支持该功能，我有可能白忙活了，哈哈。）

五、jQuery 1.4.2支持测试

jQuery 1.4.2推出后，由于效率比jQuery 1.3.2高很多，因此我们的项目开发需要逐渐过渡到jQuery 1.4.2，以改善项目的整体运行效率。怀着这样的目的，这两天来我抽时间对FlexiGrid在jQuery 1.4.2下的运行做了简单的测试。发现旧版本在jQuery 1.4.2也能正常运行，但由于jQuery 1.4.2对JSON数据格式有严格的限制，名值对必须加双引号括起来，否则将发生JSON数据解析错误。如下图所示：

 当然了，如果想弹出上面的警告框，需要稍微修改下Flexigrid的js代码。

打开Flexigrid的源代码，找到populate()方法，将其中的Ajax error回调函数修改为：

Js代码  

  1. error:function (data, textStatus, errorThrown) {
  2. alert(textStatus);
  3. }

即可。不过，测试完后要记得将源代码恢复原状就行。

六、结束语

Paulo P. Marinas 的目标是致力打造功能完善、简单易用的轻量级grid。他确保将来增加新的功能后，代码经过压缩，大小不超过20K，这确实令人赞赏。但其一直以来计划增加的Editable功能始终无法实现，就令我等有点失望了，或者xuanye等大虾在不久的将来会去扩充实现这一功能也未可知。

七、参考资料

１、官方网站（http://www.flexigrid.info/ ）。
２、基于jQuery的GridView-Flexigrid(2)-扩展和修复（http://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_jQuery_FlexiGrid_Demo.html ）
３、基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明（http://www.cnblogs.com/xuanye/archive/2009/11/04/Xuanye_jQuery_FlexiGrid.html ）

jQuery.FlexiGrid使用总结,布布扣,bubuko.com

时间： 2024-10-10 22:11:53

jQuery.FlexiGrid使用总结的相关文章

【jquery】flexiGrid新增功能的方式

到目前为止,我用过的jquery表格插件只有jqGrid和flexiGrid.今天,只说后者. 关于参数配置,使用方法,博客园文章很多. 原生的flexiGrid架包不大,内容可以扩展,比如在每行数据列前增加一个checkBox用于选择,再比如原生flexiGrid中支持json和xml格式传递数据.而flexiGrid中json格式的数据则必须写为{id:"",rows:[{"id1","name1","age1"},{&q

【Jquery】【控件】flexigrid 自定义查询

最近用flexigrid作报表,需要自定义条件进行查询,界面如下: 翻了半天文档也没找到如何用POST方法自行传递参数进行查询. 找了一个台湾人写的博客,却要改flexigrid的源代码,更不靠谱. 后来在StackOverflow上发现解决方法. 代码如下: var postData = { "AreaCode": areaCode, "HasChild": hasChild, "CarId": carId, //.... }; var par

基于jQuery 常用WEB控件收集

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook

Flexigrid从对象中加载数据

Flexigrid是用来动态加载数据的一种比较好(老)的Jquery表插件,然后有些时候,我们需要其从本地或者jQuery对象中加载数据,比如有这么个需求,页面显示中有两个表格A和B,其中A表格从服务器端加载数据,B表格需要根据用户的操作来动态更新,例如当用户勾选住A表格的某些项时,B表格就把这些项显示在其中.对于这么个请求,可以如下解决: 1)建立一个Jquery对象C,用于保存B表格的信息: 2)当用户选择A表格中的某些项时,C更新它所保存的内容: 3)当C的内容发生变化时,B表格更新其显示

一些基于jQuery开发的控件

基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html (无法找到)下载:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html 示例:http://letmehaveblog.blogspot.com/2007

Flexigrid-Web2.0 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 二.说明 本文是在参考了以上内容后写出的,引用了相关

Flexigrid的使用(整合Struts2)

Flexigrid是一个jQuery表格插件 下载地址:http://download.csdn.net/detail/itmyhome/7613879 使用方法: 一.相关资源文件的引入 <link rel="stylesheet" type="text/css" href="css/flexigrid.css"> <script type="text/javascript" src="js/jq

flexigrid随手记

最近要用到flexigrid做表格,随手记一些知识点. 引入了两个jquery库(jquery.js和jquery-1.7.1.min.js),发生冲突,只保留一个 $("#gridTable").flexigrid({ url:'./jsp/manager/gridData.jsp', dataType: 'json', …… } 用另一个jsp文件引入数据,虽然不太明白jsonStr的格式为什么是这样的.. for (int i = startRow;i<endRow;i++

FlexiGrid 使用 全选、自动绑定

1.介绍 Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid.它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等.Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换. 2.相关参数 height: 200, //flexigrid插件的高度,单位为px width: 'auto', //宽度值,auto表示根据每列的宽度自动计算,在IE6下建议设置具体值否则会有问题 striped: true, //是否显示斑纹效果,默认