flexigrid

一、参考资料

1、jQuery插件flexiGrid的完全使用，附代码下载

2、修改flexigrid源码一(json,checkbox)[原创]

3、jQuery +UI + flexigrid做的一个用户管理界面

4、ASP.NET MVC Flexigrid sample

5、基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明

6、官方网站

7、总结!最佳jQuery窗口插件jqModal

二、说明

本文是在参考了以上内容后写出的，引用了相关代码。如有侵权，请与我联系。

自己整理了2套皮肤。

附件为eclipse工程文件，带数据库文件，导入相关sql，修改配置文件就能运行。

注意：部署的时候下面的一个文件：.mymetadata这个里面关系到这个项目的名称，由于我是直接拷贝的/gtgrid_LianDong这个项目，所以导致了名字不是flexigrid，请自行修改，

 

Xml代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <project-module  
  3.   type="WEB"  
  4.   name="flexigrid"  
  5.   id="myeclipse.1267149904578"  
  6.   context-root="<span style="color: #ff0000;">/gtgrid_LianDong</span>"  
  7.   j2ee-spec="1.4"  
  8.   archive="flexigrid.war">  
  9.   <attributes>  
  10.     <attribute name="webrootdir" value="WebRoot" />  
  11.   </attributes>  
  12. </project-module>  

 

三、代码

 

 

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

 

 

