当前位置: 首页 > 工具软件 > Flexigrid > 使用案例 >

Jquery.flexigrid使用手册

秋向阳
2023-12-01

Jquery.flexigrid使用手册

 

编写人:孟令国

 

编写日期:2010-8-23

 

一、             编写目的

 

对于项目开发中,不可避免的需要使用一些grid。对于由div标签或者table标签拼接而成的表格,无论从外观还有实用性都较差。在资料搜集过程中找到jquery此插件。对于功能和外观均是完美的表现。为了在以后使用中能够更好、更快速的开发实用的功能,撰写此文档。

 

二、             前提条件

 

对于一个项目如果想要使用flexigrid,需要满足以下条件(版本兼容性不在此说明)。

 

1、    jquery.js(原则上版本在1.3以上。)

 

2、    flexigrid.js

 

3、    其他需要扩展功能的插件。

 

三、             使用说明

 

对于flexigrid的使用分为如下几个步骤,总体来说,分为前台表现层,与后台业务处理。

 

1、    前台表现层:

<script type="text/javascript">
           $(document).ready(function(){
                 //table初始化
                 var grid=$("#JUserTable").flexigrid({
                         width: 695,//表格宽度
                  height: 270,//表格高度
                  url: '<%=basePath %>admin/UserManagerServlet',//数据请求地址
                  dataType: 'json',//请求数据的格式
                  colModel : [//表格的题头与索要填充的内容。
                     {display: '用户ID', name : 'userId', width : 40, sortable : true, align: 'center',toggle : false},//sortable:是否用于排序
                     {display: '登陆名称', name : 'userName', width : 80, sortable : true, align: 'center'},
                     {display: '密码管理', name : 'userPwd', width : 80, sortable : true, align: 'center'},
                     {display: '真实姓名', name : 'userRealName', width : 80, sortable : true, align: 'center'},
                     {display: '权限', name : 'userPower', width : 80, sortable : true,hide:true, align: 'center'},
                     {display: '当前状态', name : 'userState', width : 80, sortable : true, align: 'center'},
                     {display: '创建时间', name : 'userCreateTime', width : 160, sortable : true, align: 'center'}                                                                                      
                        ],
                  buttons : [//表格上面的按钮
                {name: 'add', displayname: '新增', bclass: 'add' ,onpress: toolbarItem},
                       {separator: true},
                      {name: 'modify', displayname: '修改', bclass: 'modify',onpress: toolbarItem},
                      {separator: true},
                      {name: 'delete', displayname: '删除', bclass: 'delete',onpress: toolbarItem}
                        ],
                  searchitems : [//查询条件
                 {display: '登陆名称', name : 'userName',isdefault:true},
                        {display: '真实姓名', name : 'userRealName'}
                        ],
                         errormsg: '发生异常',//发生异常时提示信息
                  sortname: "userId",//默认排序字段名称
                  sortorder: "desc",//升序还是降序
                  usepager: true,
                          title: '后台用户管理',//标题信息
                  pagestat: '显示记录从{from}到{to},总数 {total} 条',//分页显示信息
                  useRp: true,
                          rp: 10,//默认分页条数
                  rpOptions: [10,20,50], //可选择设定的每页结果数
                  nomsg: '没有符合条件的记录存在',
                          minColToggle: 1, //允许显示的最小列数
                  showTableToggleBtn: true,
                          autoload: true, //自动加载,即第一次发起ajax请求
                  resizable: false, //table是否可伸缩
                  procmsg: '加载中, 请稍等 ...',
                          hideOnSubmit: true, //是否在回调时显示遮盖
                  blockOpacity: 0.5,//透明度设置
                  onDblclick:selectDblclick,  //设置双击功能
                  showcheckbox: true,//是否显示第一列的checkbox(用于全选)
                  gridClass: "bbit-grid"//样式
            });


 function selectDblclick(rowid){ //根据传入的行号进行操作

}

                 //按钮操作函数

                 function toolbarItem(com, grid) 

                      //删除记录
                      if (com=='delete'){
                        if($('.trSelected',grid).length==0){
                             hiAlert("请选择要删除的数据!");
                        }else{
                              hiConfirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?', '操作提示', function(r) {
                                    if(r){
                                          var  ids ="";
                                         $('.trSelected td:nth-child(2)',grid).each(function(){
                                          ids+=","+$(this).text();
                                         });
                                         ids=ids.substring(1);
                                         $.ajax({
                                                    type: "POST",
                                                    url: "<%=basePath %>admin/UserManagerServlet?action=delete",
                                                    data: "ids="+ids,
                                                    dataType:"text",
                                                    success: function(msg){
                                                         if(msg=="success"){
                                                               hiAlert("操作成功!");
                                                               $("#JUserTable").flexReload();
                                                         }else{
                                                               hiAlert("有错误发生,msg="+msg);
                                                         }
                                                    },
                                                    error: function(msg){
                                                         hiAlert("msg="+msg);
                                                    }
                                              });
                                    }
                                   });

                        }
                        //增加记录
                  }else if (com=='add'){
                        var returnValue = window.showModalDialog('user_add.jsp','title','=yes;resizable=no;help=no;status=no;dialogHeight=600px;dialogWidth=530px');
                        if(returnValue == "ok"){
                             $('#JUserTable').flexReload();
                             }
                        //更改记录
                  }else if (com=='modify'){
                        if($(".trSelected",grid).length==1){
                             var id=$('.trSelected td:nth-child(2)',grid).text();
                             var returnValue = window.showModalDialog('user_add.jsp?action=update&UId='+id,'title','=yes;resizable=no;help=no;status=no;dialogHeight=600px;dialogWidth=530px');
                             if(returnValue == "ok"){
                                  $('#JUserTable').flexReload();
                                   }
                        }else if($(".trSelected",grid).length>1){
                             hiAlert("请选择一个修改,不能同时修改多个记录!");
                        }else if($(".trSelected",grid).length==0){
                            hiAlert("请选择一个您要修改的记录!")
                        }
                  }
             }
                 }
      );

           //用户密码初始化
      function init_pwd(userId){
           hiConfirm('你确定对该用户密码初始化?', '操作提示', function(r) {
                 if(r){
                      $.ajax({
                            type: "POST",
                            url: "<%=basePath %>admin/UserManagerServlet?action=initPwd",
                            data: "userId="+userId,
                            dataType:"text",
                            success: function(msg){
                                  if(msg=="success"){
                                       hiAlert("操作成功!");
                                       $("#JUserTable").flexReload();
                                  }else{
                                       hiAlert("有错误发生,msg="+msg);
                                  }
                            },
                            error: function(msg){
                                  hiAlert("msg="+msg);
                            }

                      });
                 }

                 });

      }
      //用户状态更改
      function change_state(userId){
           hiConfirm('你确定更改该用户的状态?', '操作提示', function(r) {

                 if(r){

                      $.ajax({

                            type: "POST",

                            url: "<%=basePath %>admin/UserManagerServlet?action=changeState",

                            data: "userId="+userId,

                            dataType:"text",

                            success: function(msg){

                                  if(msg=="success"){

                                       hiAlert("操作成功!");

                                       $("#JUserTable").flexReload();

                                  }else{
                                       hiAlert("有错误发生,msg="+msg);

                                  }

                            },
                            error: function(msg){

                                  hiAlert("msg="+msg);

                            }

                      });

                 }
                 });

      }
</script>

 

 

 

 

<table id="JUserTable" style="display:none"></table>

 

在此示例代码中,有一下几点说明:

 

第一:使用了第三方提示信息插件,HiAlert。如无此插件,可用js默认的alert代替。

 

第二:json的数据格式(后台处理),与表格题头信息的关联。如果没有显示数据的必要,只能隐藏,而不能不写。

 

第三:数据加载方式为ajax异步调用。

 

2、  后台处理:

 

在此后台业务处理采用servlet处理。采用什么方式处理关系不大。

 

第一:json格式的封装

 

 

 

来源:

 

http://blog.sina.com.cn/s/blog_7a9739bf0100sxls.html

 类似资料: