flexigrid+rails 新手代码-。-

最新推荐文章于 2024-09-06 18:19:19 发布

iteye_9276

最新推荐文章于 2024-09-06 18:19:19 发布

阅读量114

点赞数

文章标签： Rails json jQuery JavaScript Flex ViewUI

网上flexigrid的例子好多不过全是PHP JAVA 和.net的结果rails的例子一个都没那么就由我这个菜鸟来写个简单的例子吧。。。。
filexigrid的官方传送门http://www.flexigrid.info/
先是页面配置主要是JS

$("#flex1").flexigrid


			(


			{


			url: 'formatxml.json',


			dataType: 'json',


			colModel : [


                                {display: 'ID', name : 'id', width : 60, sortable : true, align: 'right'},


				{display: '店铺名称', name : 'biz_name', width : 120, sortable : true, align: 'center'},


				{display: '地址', name : 'biz_location', width : 400, sortable : true, align: 'left'},


				{display: '电话', name : 'phone', width : 120, sortable : true, align: 'left'},


				{display: '描述', name : 'description', width : 550, sortable : true, align: 'left'},


				{display: '等级', name : 'level', width : 30, sortable : true, align: 'left'}


				],


                        buttons : [


                         {name: '删除', bclass: 'delete', onpress : versionMan},


                         {name: '修改', bclass: 'dialogModify', onpress : versionMan},


                         {separator: true}


                         ],


			searchitems : [


				{display: '店铺名称', name : 'biz_name'},


                                {display: '描述', name : 'description'},


                                {display: '电话', name : 'phone'},


				{display: '地址', name : 'location', isdefault: true}


				],


			sortname: "ID",


                        onRowDblclick: rowdbclick,


			sortorder: "desc",


			usepager: true,


			title: '好好网后台管理',


                        showcheckbox: true,


			useRp: true,


			rp: 20,


			showTableToggleBtn: true,


			width: 1400,			 


			height: 500.


			}


			);

我的controller层写的主要是查询后转换成json的格式

    def formatxml


      respond_to do |format|


      format.xml {


         render :layout =>false


        }


      format.json {


       render :json=>formatjson


      }


     end


  end


  def formatjson


    pageIndex=params[:page]  #获得当前页数


    pageSize=params[:rp]   #获得每页数据最大量


    query=params[:query]  #获得模糊查询文本输入框的值


    qtype=params[:qtype]  #获得模糊查询条件


    sortname = params[:sortname] #排序的字段


    sortorder =params[:sortorder ] #desc or as


     if query!=""


        count=BizInfo.find_by_sql("select count(*) from  biz_infos where "+qtype+" like '%"+query+"%' ")


     else


         count=BizInfo.count(:id)


     end


     puts count


     text=((pageIndex.to_i()  - 1) * pageSize.to_i()).to_s


     sql1="select * from biz_infos"


     if query!=""


         sql1 +=" where " + qtype + " like " +"'%" + query + "%'";


     end


    sql1+=" order by " + sortname + " " + sortorder  + " limit " + text + "," + pageSize.to_s()


    puts sql1


    @biz_infos = BizInfo.find_by_sql(sql1);


              bizinfo_hash={}


              bizinfo_hash['total'] = count


              bizinfo_hash['page'] = pageIndex


              bizinfo_hash['rows'] = []


              @biz_infos.each do |info|


              row_hash={}


              row_hash['id'] =info.id


              row_hash["cell"]=[]


              row_hash["cell"] << info.id


              row_hash["cell"] << info.biz_name


              row_hash["cell"] <<  info.biz_location


              row_hash["cell"] << info.phone


              row_hash["cell"] << info.description


              row_hash["cell"] << info.level


              bizinfo_hash['rows'] << row_hash


              end


              return bizinfo_hash.to_json  


  end

