领购物优惠券9块9包邮
首页 > 前端技术 > Jquery

jQuery.FlexiGrid使用总结

   2023-03-08 学习力0
核心提示：经过对FlexiGrid的大量使用，及时不时琢磨下其代码，对她的脾性有了一定的了解，是该做总结的时候了。 一、FlexiGrid下载 1、原版代码最近Paulo P. Marinas对FlexiGrid做了修改，以适应jQuery 1.4.2。看了下作者列出来的特性表，该表很长，但与过去比，却没

经过对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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  1. <table id="grid" style="display:none"></table>   

 

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

Html代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  1. var ids = $("#grid").getCheckedRows(); 可以获取到选中行的主键值，里面保存的是记录的ID数组。  

 

*注意：

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

Js代码  jQuery.FlexiGrid使用总结
  1. ...  
  2. $json .= "\n{";    
  3. $json .= "user_id:'".$row['user_id']."',";    
  4. $json .= "cell:['".$i."'";    
  5. $json .= ",'".$row['user_id']."'";  
  6. ...  

 

其中的：

Js代码  jQuery.FlexiGrid使用总结
  1. $json .= "user_id:'".$row['user_id']."',";    

 

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

Js代码  jQuery.FlexiGrid使用总结
  1. $json .= "id:'".$row['user_id']."',";    

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

 

新增方法2：

Java代码  jQuery.FlexiGrid使用总结
  1. var rows = $("#grid).getSelectedRows(); // 获取表格行数据  

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

 

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

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

 

Js代码  jQuery.FlexiGrid使用总结
  1. items.push($(this).attr("ch").split('_FG$SP_'));  

 

将其修改为：

Js代码  jQuery.FlexiGrid使用总结
  1. items.push($(this).attr("CH").split('_FG$SP_'));  

 


功能实现示例： 

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

Js代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  1. rowhandler: InitGridCheck,  

 

函数实现:

Js代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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代码  jQuery.FlexiGrid使用总结
  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 ）

 
反对 0举报 0 评论 0
 

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

  • 邮箱自动提示Jquery 插件-实战.失败品
    看到很多 SNS 类网站都有 邮箱注册功能. 参考了一下技术过程,触发事件为 focus keyup 和 后缀 mousedown 事件基本匹配过程就可以完成了. 所以写了下面的代码. 对  万一用户 选择错误.目前很多SNS 站都是要 手动删除后另行选择.我就写一个 focus 替换函数. 
    03-08
  • JQuery——事件绑定bind和on的区别
    引言　　通过JQuery对目标对象绑定事件我们大部分都是通过$('选择器').事件名()的形式实现，其实对事件的绑定还可以使用on和bind，为了搞明白两者之间的区别特做记录，以备以后查阅。正文　　bind和on都是给元素绑定事件用的,但两者在使用时有些差别，我们最
    03-08
  • jQuery select操作
    获取Select选择的Text和Value:$("#select_id").change(function(){//code...});//为Select添加事件，当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#select_id").val(); //获
    03-08
  • jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery仿各大商城网站圆形转盘抽奖活动，淘宝商城圆形转盘抽奖活动、天猫商城圆形转盘抽奖活动、京东商城圆形转盘抽奖活动等。 查看演示
    03-08
  • jquery仿京东商城商品分类导航菜单 jquery仿京东左侧菜单导航
    jquery仿京东商城商品分类导航菜单 jquery仿京
    jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局，通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果。 查看演示
    03-08
  • jQuery SuperSlide插件制作72个种常用的网页特效
    jQuery SuperSlide插件制作72个种常用的网页特
    SuperSlide2.1 超级滑动门72个扩展效果 我￥19买的，分享给大家希望大家学会感恩 “什么？20个基础效果+72个扩展效果，做到狗一 样，才19？！太不值了，大爷我给你99！” -- “多谢大爷！” 19元并不贵，就当是对广大互联网默默耕耘者的一点支持与鼓励
    03-08
  • jquery多功能弹出层插件支持Ajax、确认对话框、二次弹出层等
    jquery多功能弹出层插件支持Ajax、确认对话框、
    jquery jBox弹出层插件制作确认对话框弹出层_ajax弹出层_底部浮动弹出层等 查看演示
    03-08
  • jQuery瀑布流实例无限滚动加载图片 瀑布流式页面布局代码
    jQuery瀑布流实例无限滚动加载图片 瀑布流式页
    jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 查看演示!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
    03-08
  • 17种常用的jQuery全屏焦点图代码 jq 获取焦点
    jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻
    03-08
  • 6种非常酷炫的jquery banner焦点图片幻灯片切换
    6种非常酷炫的jquery banner焦点图片幻灯片切换
    jquery sequence slide滑动幻灯片插件6款时尚的图片滑动幻灯片切换 查看演示
    03-08
更多>html教程
Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题 HTML在网页中插入音频视频简单的滚动效果
更多>css教程
纯CSS3实现的一些酷炫效果 css实现炫酷背景 css3 渐变gradient
更多>html5教程
HTML5实现多张图片上传功能 HTML5手机端弹出遮罩菜单特效代码
更多>XML/XSLT
简介XML文档的阅读与编辑 深入解析XML中的DTD文档类型定义
更多>javascript
JavaScript清除空格、换行，把双引号转换成单引号 JavaScript中什么是闭包
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报