Test.js代码  收藏代码
  1. $(function() {  
  2.         $("#flex").flexigrid({  
  3.                 url : 'all.action',  
  4.                 dataType : 'json',  
  5.                 colModel : [{  
  6.                         display : 'ID',  
  7.                         name : 'id',  
  8.                         width : 50,// 得加上 要不IE报错  
  9.                         sortable : true,  
  10.                         align : 'center'  
  11.                     }, {  
  12.                         display : '商品名称',  
  13.                         name : 'name',  
  14.                         width : 100,  
  15.                         sortable : true,  
  16.                         align : 'center'  
  17.                     }, {  
  18.                         display : '标准',  
  19.                         name : 'stand',  
  20.                         width : 100,  
  21.                         sortable : true,  
  22.                         align : 'center'  
  23.                     }, {  
  24.                         display : '单价',  
  25.                         name : 'money',  
  26.                         width : 100,  
  27.                         sortable : true,  
  28.                         align : 'center'  
  29.                     }, {  
  30.                         display : '库存',  
  31.                         name : 'leavings',  
  32.                         width : 100,  
  33.                         sortable : true,  
  34.                         align : 'center'  
  35.                     }, {  
  36.                         display : '已经订购',  
  37.                         name : 'orders',  
  38.                         width : 100,  
  39.                         sortable : true,  
  40.                         align : 'center'  
  41.                     }],  
  42.                 buttons : [{  
  43.                         name : '添加',  
  44.                         bclass : 'add',  
  45.                         onpress : action  
  46.                     }, {  
  47.                         // 设置分割线  
  48.                         separator : true  
  49.                     }, {  
  50.                         name : '删除',  
  51.                         bclass : 'delete',  
  52.                         onpress : action  
  53.                     }, {  
  54.                         separator : true  
  55.                     }, {  
  56.                         name : '修改',  
  57.                         bclass : 'edit',  
  58.                         onpress : action  
  59.                     }, {  
  60.                         separator : true  
  61.                     }],  
  62. //              searchitems : [{  
  63. //                      display : 'ID',  
  64. //                      name : 'id',  
  65. //                      isdefault : true  
  66. //                  }, {  
  67. //                      display : '库存',  
  68. //                      name : 'leavings'  
  69. //                  }],  
  70.                 sortname : "id",  
  71.                 sortorder : "asc",  
  72.                 usepager : true,  
  73.                 title : '商品信息',  
  74.                 useRp : true,  
  75.                 checkbox : true,// 是否要多选框  
  76.                 rowId : 'id',// 多选框绑定行的id  
  77.                 rp : 10,  
  78.                 showTableToggleBtn : true,  
  79.                 width : 700,  
  80.                 height : 263  
  81.             });  
  82.         var actions="";  
  83.         function action(com, grid) {  
  84.             switch (com) {  
  85.                 case '添加' :  
  86.                     $("#savegoods input[type='text']").each(function() {  
  87.                             $(this).val("");  
  88.                         });  
  89.                      $('#savegoods input[name="id"]').removeAttr("<span style="font-family: 'Courier New', monospace;">disabled<span style="font-family: Verdana, Arial, Helvetica, sans-serif;">");</span></span>  
  90.                      $('#savegoods').attr("action","add.action");  
  91.                     actions="add.action";  
  92.                     $("#goods").jqmShow();  
  93.                     break;  
  94.                 case '修改' :  
  95.                     selected_count = $('.trSelected', grid).length;  
  96.                     if (selected_count == 0) {  
  97.                         alert('请选择一条记录!');  
  98.                         return;  
  99.                     }  
  100.                     if (selected_count > 1) {  
  101.                         alert('抱歉只能同时修改一条记录!');  
  102.                         return;  
  103.                     }  
  104.                     data = new Array();  
  105.                     $('.trSelected td', grid).each(function(i) {  
  106.                             data[i] = $(this).children('div').text();  
  107.                         });  
  108.                     $('#savegoods input[name="id"]').val(data[0]).attr("<span style="font-family: 'Courier New', monospace;">disabled<span style="font-family: Verdana, Arial, Helvetica, sans-serif;">",true);</span></span>  
  109.                     $('#savegoods input[name="name"]').val(data[1]);  
  110.                     $('#savegoods input[name="stand"]').val(data[2]);  
  111.                     $('#savegoods input[name="money"]').val(data[3]);  
  112.                     $('#savegoods input[name="leavings"]').val(data[4]);  
  113.                     $('#savegoods input[name="orders"]').val(data[5]);  
  114.                       
  115.                    actions="modify.action";  
  116.   
  117.                     $("#goods").jqmShow();  
  118.                     break;  
  119.                 case '删除' :  
  120.                     selected_count = $('.trSelected', grid).length;  
  121.                     if (selected_count == 0) {  
  122.                         alert('请选择一条记录!');  
  123.                         return;  
  124.                     }  
  125.                     names = '';  
  126.                     $('.trSelected td:nth-child(3) div', grid).each(function(i) {  
  127.                             if (i)  
  128.                                 names += ',';  
  129.                             names += $(this).text();  
  130.                         });  
  131.                     ids = '';  
  132.                     $('.trSelected td:nth-child(2) div', grid).each(function(i) {  
  133.                             if (i)  
  134.                                 ids += ',';  
  135.                             ids += $(this).text();  
  136.                         })  
  137.                     if (confirm("确定删除商品[" + names + "]?")) {  
  138.                         delUser(ids);  
  139.                     }  
  140.                     break;  
  141.             }  
  142.         }  
  143.         $("#goods").jqm({  
  144.             // trigger : 'a.showDialog',// 触发  
  145.             // ajax: '@href',//ajax读取方式  
  146.             // ajaxText:'',//提示语言  
  147.             modal : true,// 限制输入（鼠标点击，按键）的对话  
  148.             overlay : 60 // 遮罩程度%  
  149.               // target : t,// 提示  
  150.               // onHide : function(h) {  
  151.               // // // t.html('Please Wait...'); // Clear Content HTML on Hide.  
  152.               // h.o.remove(); // remove overlay  
  153.               // // h.w.fadeOut(888); // hide window  
  154.               // }  
  155.           }).jqmAddClose('.close')// 添加触发关闭的selector  
  156.           .jqDrag('.drag');// 添加拖拽的selector  
  157.           
  158.         function delUser(ids) {  
  159.             $.ajax({  
  160.                     url : 'delete.action',  
  161.                     data : {  
  162.                         ids : ids  
  163.                     },  
  164.                     type : 'POST',  
  165.                     dataType : 'json',  
  166.                     success : function() {  
  167.                         $('#flex').flexReload();//表格重载  
  168.                     }  
  169.                 });  
  170.         }  
  171.         $("#submit").click(function(){  
  172.              $.ajax({  
  173.                     url : actions,  
  174.                     data : $("#savegoods").serialize(),  
  175.                     type : 'POST',  
  176.                     dataType : 'json',  
  177.                     success : function(data) {  
  178.                         $("#goods").jqmHide();  
  179.                         $('#flex').flexReload();  
  180.                     }  
  181.                 });  
  182.         })  
  183.     });  

 

