JQuery flexigrid example


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript" src="<%=request.getContextPath()%>/display/jquery-1.5.2.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/display/flexigrid/js/flexigrid.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/display/accordion/style.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/display/flexigrid/css/flexigrid.css"/>
<style>
.flexigrid div.fbutton .edit
{ 
background: url('<%=request.getContextPath()%>/display/flexigrid/css/images/magnifier.png') no-repeat center left;
}
.flexigrid div.fbutton .delete
{ 
background: url('<%=request.getContextPath()%>/display/flexigrid/css/images/close.png') no-repeat center left;
}
.titlebg
{
color: #5F5A59;
font-size: 14px;
background-color: #ddffdd;
width:100px!important; /*IE Fix Required*/
border: 1px solid #CCC!important;
background-image:url('<%=request.getContextPath()%>/display/images/main/tb.gif');
}
</style>
<script type="text/javascript">
 
 $(document).ready(function() { 
 //getting parent window val
 var id = parent.document.getElementById("idM").value;
 if(id != 'null' & id !='') {
 readCommand(parent.document.getElementById("idM").value); 
 }
 
 $('#flexme1').flexigrid(
 { 
 url: '<%=request.getContextPath()%>/profile/usermessages.k',
 type: "GET", 
 dataType: "json",
 colModel : [
 {display: 'Row ID', name : 'id', width : 100, sortable : false, align: 'left', hide: true}, 
 {display: 'From', name : 'fromuser', width : 100, sortable : true, align: 'left'},
 {display: 'To', name : 'to', width : 100, sortable : true, align: 'left'},
 {display: 'Subject', name : 'subject', width : 150, sortable : true, align: 'left'},
 {display: 'Advert', name : 'advert', width : 150, sortable : false, align: 'left'},
 {display: 'Date Send', name : 'datesend', width : 150, sortable : true, align: 'left'}
 ],
 buttons : [
 {name: 'Read Message', bclass: 'edit', onpress : doCommand},
 {name: 'Delete', bclass: 'delete', onpress : doCommand},
 {separator: true}
 ],
 sortname: "idmessage",
 sortorder: "desc",
 usepager: true,
 title: 'Your Messages',
 useRp: true,
 rp: 15,
 showTableToggleBtn: true,
 width: 680,
 height: 200,
 singleSelect: true,
 resizable: false,
 preProcess: formatData 
 }
 );
 
 });

 function doCommand(com, grid) {
 var total_count = $('.trSelected', grid).length;
 if(total_count == 0)
 alert('Please first select a message');
 $.each($('.trSelected', grid), function() {
 var id = $('td:nth-child(1) div', this);
 if(com == 'Read Message')
 readCommand(id.html());
 else
 deleteCommand(id.html());
 
 });
 }

 function formatData(data) { 
 var rows = Array(); 
 $.each(data.rows,function(i,row){ 
 //id can be mapped to any attribute of the return object in the list 
 //alert('idadvert type ' + row.idAdvertType);
 if(row.status == '1') {
 if(row.total > 1) { 
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU + ' (' + row.total + ')',row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Advert</a>',row.dateView]});
 }else if (row.idAdvertType == 2) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU + ' (' + row.total + ')',row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Wanted Advert</a>',row.dateView]}); 
 }
 } 
 else {
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU ,row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Advert</a>',row.dateView]});
 }else if (row.idAdvertType == 2) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU ,row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Wanted Advert</a>',row.dateView]}); 
 }
 } 
 } 
 else {
 if(row.total > 1) { 
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + ' (' + row.total + ')' + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Advert</a></span>', '<span style="color:green">' +row.dateView + '</span>']});
 }else if (row.idAdvertType == 2) { 
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + ' (' + row.total + ')' + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Wanted Advert</a></span>', '<span style="color:green">' +row.dateView + '</span>']}); 
 }
 } else {
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Advert</a>', '<span style="color:green">' +row.dateView + '</span>']}); 
 }else if (row.idAdvertType == 2) { 
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Wanted Advert</a>', '<span style="color:green">' +row.dateView + '</span>']}); 
 }
 
 }
 
 } 
 }); 
 return { 
 total:data.total, 
 page:data.page, 
 rows:rows 
 }; 
 } 
</script>
</head>
<body>
 
<table id="flexme1" style="display:none">
<tr><td></td></tr>
</table>
<div id="panelLoading" style="display:none" > 
 <pre style="font-size: 12px;color:green;" ><b>Loading...</b></pre>
</div>
<div id="panelSuccess" style="display:none" > 
 <pre style="font-size: 11px;color:green;" ><b>Message has been sent successfully.</b></pre>
</div>
<table id="messagesTable" border="1px" style="width: 680px;margin-top: 10px;border-color: #568C00;border: thin;" >
 <tbody id="fromTo" style="display: none;"> 
 <tr>
 <td class="titlebg" >From:</td>
 <td style="color: #568C00;font-size: 14px;border: 1px solid #CCC!important;"><span id="from"></span></td></tr> 
 <tr>
 <td class="titlebg" >To:</td>
 <td style="color: #568C00;font-size: 14px;border: 1px solid #CCC!important;"><span id="to"></span>
 <input type="hidden" id="idUser">
 <input type="hidden" id="idTenant">
 <input type="hidden" id="idAdvert">
 <input type="hidden" id="fromU">
 <input type="hidden" id="toU">
 </td>
 </tr>
 </tbody>
 <tbody id="iteratingBody"> 
 </tbody>
 <tr>
 <td colspan="2" style="height:10px;border: 0px "></td>
 </tr>
 <tbody id="reply" style="display: none;"> 
 <tr> 
 <td colspan="2" align="left" style="border: 0px "> 
 <table>
 <tr>
 <td style="color: #568C00;border: 0px;font-size: 14px;" width="60px!important">Subject:</td>
 <td style="color: #568C00;border: 0px;font-size: 14px;" align="left"><input style="width:600px!important;background-color: #FFF6AF;" id="subject" type="text"/></td>
 </tr>
 <tr>
 <td style="color: #568C00;border: 0px;font-size: 14px;" width="60px!important">Content:</td>
 <td style="color: #568C00;border: 0px;font-size: 14px;" >
 <textarea id="content" style="resize: none;width:600px;height:200px;background-color: #FFF6AF;"></textarea>
 </td>
 </tr> 
 </table>
 </td>
 <tr>
 <td colspan="2" align="center" style="color: #568C00;border: 0px">
 <input type="hidden" id="l" value="<%=response.getLocale()%>"/>
 <div id="panelInfo" style="display: none"> 
 <pre id="panelInfoPre"><b>Message is sending, please wait...</b></pre>
 </div>
 <div id="replyButton">
 <input id="searchButton2" name="formNext1" type="button" class="searchbutton" value="Reply" onclick="doAjaxPost()"/>
 </div>
 </td>
 </tr>
 </tbody>
 </table>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s