返回的JSON格式一定要按照这样来不然显示不出数据的-。-

   {"total":6186,"rows":[{"cell":[id,"xxx","xxx","xxx",xx}]}

查询做完了来做删除和修改

var main_grid;


    function versionMan(com,grid){


    main_grid=grid;  


          if(com == "删除"){


                if($('.trSelected',grid).length==0){


                   alert("请先选中要删除的数据");return false;


               }


               if(confirm('删除 ' + $('.trSelected',grid).length + ' 数据?')){


                    var  id ="";


                              for(var i=0;i<$('.trSelected',grid).length;i++){


                                 if(i==$('.trSelected',grid).length-1){


                                     id += $('.trSelected',grid).find("td:first").eq(i).text();


                                  


                                 } else {


                                     id += $('.trSelected',grid).find("td:first").eq(i).text()+",";


                                 }


                               }


                    //alert(id);


                   $.ajax({


                       type: "POST",


                       url:  "del_json",                      


                       data: "ids="+id,


                       success: function(msg){               


                           if(msg=="success"){


                             


                               $("#flex1").flexReload({});


                           }


                           else alert("有错误发生");


                       },


                       error: function(msg){


                           alert(msg);


                       }


                   });


                    


               }


           } else if (com=='修改'){


                 if($(".trSelected",grid).length==1){


                         $('#dialogModify').dialog({


				closed:false


			});


		}else if($(".trSelected",grid).length>1){


			alert("请选择一个修改,不能同时修改多个记录!");


		}else if($(".trSelected",grid).length==0){


			alert("请选择一个您要修改的记录!")


		}


         }  


       };


//构造1个dialog


$('#dialogModify').dialog({


    		href:'addmodify',


                onOpen:function(){


    			var id=$('.trSelected td:nth-child(2)',main_grid).text();


    			//ps：这样获取是不妥的，为了简单先不改。


    			$('#dialogModify #form1 #biz_name').val($('.trSelected td:nth-child(2)',main_grid).text());


    			$('#dialogModify #form1 #biz_location').val($('.trSelected td:nth-child(3)',main_grid).text());


    			$('#dialogModify #form1 #phone').val($('.trSelected td:nth-child(4)',main_grid).text().substring(1));


    			$('#dialogModify #form1 #description').val($('.trSelected td:nth-child(5)',main_grid).text());


    			$('#dialogModify #form1 #level').val($('.trSelected td:nth-child(6)',main_grid).text());


    		},


    		onClose:function(){


    			$('#dialogModify #form1')[0].reset();


				//$('#dialogModify #form1 :input').val("");//清空表单值


				//$('#dialogModify #form1 #language')[0].selectedIndex = 0;//恢复select的默认值


    		},


   			closed:true,


   			width:500,


   			height:440,


   			showType:'fade',//'slide','fade','show'


   			showSpeed:400,


			iconCls: 'icon-modify',


                        buttons:{


				'\u4FEE\u6539':function(){//修改


					var params=$("#dialogModify #form1").serialize();//此处必须加上#dialogModify


					var id=$('.trSelected td:nth-child(1)',main_grid).text();


                                        var infos=encodeURI(params);                                


					$.ajax({


							type: "POST",


							url: "modify_json?id="+id,


							data: infos,


							success: function(msg){


                                                               if(msg=="success"){


                                                                  $("#flex1").flexReload({});


                                                                  $('#dialogModify').dialog({closed:true});





								}else{


									$('#dialogModify').dialog({closed:true});


									alert("有错误发生,msg="+msg);


								}


								


							},


							error: function(msg){


								alert("msg="+msg);


							}


					});


				},


				'\u53D6\u6D88':function(){//取消


					$('#dialogModify').dialog({closed:true});


				}


                             


			}


                        


	});

然后这是controller层的代码

  def del_json


     id=params[:ids]


     arrayid=id.split(",")


     BizInfo.destroy(arrayid)


     render :json =>"success"


     return


  end


  def modify_json


     biz_name=params[:biz_name]


     biz_location=params[:biz_location]


     level=params[:level]


     id=params[:id]


     puts id


     aid=id.to_i();


     puts aid


     description=params[:description]


     phone=params[:phone]


     biz_name=CGI.unescape(biz_name)


     biz_location=CGI.unescape(biz_location)


     level=CGI.unescape(level)


     description=CGI.unescape(description)


     phone=CGI.unescape(phone)


    if BizInfo.update(id,:biz_name => biz_name,:biz_location=>biz_location,:phone=>phone,:description=>description,:level=>level)


     render :text =>"success"


    else


      render :text =>"failed"


    end


     return 


  end

最后在网上查找了1个flexigrid的双击事件具体步骤修改

在FlexiGrid.js的


=============================================  


addRowProp: function()


   {


     $('tbody tr',g.bDiv).each


     (


       function ()


       {


       $(this)


==============================================      


后面增加


===============================================





    .dblclick(   


        function (e) {   


            var rowData = new Object();   


             $.each($(this).find('div'),function(i){   


                 $(rowData).data(p.colModel[i].name,$(this).text());   


             });   


            if (p.onRowDblclick) p.onRowDblclick($(rowData));   


         }   


    )   


 在页面flexigrid（{}）中增加


=================


onRowDblclick:rowdbclick//rowdbclick自定义函数


 弹出修改框


 var rowdbclick = function(rowData) {


          $('#dialogModify').dialog({


				closed:false


			});


           }

最后细节主要加载的JS和CSS

<%= javascript_include_tag "jquery-1.3.2.min" %>


<%= javascript_include_tag "flexigrid" %>


<%= javascript_include_tag "jquery.dialog" %>


<%= javascript_include_tag "jquery.shadow" %>


<%= javascript_include_tag "jquery.draggable" %>


<%= javascript_include_tag "jquery.resizable" %>


<%= javascript_include_tag "jquery.linkbutton" %>


<%= stylesheet_link_tag 'flexigrid' %>


<%= stylesheet_link_tag 'dialog' %>


<%= stylesheet_link_tag 'shadow' %>


<%= stylesheet_link_tag 'icon' %>


<%= stylesheet_link_tag 'linkbutton' %>

最后附加1个demo...需要改yml 数据库就不给了好大。。。

应燕子大师的要求上效果图- -

iteye_9276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flexigrid+rails 新手代码-。-

网上flexigrid的例子好多不过全是PHP JAVA 和.net的结果rails的例子一个都没那么就由我这个菜鸟来写个简单的例子吧。。。。 filexigrid的官方传送门http://www.flexigrid.info/ 先是页面配置主要是JS$("#flex1").flexigrid ( { url: 'for...
复制链接

扫一扫