Manage Queue Membership: Behind the User Interface
The first step in making the changes was to add the first and last names to each of the membership grids. This simply required changing the data source for the user information from the user table to the empl_user view in both of the user grid pages. The grid_queue_mem.asp and grid_queue_mem2.asp pages each retrieve a list of records from the database, and build a table of user information from the results.
Adding multi-select capability required much more change, so it was time to look for a better way to get the job done. This is where jQuery enters the picture. There is an excellent jQuery plugin available for grids, called jqGrid. There is a lot of capability available, and it allows us to simplify the code.
In the previous version of the form shown above, there is an IFRAME for each of the grids on the form. For each IFRAME that is used, there is a separate ASP page that gets the records from the database, and builds the table that displays the information if each grid.
Here is an example of the code that was used to build one of those grids:
<table id=”ver_tbl”>
<tr style=”background-color: lightblue”>
<td nowrap><b>User</b></td>
</tr>
<%
while(!boUser.EOF) {
%>
<tr id=<%=boUser(“objid”)%> defColor=”White” bgColor=”White”
onclick=”javascript:GridRowClickHandler(this, ‘ver_tbl’, ‘prev_grid_sel_row’); rowSel(this);” title=”Click Row to Select”>
<td nowrap><% =boUser(‘login_name’)%> </td>
</tr>
<%
boUser.MoveNext();
}
%>
</table>
Any information about a selected user has to be moved back and forth between to main page and each grid. By clicking on a row, the objid of the selected row is saved to the parent form, as shown here:
function rowSel(thisRow) {
parent.document.getElementById(‘userObjid’).value = thisRow.id;
}
The jqGrid plugin allows all of the controls on the page to be in one file, and loads the data into the grids with an AJAX call to the server. This eliminates the need to pass values from one form to its parent, and results in more maintainable code. The code required for the Member grid using jqGrid consists of setting up the grid columns and properties, and providing the URL for the AJAX call to get the data. Here is an example that shows the Members grid:
$(“#memberGrid”).jqGrid({
url:”loadMembers.asp?queue=<%=queueObjid%>&type=mem”,
datatype:”json”,
colNames:[“user_id”, “Login”, “First”, “Last”],
colModel:[
{name:”user_id”,index:”objid”,hidden:true},
{name:”login_name”,index:”login_name”,width:70},
{name:”first_name”,index:”first_name”,width:70},
{name:”last_name”,index:”last_name”,width:70}
],
hidegrid:false,
loadonce:true,
imgpath:”../code/jqGrid/themes/basic/images”,
sortname:”login_name”,
sortorder:”asc”,
height:105,
width:225,
loadComplete: function(){
memTot = $(“#memberGrid”).getGridParam(“records”);
if(memTot == null) memTot = 0;
},
multiselect:true
});
The loadMembers.asp page retrieves the data, and the grid control renders the information. Each grid has many properties that can be used to control its appearance and use. Another great benefit is that the columns can all be sorted and resized as needed. Setting the multiselect option to true as shown above is all that is required to allow multiple rows to be selected and processed. The checkbox for each row is generated automatically.
In the previous version, the each user had to be moved one user at a time. By allowing multiple users to be selected, each time one of the arrow buttons is clicked all of the selected rows can be processed as a group. In this example, all of the selected rows from the User grid are processed and added to the Member grid, but not if the user is already there:
var usersToAdd = $(“#userGrid”).getGridParam(“selarrrow”);
var currentMembers = $(“#memberGrid”).getDataIDs();
$.each(usersToAdd, function(i, objid) {
if($(currentMembers).index(objid) < 0) {
var userData = $(“#userGrid”).getRowData(objid);
$(“#memberGrid”).addRowData(objid, userData);
}
});
All of the data that is needed to complete this action is held within the grids themselves, eliminating the need for hidden controls to hold selected row identifiers. These hidden identifiers were updated in the previous version when each row was selected.
Overall, there is much less code to maintain, and it will be much easier to customize and enhance in the future.
| Previous Page | Line Count | New Page | Line Count |
| queue_detail.asp | 528 | queue_detail.asp | 466 |
| grid_queue.asp | 161 | LoadQueues.asp | 83 |
| grid_queue_mem.asp | 97 | LoadUsers.asp | 29 |
| grid_queue_mem2.asp | 113 | LoadMembers.asp | 57 |
| grid_queue_sup.asp | 168 | (uses LoadMembers) | – |
| Total lines of code | 1,067 | 635 |
Taking advantage of the jQuery javascript library and plugins such as jqGrid allow for more focus on adding value to the application, and makes the product better and easier to both use and change.
