Flexigrid-Web2.0 jQuery

一、参考资料

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

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

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

4、ASP.NET MVC Flexigrid sample

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

6、官方网站

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

二、说明

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

自己整理了2套皮肤。

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

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

  Xml代码

<?xml version="1.0" encoding="UTF-8"?>  
<project-module  
  type="WEB"  
  name="flexigrid"  
  id="myeclipse.1267149904578"  
  context-root="<span style="color: #ff0000;">/gtgrid_LianDong</span>"  
  j2ee-spec="1.4"  
  archive="flexigrid.war">  
  <attributes>  
    <attribute name="webrootdir" value="WebRoot" />  
  </attributes>  
</project-module>  

三、代码

Flexigrid部分代码代码

if (t.grid)  
            return false; // return if already exist  
  
        // apply default properties  
        p = $.extend({  
            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', // 数据加载的类型  
            checkbox : false,// 是否要多选框  
            errormsg : '连接错误!',// 错误提示信息  
            usepager : false, // 是否分页  
            nowrap : true, // 是否不换行  
            page : 1, // 默认当前页  
            total : 1, // 总页面数  
            useRp : true, // 是否可以动态设置每页显示的结果数  
            rp : 15, // 每页默认的结果数  
            rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数  
            title : false,// 是否包含标题  
            pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式  
            procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息  
            query : '',// 搜索查询的条件  
            qtype : '',// 搜索查询的类别  
            nomsg : '没有数据存在!',// 无结果的提示信息  
            minColToggle : 1, // 允许显示的最小列数  
            showToggleBtn : true, // 是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错  
            hideOnSubmit : true,// 隐藏提交  
            autoload : true,// 自动加载  
            blockOpacity : 0.5,// 透明度设置  
            onToggleCol : false,// 当在行之间转换时，可在此方法中重写默认实现，基本无用  
            onChangeSort : false,// 当改变排序时，可在此方法中重写默认实现，自行实现客户端排序  
            onSuccess : false,// 成功后执行  
            onSubmit : false  
              // 调用自定义的计算函数  
          }, p);  

Test.js代码

