网上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 数据库就不给了 好大。。。
应燕子大师的要求 上效果图- -