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