Using jqGrid with a Rails Controller
At the server side, for a simple table, all that you have to do is to get the data from the table and send that in JSON format to the view.
@item_instances = ItemInstance.find(:all, :conditions => ["ITEM_METADATA_ID = ?", params[:q]],
:limit => params[:rows],
:offset => (params[:page].to_i - 1) * params[:rows].to_i);
respond_to do |format|
format.html
format.json { render :json => @item_instances.to_jqgrid_json([:id, :NAME,:DISPLAY_NAME],
params[:page], params[:rows], params[:records]) }
end
Note that the Rails jqGrid plug-in has a to_jqgrid_json
function, which converts the ItemInstance object to JSON format, which the jqGrid in the view can display. Although this will make sure that data is fetched from the server side and displayed as shown in Figure 1, the CRUD operations won't be complete.
def post_data
if params[:oper] == "del"
ItemInstance.find(params[:id]).destroy
else
@item_instance = { :id => params[:id], :ITEM_METADATA_ID => params[:q],
:NAME => params[:NAME],
:DISPLAY_NAME => params[:DISPLAY_NAME]
}
if params[:id] == "_empty"
ItemInstance.create(@item_instance)
else
ItemInstance.find(params[:q]).update_attributes(@item_instance)
end
end
render :nothing => true
end
In the previous sections, the usage of jqGrid along with Ruby on Rails was discussed in detail. In the following section, the focus will predominantly be on making the CRUD operations look a bit more professional and how you can achieve this with the help of jqGrid and a bit of supporting jQuery scripts.
CRUD Icons in jqGrid
JqGrid provides the users with a set of icons for the CRUD operations as shown in Figure 2 below:
Figure 2. JqGrid Icons for CRUD Operations
The icons are provided by jqGrid out of the box, and they can be enabled or disabled to suit the user's needs. In the snippet below, you can see that there are a set of true and false conditions. "Edit:false
" when declared in the navGrid
disables the edit icon (the edit icon disables from the table). It also disables editing of the rows of the table. "Edit:true
," on the other hand, would have enabled the edit icon and let the users edit the contents. Though the edit icons on the table (ui
) can be enabled and disabled, it does not actually mean that the functionality of editing and save, or deleting and save has been enabled at the back end. This has to be explicitly enabled by the user. From the code below, one can notice easily that "edit" has been disabled. However, add, delete, search and refresh are enabled. The users can only see the icons of the operations that have been enabled (Figure 2).
navGrid('#item_instance_pager',
{edit:false,add:true,del:true,search:true,refresh:true},
{afterSubmit:function(r,data){return true;(r,data,'edit');}},
{afterSubmit:function(r,data){return true;(r,data,'add');}},
{afterSubmit:function(r,data){return true;(r,data,'delete');}}
)