zoukankan      html  css  js  c++  java

  • 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=" 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的下拉列表实现二级联动
  • 相关阅读:
    Could not resolve com.android.support:appcompat-v7:28.0.0 错误处理
    解决 Could not resolve com.android.tools.build:gradle:3.1.3
    https://maven.google.com 连接不上的解决办法(转）
    jquery操作select(取值，设置选中）
    django 使用 request 获取浏览器发送的参数
    jquery下载,实时更新jquery1.2到最新3.3.1所有版本下载
    myeclipse 8.5反编译插件失效
    再探java基础——对面向对象的理解(2)
    庖丁解牛FPPopover
    去大连
  • 原文地址：https://www.cnblogs.com/niuxi/p/5844780.html
Copyright © 2011-2022 走看看