$(function() {  
        $("#flex").flexigrid({  
                url : 'all.action',  
                dataType : 'json',  
                colModel : [{  
                        display : 'ID',  
                        name : 'id',  
                        width : 50,// 得加上 要不IE报错  
                        sortable : true,  
                        align : 'center'  
                    }, {  
                        display : '商品名称',  
                        name : 'name',  
                        width : 100,  
                        sortable : true,  
                        align : 'center'  
                    }, {  
                        display : '标准',  
                        name : 'stand',  
                        width : 100,  
                        sortable : true,  
                        align : 'center'  
                    }, {  
                        display : '单价',  
                        name : 'money',  
                        width : 100,  
                        sortable : true,  
                        align : 'center'  
                    }, {  
                        display : '库存',  
                        name : 'leavings',  
                        width : 100,  
                        sortable : true,  
                        align : 'center'  
                    }, {  
                        display : '已经订购',  
                        name : 'orders',  
                        width : 100,  
                        sortable : true,  
                        align : 'center'  
                    }],  
                buttons : [{  
                        name : '添加',  
                        bclass : 'add',  
                        onpress : action  
                    }, {  
                        // 设置分割线  
                        separator : true  
                    }, {  
                        name : '删除',  
                        bclass : 'delete',  
                        onpress : action  
                    }, {  
                        separator : true  
                    }, {  
                        name : '修改',  
                        bclass : 'edit',  
                        onpress : action  
                    }, {  
                        separator : true  
                    }],  
//              searchitems : [{  
//                      display : 'ID',  
//                      name : 'id',  
//                      isdefault : true  
//                  }, {  
//                      display : '库存',  
//                      name : 'leavings'  
//                  }],  
                sortname : "id",  
                sortorder : "asc",  
                usepager : true,  
                title : '商品信息',  
                useRp : true,  
                checkbox : true,// 是否要多选框  
                rowId : 'id',// 多选框绑定行的id  
                rp : 10,  
                showTableToggleBtn : true,  
                width : 700,  
                height : 263  
            });  
        var actions="";  
        function action(com, grid) {  
            switch (com) {  
                case '添加' :  
                    $("#savegoods input[type='text']").each(function() {  
                            $(this).val("");  
                        });  
                     $('#savegoods input[name="id"]').removeAttr("<span style="font-family: 'Courier New', monospace;">disabled<span style="font-family: Verdana, Arial, Helvetica, sans-serif;">");</span></span>  
                     $('#savegoods').attr("action","add.action");  
                    actions="add.action";  
                    $("#goods").jqmShow();  
                    break;  
                case '修改' :  
                    selected_count = $('.trSelected', grid).length;  
                    if (selected_count == 0) {  
                        alert('请选择一条记录!');  
                        return;  
                    }  
                    if (selected_count > 1) {  
                        alert('抱歉只能同时修改一条记录!');  
                        return;  
                    }  
                    data = new Array();  
                    $('.trSelected td', grid).each(function(i) {  
                            data[i] = $(this).children('div').text();  
                        });  
                    $('#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>  
                    $('#savegoods input[name="name"]').val(data[1]);  
                    $('#savegoods input[name="stand"]').val(data[2]);  
                    $('#savegoods input[name="money"]').val(data[3]);  
                    $('#savegoods input[name="leavings"]').val(data[4]);  
                    $('#savegoods input[name="orders"]').val(data[5]);  
                      
                   actions="modify.action";  
  
                    $("#goods").jqmShow();  
                    break;  
                case '删除' :  
                    selected_count = $('.trSelected', grid).length;  
                    if (selected_count == 0) {  
                        alert('请选择一条记录!');  
                        return;  
                    }  
                    names = '';  
                    $('.trSelected td:nth-child(3) div', grid).each(function(i) {  
                            if (i)  
                                names += ',';  
                            names += $(this).text();  
                        });  
                    ids = '';  
                    $('.trSelected td:nth-child(2) div', grid).each(function(i) {  
                            if (i)  
                                ids += ',';  
                            ids += $(this).text();  
                        })  
                    if (confirm("确定删除商品[" + names + "]?")) {  
                        delUser(ids);  
                    }  
                    break;  
            }  
        }  
        $("#goods").jqm({  
            // trigger : 'a.showDialog',// 触发  
            // ajax: '@href',//ajax读取方式  
            // ajaxText:'',//提示语言  
            modal : true,// 限制输入（鼠标点击，按键）的对话  
            overlay : 60 // 遮罩程度%  
              // target : t,// 提示  
              // onHide : function(h) {  
              // // // t.html('Please Wait...'); // Clear Content HTML on Hide.  
              // h.o.remove(); // remove overlay  
              // // h.w.fadeOut(888); // hide window  
              // }  
          }).jqmAddClose('.close')// 添加触发关闭的selector  
          .jqDrag('.drag');// 添加拖拽的selector  
          
        function delUser(ids) {  
            $.ajax({  
                    url : 'delete.action',  
                    data : {  
                        ids : ids  
                    },  
                    type : 'POST',  
                    dataType : 'json',  
                    success : function() {  
                        $('#flex').flexReload();//表格重载  
                    }  
                });  
        }  
        $("#submit").click(function(){  
             $.ajax({  
                    url : actions,  
                    data : $("#savegoods").serialize(),  
                    type : 'POST',  
                    dataType : 'json',  
                    success : function(data) {  
                        $("#goods").jqmHide();  
                        $('#flex').flexReload();  
                    }  
                });  
        })  
    });  

Index.jsp代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <title>商品信息</title>  
        <link rel="stylesheet" type="text/css"  
            href="flexigrid_my/css/flexigrid_gray.css">  
        <link rel="stylesheet" type="text/css"  
            href="flexigrid_my/jqModal/css/jqModal_gray.css">  
        <script type="text/javascript" src="flexigrid_my/jquery-1.3.2.min.js"></script>  
        <script type="text/javascript" src="flexigrid_my/flexigrid.js"></script>  
        <script type="text/javascript" src="flexigrid_my/jqModal/jqDnR.js"></script>  
        <script type="text/javascript" src="flexigrid_my/jqModal/jqModal.js"></script>  
        <script type="text/javascript" src="flexigrid_my/test.js"></script>  
    </head>  
    <body>  
        <table id="flex" style="display: none"></table>  
        <div class="jqmWindow" style=" 300px;" id="goods">  
            <div class="drag">  
                商品信息编辑  
                <div class="close"></div>  
            </div>  
            <form id="savegoods" method="post">  
                <table width="252" border="0" align="center"  
                    cellpadding="0" cellspacing="0">  
                    <tr>  
                        <td>ID：</td>  
                        <td><input type="text" name="id" ></td>  
                    </tr>  
                    <tr>  
                        <td>商品名称：</td>  
                        <td><input type="text" name="name"></td>  
                    </tr>  
                    <tr>  
                        <td>标准：</td>  
                        <td><input type="text" name="stand"></td>  
                    </tr>  
                    <tr>  
                        <td>单价：</td>  
                        <td><input type="text" name="money"></td>  
                    </tr>  
                    <tr>  
                        <td>库存：</td>  
                        <td><input type="text" name="leavings"></td>  
                    </tr>  
                    <tr>  
                        <td>已经订购：</td>  
                        <td><input type="text" name="orders"></td>  
                    </tr>  
                </table>  
                <div align="center">  
                    <input type="button" id="submit" class="input-button" value="提交" />  
                    <input type="reset" class="input-button" value="重置" />  
                </div>  
            </form>  
        </div>  
    </body>  
</html><span style="white-space: normal;"><strong>  
</strong></span>  

四、部分效果图

蓝色皮肤

蓝色皮肤下的修改

灰色皮肤

灰色皮肤下的修改

获取选中的那行的第一列。代码如下：

		$('#subUsers').each(function () {
			id = $('.trSelected').children('td').eq(0).children('div').html();
		});