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 : , // flexigrid插件的高度，单位为px
            width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算
            striped : true, // 是否显示斑纹效果，默认是奇偶交互的形式
            novstripe : false,
            minwidth : , // 列的最小宽度
            minheight : , // 列的最小高度
            resizable : true, // 是否可伸缩
            url : false, // ajax方式对应的url地址
            method : 'POST', // 数据发送方式
            dataType : 'xml', // 数据加载的类型
            checkbox : false,// 是否要多选框
            errormsg : '连接错误!',// 错误提示信息
            usepager : false, // 是否分页
            nowrap : true, // 是否不换行
            page : , // 默认当前页
            total : , // 总页面数
            useRp : true, // 是否可以动态设置每页显示的结果数
            rp : , // 每页默认的结果数
            rpOptions : [,, , , , , ],// 可选择设定的每页结果数
            title : false,// 是否包含标题
            pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式
            procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息
            query : '',// 搜索查询的条件
            qtype : '',// 搜索查询的类别
            nomsg : '没有数据存在!',// 无结果的提示信息
            minColToggle : , // 允许显示的最小列数
            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 : ,// 得加上 要不IE报错
                        sortable : true,
                        align : 'center'
                    }, {
                        display : '商品名称',
                        name : 'name',
                        width : ,
                        sortable : true,
                        align : 'center'
                    }, {
                        display : '标准',
                        name : 'stand',
                        width : ,
                        sortable : true,
                        align : 'center'
                    }, {
                        display : '单价',
                        name : 'money',
                        width : ,
                        sortable : true,
                        align : 'center'
                    }, {
                        display : '库存',
                        name : 'leavings',
                        width : ,
                        sortable : true,
                        align : 'center'
                    }, {
                        display : '已经订购',
                        name : 'orders',
                        width : ,
                        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 : ,
                showTableToggleBtn : true,
                width : ,
                height :
            });
        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 == ) {
                        alert('请选择一条记录!');
                        return;
                    }
                    if (selected_count > ) {
                        alert('抱歉只能同时修改一条记录!');
                        return;
                    }
                    data = new Array();
                    $('.trSelected td', grid).each(function(i) {
                            data[i] = $(this).children('div').text();
                        });
                    $('#savegoods input[name="id"]').val(data[]).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[]);
                    $('#savegoods input[name="stand"]').val(data[]);
                    $('#savegoods input[name="money"]').val(data[]);
                    $('#savegoods input[name="leavings"]').val(data[]);
                    $('#savegoods input[name="orders"]').val(data[]);  

                   actions="modify.action";  

                    $("#goods").jqmShow();
                    break;
                case '删除' :
                    selected_count = $('.trSelected', grid).length;
                    if (selected_count == ) {
                        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 :  // 遮罩程度%
              // 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="width: 300px;" id="goods">
            <div class="drag">
                商品信息编辑
                <div class="close"></div>
            </div>
            <form id="savegoods" method="post">
                <table width="" border="" align="center"
                    cellpadding="" cellspacing="">
                    <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();
		});