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

 


３、后台PHP代码(json)：

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

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

 

本人的后台后代码：

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


四、功能优化扩展版说明 

功能优化扩展版的改变：

１、修改了仿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.   
  15.         } else {  
  16.             $(this).addClass('trSelected');  
  17.             if (p.showcheckbox)  
  18.             $("input.itemchk", this)[0].checked = true;  
  19.   
  20.         }  
  21.         if (p.onrowchecked) p.onrowchecked.call(this);  
  22.         if (p.singleSelect) $(this).siblings().removeClass('trSelected');  
  23.   
  24.     }  
  25.     );  
  26.     // modified end  
  27.     ...  

 

其实，原版代码是有这样的代码的，但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数据解析错误。如下图所示：
jQuery.FlexiGrid使用总结
 当然了，如果想弹出上面的警告框，需要稍微修改下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 ）

你可能感兴趣的:(flexigrid)

  • 如何编写可维护的JavaScript代码 weixin_34320159
    摘自：http://my.oschina.net/feichexia/blog/122217JavaScript这门编程语言发展至今已经非常流行了，各种名词也层出不穷，我们随便列举下就有一大堆，比如Node.js、jQuery、JavaScriptMVC、Backbone.js、AMD、CommonJS、RequireJS、CoffeScript、Flexigrid、Highchart、Scrip
  • flexigrid参数说明 xiaoweidongdong flexigrid
    flexigrid参数说明:height:200,//flexigrid插件的高度，单位为pxwidth:'auto',//宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题striped:true,//是否显示斑纹效果，默认是奇偶交互的形式novstripe:false,//没用过这个属性minwidth:30,//列的最小宽度minheight:80,//列的最小
  • FlexiGrid使用教程 weixin_30615767
    一．表的结构1表结构varFriendLink={tableName:'FriendLink',--表名title:'友情链接',--显示在Grid最上面的中文dialogtitle:'',--弹出对话框的标题columns:[{--表数据结构display:'友链类型',--字段中文名称name:'TypeID',--数据库中的字段名称width:100,--在Grid上的宽度sortable:
  • Flexigrid仅选一行设置、获取行ID、取Cell文本 wallimn JAVAWEB开发
    1、Flexigrid默认是可以选择多行，那么如何设置其只能选一行呢？今天看了看Flexigrid的源码，发现有个属性可以控制：$(this).click(function(e){varobj=(e.target||e.srcElement);if(obj.href||obj.type)returntrue;$(this).toggleClass('trSelected');if(p.single
  • flexigrid教程（一）-jquery最好的grid插件 hjwang1 web前端
    转自：http://hi.baidu.com/fengkuang031/blog/item/f030284ded6a123cafc3ab98.html有用过ext的Grid或flex的DataGrid的朋友，应该对gird组件有比较好的理解。grid是强大的表格数据表现形式，是对表格的全面强化。flexigrid从名字来看更接近flex，但实际上应该模仿的是ext的Grid组件。虽然是模仿，但有很
  • 基于jQuery的FlexiGrid的插件使用和改造 gundumw100 jQuerySQLjson正则表达式Ajax
    已不推荐下载，如要下载去这个连接下载最新的http://gundumw100.iteye.com/admin/blogs/545610http://www.cnblogs.com/xuanye/archive/2009/11/04/Xuanye_jQuery_FlexiGrid.htmlhttp://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_
  • 玩转jquery插件之flexigrid（二）来点改造如何？【补充】 小博 jquery
    然后在flexigrid初始化参数中设置：onSuccess:function(){set_exeBtn(”gridtable”);}，这表示flexigrid加载完成后执行set_exeBtn函数，该函数向flexigrid的右下角加入了一个名为“执行”的按钮，并且为该按钮定义了事件updateState，该事件的定义如下：functionupdateState(id){//最后$("#"+id
  • Flexigrid系列使用教程（二）JSON数据生成代码 Mchange 前端
    Flexigrid系列使用教程（二）JSON数据生成代码摘要：上一篇简单的介绍了一下前台页面代码部分，本文主要说一下如何为flexigrid提供前台数据，主要提供了将后台数据库里面的数据转换成Json格式后交由前台显示。前台页面中调用后台的代码是这样的：/BDeviceApply/GetSysSdandeviceFlex，这是在.NETMVC框架的调用方式，本人接触.net开发时间不长，所以对这点
  • Flexigrid系列使用教程（一）前台代码及参数说明 windxxf C#.netjquery插件stringxmlhttprequestfunctionjqueryajax
    摘自：http://www.kwstu.com/Article/ShowArticle.asp?ArticleID=259本教程从零开始介绍Flexigrid的使用方法，记录了作者学习中的点点滴滴，实例主要是在.netmvc框架下实现的，废话不多说了，先看一下Flexigrid的效果图吧。一、首先简单介绍一下flexigrid：1、主要特性：Flexigrid是Jquery家族中table类或gr
  • jQuery插件flexigrid改造…… guofengcn
    做毕设用到flexigrid这个插件，但是遇到种种问题！呃，说不太明白，还是用代码说话吧！后台代码：privateList《RlEmployee》rows;这个就是要在前台显示的rows。但是问题是我的RlEmployee是这样的：privateIntegerempId;privateRlDepartmentrlDepartment;privateRlPositionrlPosition;priv
  • flexigrid 添加行选择事件 在意一下
    分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow假定我有一个htmltable元素，与之对应的有一个flexigrid，同时该flexigird支持单选，禁用多选。现在要添加一个事件函数，使得当点击任一行的时候会被调用。加入我的table元素的id是subUsers，
  • 【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理... weixin_30823227
    【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析JqueryFlexiGrid的实现原理"工欲善其事,必先利其器"当今Web开发，如何有效的提升用户操作体验已经越来越重要，以现在的技术而言，Javascript操作dom和style是最有效的手段；Web开发不像Windows开发一样，往往要涉及到很多不同的技术和方向；同时，由于机制的原因和技术的分散，快速有效方便的调试J
  • jquery grid插件 Flexigrid + servlet cxhzqhzq flexjquerystylesheetjsonservletdeleteweb框架
    2008-09-02关键字:ajaxjquery分页flexigrid前些日子写了个源于jquerygrid插件Flexigrid算不上例子的一片文章。为了能更快的使用这个东东。。今天做了一个相对比较详细的例子.对一个工作信息表操控的例子。第一步：创建数据库Sql代码/*MySQLDataTransferSourceHost:localhostSourceDatabase:spiderdataTa
  • flexgrid jzy23682891 Ajaxjavascript
    第一个Grid示例$(document).ready(function(){$('.flexme1').flexigrid({height:'auto',//高度striped:true,//分割线width:900,//宽度title:'客户管理',//标题buttons:[{name:'新增客户',bclass:'add'},{name:'删除客户',bclass:'delete'},{sep
  • jqGrid表格插件学习（一） 第一个Demo 新发现FLY javascript
    jqGrid学习最近的工作任务频繁涉及到很多的jqGrid这个插件，鉴于刚接触这个东西时不太了解，以至于在这个上面耽误了一些时间，现在将jqGrid学习总结一下：应用中经常会遇到向用户展示信息的情况。我们可以自己通过标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和j
  • jQuery学习之：jqGrid表格插件——第一个Demo polaris1119 jQuery
    应用中经常会遇到向用户展示信息的情况。我们可以自己通过标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和jqGrid。不过flexGrid网上的资料很少，官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址：http://www.trirand.com/j
  • 使用FlexiGrid实现Extjs表格效果方法分享
    近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的Extjs的Jquery插件，所以就在Jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的Jquery好，小巧简单好像一部好的汽
  • flexigrid实际使用总结 跨时代135 JQuery
    1、隐藏某一列。Flexigrid——colModel:属性名类型描述displaystring显示的列名namestring绑定的列名sortablebool是否可以排序alignstring对其方式widthint列的宽度hidebool是否隐藏该列pkbool是否为主键标识、如果是则隐藏该列，值存入隐藏域中processfunctioncustomValuefunction自定义显示值。(如
  • flexigrid 参数说明 11Yision
    项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。flexigrid参数说明:height:200,//flexigrid插件的高度，单位为pxwidth:'auto',//宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题striped:true,//是否显示斑纹效果，默认是奇偶交
  • jQuery插件简单学习实例教程 sust2012
    本文实例讲述了jQuery插件及其用法。分享给大家供大家参考，具体如下：（1）异步分页插件flexgrid1）前台jsInserttitlehere$(document).ready(function(){$("#flexigridTable").flexigrid({url:'flexigridAction.html',//请求数据的路径method:'POST',//请求方式dataType:
  • 使用jQuery插件flexigrid搭建项目框架 u010235716 js
     今天来了，不能懒，该写就写；1.既然是要用jQuery的JS。那就要放入项目中2.使用方式jsp+js:3.调用后台$(function(){ $("#flexgrid").flexigrid({ url:webroot+'sand/messageCodeImportAction!getPagedCityList.action', dataType:'json', colModel:[{ dis
  • 【jquery】flexiGrid新增功能的方式 沈金强
    到目前为止，我用过的jquery表格插件只有jqGrid和flexiGrid。今天，只说后者。关于参数配置，使用方法，博客园文章很多。原生的flexiGrid架包不大，内容可以扩展，比如在每行数据列前增加一个checkBox用于选择，再比如原生flexiGrid中支持json和xml格式传递数据。而flexiGrid中json格式的数据则必须写为{id:"",rows：[{"id1","name1
  • flexigrid 参数说明 卫道士
    本文为转载http://simple1024.iteye.com/blog/1171090  项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。 flexigrid参数说明:   height:200,//flexigrid插件的高度，单位为px   width:'auto',//宽度值，auto表示根据每列的宽
  • jQuery 表格工具集 jquery
    本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教 程。 jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Aja
  • JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二）服务端查询、快速查询和Html模板 flexigrid
    开始之前，看下最新的v1.2版本有些什么 修复快速查询时的键盘回车事件与控件外围事件的冲突的问题。 修复快速查询时设置正则表达式时可能导致的语法错误的问题。 数据提供方法 DataHandler 将不再强制要求与列的绑定顺序一致，现在通过返回的 DataTable 中的 ColumnName 自动绑定到合适的列，所以，请保证您的 DataTa
  • dotNetFlexGrid-asp.net的异步表格控件 asp.net
    dotNetFlexGrid-asp.net的异步表格控件 使用指南 1.简介 JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid是一款asp.net原生的异步表格控件，它的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为asp.net 控件，提供了简单易
  • Flexigrid去掉列选择 flexigrid
    Flexigrid中会出现列选择的小黑箭头，有时挺讨厌，想去掉。发现没有控制的地方，于是自己加。 在flexigrid.js中增加 在定义中增加   p = $.extend({ //apply default properties height: 200, //default height width: 'auto', //auto width st
  • Flexigrid折行显示问题 flexigrid
    上会写的Flexigrid折行显示时，获取值有问题，报错。   getRows: function(){ //add by jej var rtnList = new Array(); var objRows = $('.trSelected', $(t)); if(objRows!=null){ for(var i=0;i<
  • Flexigrid的编辑功能 flexigrid
    editCells:function(){ if(!isEditing){ isEditing = true; $('tbody tr',$(t)).each(function () { for(var i=0;i<this.cells.length;i++){ var td = this.cells[i];
  • asp.net mvc flexigrid应用实例 flexigrid
    本节主要讲解下jquery下的felxigrid在asp.net mvc下的应用  经过测试 在IE下有点小问题，但是在ff下没问题，报在IE下不支持$.outerwidth此属性，百度了很久不知道有什么替代属性，暂且先放一下这个问题，希望高手求解。 先看下效果图吧： IE下报错的语句图，火狐没问题，希望高手求解： 项目结构图： 下面我简单的讲解下实现思路： 1、创
  • ztree设置禁用节点 3213213333332132 JavaScriptztreejsonsetDisabledNodeAjax
    ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); });
  • JVM patch by Taobao bookjovi javaHotSpot
    在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。   7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and
  • 将session存储到数据库中 dcj3sjt126com sqlPHPsession
    CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) );   <?php /** * Created by PhpStorm. * User: michaeldu * Date
  • Vector 171815164 vector
    public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i);
  • 各连接池配置参数比较 g21121 连接池
            排版真心费劲，大家凑合看下吧，见谅~     Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User   数据库密码 Password Password Password   驱动名
  • [简单]mybatis insert语句添加动态字段 53873039oycg mybatis
          mysql数据库,id自增,配置如下：       <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&
  • struts2拦截器配置 云端月影 struts2拦截器
    struts2拦截器interceptor的三种配置方法 方法1. 普通配置法 <struts>     <package name="struts2" extends="struts-default">         &
  • IE中页面不居中，火狐谷歌等正常 aijuans IE中页面不居中
    问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
  • String,int,Integer,char 几个类型常见转换 antonyup_2006 htmlsql.net
    如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.
  • PL/SQL的游标类型 百合不是茶 显示游标(静态游标)隐式游标游标的更新和删除%rowtyperef游标(动态游标)
    游标是oracle中的一个结果集,用于存放查询的结果;   PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标     注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标   隐式游标:主要是对DML数据的操作隐
  • JUnit4中@AfterClass @BeforeClass @after @before的区别对比 bijian1013 JUnit4单元测试
    一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法   对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源  对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次
  • 精通Oracle10编程SQL(12)开发包 bijian1013 oracle数据库plsql
    /* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规
  • 【EhCache二】ehcache.xml配置详解 bit1129 ehcache.xml
    在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe   ehcac
  • java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL 白糖_ javaeclipsespringtomcatWeb
    今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener>  随后启动
  • angular.element boyitech AngularJSAngularJS APIangular.element
    angular.element 描述:     包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）     如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e
  • java-给定两个已排序序列，找出共同的元素。 bylijinnan java
    import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素
  • sftp 异常，有遇到的吗？求解 Chen.H javajcraftauthjschjschexception
    com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec
  • [生物智能与人工智能]神经元中的电化学结构代表什么? comsci 人工智能
         我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色....      我们可以尝试一下...在某些神经
  • 通过LAC和CID获取经纬度信息 dai_lm laccid
    方法1： 用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度 方法2： 发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&
  • JAVA的困难分析 datamachine java
    前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。   -----------------------------------------------------------------------------------------
  • 小学5年级英语单词背诵第二课 dcj3sjt126com englishword
    money 钱 paper 纸 speak 讲，说 tell 告诉   remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码   learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射   must 必须 light 灯，光线，轻的 front
  • linux下面没有tree命令 dcj3sjt126com linux
    centos p安装 yum -y install tree   mac os安装 brew install tree   首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。 语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式
  • Map迭代方式，Map迭代，Map循环 蕃薯耀 Map循环Map迭代Map迭代方式
    Map迭代方式，Map迭代，Map循环   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年
  • Spring Cache注解+Redis hanqunfeng spring
    Spring3.1 Cache注解  依赖jar包： <!-- redis --> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId>
  • Guava中针对集合的 filter和过滤功能 jackyrong filter
    在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子：    @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"
  • 学习编程那点事 lampcy 编程androidPHPhtml5
    一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
  • 架构师之流处理---------bytebuffer的mark,limit和flip nannan408 ByteBuffer
    1.前言。   如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思 。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy
  • org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1 Everyday都不同 $转义el表达式
    最近在做Highcharts的过程中，在写js时，出现了以下异常：   严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1,
  • 用Java实现发送邮件到163 tntxia java实现
    /* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。 本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。 此篇仅介绍用
  • 探索实体类存在的真正意义 java小叶檀 POJO
    一. 实体类简述    实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象   它的一般格式就是 public class A{ private String id; public Str
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他