Index.jsp代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.     <head>  
  4.         <title>商品信息</title>  
  5.         <link rel="stylesheet" type="text/css"  
  6.             href="flexigrid_my/css/flexigrid_gray.css">  
  7.         <link rel="stylesheet" type="text/css"  
  8.             href="flexigrid_my/jqModal/css/jqModal_gray.css">  
  9.         <script type="text/javascript" src="flexigrid_my/jquery-1.3.2.min.js"></script>  
  10.         <script type="text/javascript" src="flexigrid_my/flexigrid.js"></script>  
  11.         <script type="text/javascript" src="flexigrid_my/jqModal/jqDnR.js"></script>  
  12.         <script type="text/javascript" src="flexigrid_my/jqModal/jqModal.js"></script>  
  13.         <script type="text/javascript" src="flexigrid_my/test.js"></script>  
  14.     </head>  
  15.     <body>  
  16.         <table id="flex" style="display: none"></table>  
  17.         <div class="jqmWindow" style="width: 300px;" id="goods">  
  18.             <div class="drag">  
  19.                 商品信息编辑  
  20.                 <div class="close"></div>  
  21.             </div>  
  22.             <form id="savegoods" method="post">  
  23.                 <table width="252" border="0" align="center"  
  24.                     cellpadding="0" cellspacing="0">  
  25.                     <tr>  
  26.                         <td>ID：</td>  
  27.                         <td><input type="text" name="id" ></td>  
  28.                     </tr>  
  29.                     <tr>  
  30.                         <td>商品名称：</td>  
  31.                         <td><input type="text" name="name"></td>  
  32.                     </tr>  
  33.                     <tr>  
  34.                         <td>标准：</td>  
  35.                         <td><input type="text" name="stand"></td>  
  36.                     </tr>  
  37.                     <tr>  
  38.                         <td>单价：</td>  
  39.                         <td><input type="text" name="money"></td>  
  40.                     </tr>  
  41.                     <tr>  
  42.                         <td>库存：</td>  
  43.                         <td><input type="text" name="leavings"></td>  
  44.                     </tr>  
  45.                     <tr>  
  46.                         <td>已经订购：</td>  
  47.                         <td><input type="text" name="orders"></td>  
  48.                     </tr>  
  49.                 </table>  
  50.                 <div align="center">  
  51.                     <input type="button" id="submit" class="input-button" value="提交" />  
  52.                     <input type="reset" class="input-button" value="重置" />  
  53.                 </div>  
  54.             </form>  
  55.         </div>  
  56.     </body>  
  57. </html><span style="white-space: normal;"><strong>  
  58. </strong></span>  
 四、部分效果图

蓝色皮肤

蓝色皮肤下的修改

 

灰色皮肤

灰色皮肤下的修改

 

五、BUG

在Firefox3.6、IE6、7、8、Chrome5下测试通过。

修复了在ie8下checkbox显示的问题。

修改了禁止修改ID,改为： $('#savegoods input[name="id"]').val(data[0]).attr("disabled",true);同时： $('#savegoods input[name="id"]').removeAttr("disabled");

 

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

posted on 2016-09-06 10:31  牛奶糖13号  阅读(264)  评论(0)  编辑  收藏  举报

导航