I am using Angular 1.6. I have a dynamic table for which I have to freeze the header and left 3 columns. Please Help if there is any directive to do the same. I have tried all options available in net using CSS and jquery plugin but in vein. Please help
div {
width: 300px;
overflow-x:scroll;
margin-left:50px;
overflow-y:visible;
padding-bottom:1px;
}
td {
padding: 0 40px;
}
table tr td:first-child{
position:absolute;
width:50px;
left:0;
}
<div>
<table>
<tr>
<td></td>
<td>Walter</td>
<td>Mike</td>
<td>Nancy</td>
</tr>
<tr>
<td>Age</td>
<td>30</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td>Gender</td>
<td>Male</td>
<td>Female</td>
<td>Male</td>
</tr>
<tr>
<td>Company</td>
<td>ABC</td>
<td>BBC</td>
<td>BFG</td>
</tr>
</table>
</div>
Related
I am working with this data in Apache OpenOffice 4.1.2 with the goal of a vlookup that allows for cross sheet lookup of data in Sheet1 being added to Sheet2 base on the column pn. Here is the equation I have now but its not lining up right now. Any suggestions/corrections welcome.
In Sheet 2 using this.
=VLOOKUP(A2; Sheet1.A2:Sheet1.C500; 2; 1)
From What I understand Im expecting the code to return the information in the name column from Sheet1 based on the match of the pn column across all 500 rows.
Sheet1<br>
<table>
<thead>
<tr>
|<th>code</th>|
|<th>name</th>|
|<th>pn</th>|
</tr>
</thead>
<br>
<tbody>
<tr>
|<td>111</td>|
|<td>one</td>|
|<td>101</td>|
</tr>
<br>
<tr>
|<td>112</td>|
|<td>two</td>|
|<td>102</td>|
</tr>
</table>
<br>
Sheet2<br>
<table>
<thead>
<tr>
|<th>pn</th>|
|<th>qty</th>|
|<th>cur</th>|
</tr>
</thead>
<br>
<tbody>
<tr>
|<td>102</td>|
|<td>200</td>|
|<td> $ </td>|
</tr>
<br>
<tr>
|<td>101</td>|
|<td>150</td>|
|<td> $ </td>|
</tr>
</table>
Have anyone of you any suggestion, how to iterate through a multidimensional list in Thymeleaf?
My multidimensional list looks as follow:
#Override
public List<List<PreferredZone>> findZonesByPosition(List<Position> positionList) {
List <PreferredZone> prefZone = new ArrayList<>();
List<List<PreferredZone>> listPrefZone = new ArrayList<>();
long positionId = 0;
for (int i = 0; i < positionList.size(); i++) {
positionId = positionList.get(i).getPositionId();
prefZone = prefZoneDAO.findFilteredZone(positionId);
listPrefZone.add(prefZone);
}
return listPrefZone;
}
In my controller as attribute:
List<List<PreferredZone>> prefZoneList = prefZoneService.findZonesByPosition(positionList);
model.addAllAttributes(prefZoneList);
Finally I try to iterate this two dimensional list in a HTML table:
<table th:each="prefList :#{prefZoneList}" class="table table-striped display hover">
<thead>
<tr>
<th>ISO</th>
<th>Name</th>
<th>Ausschluss</th>
</tr>
</thead>
<!-- Loop für die Daten -->
<tr th:each="row, iterState :${prefList}" class="clickable-row">
<td th:text="${row[__${iterState.index}__]}.zoneIso"></td>
<td th:text="${row[__${iterState.index}__]}.zoneName"></td>
<td style="text-align:center;">
<input type="checkbox" th:value="${${row[__${iterState.index}__]}.zoneId}" id="zone" class="checkbox-round" />
</td>
</tr>
</table>
It doesn't work however. I don't have any other idea how to solve this.
I have to have a multidimensional list, because I have got a table with multiple records and each record contains a button to open a modal window. Each of this windows contains either a HTML table where I have to display the records.
Have you got any suggestion for me?
You have a mistake in #{prefZoneList} and (as noted in comments) in using iterState.index
Try it:
<table th:each="prefList : ${prefZoneList}" class="table table-striped display hover">
<thead>
<tr>
<th>ISO</th>
<th>Name</th>
<th>Ausschluss</th>
</tr>
</thead>
<tr th:each="row : ${prefList}" class="clickable-row">
<td th:text="${row.zoneIso}"></td>
<td th:text="${row.zoneName}"></td>
<td style="text-align:center;">
<input type="checkbox" th:value="${row.zoneId}" id="zone" class="checkbox-round" />
</td>
</tr>
</table>
Syntax #{...} - a message Expressions
iterState.index is the current iteration index, starting with 0, using like ${prefList[__${iterState.index}__].element} where element - filed in prefList.
I have a master query that I output that gives me a list of sports. Then I have two sub queries that give me Query1: person information on who is in each sport, and Query2: Sport books the the people from query 1 have. I am trying to output a table row as a sort of header for each sport, then additional rows for the query data. I would like to break a page after every sport so I don't have a sport description row on the bottom of a page with the rest of the data on the next.
I have tried adding in every spot imaginable, but I always end up with blank pages equaling the recordcount of the getsports query at the beginning of the document.
Here is the code I am using. I have removed the actual query data. Does anyone have any suggestions or thoughts on what I am doing wrong?
<cfquery name="getterm" datasource="DS1">
select * from dbo.semester where current = 1
</cfquery>
<cfquery name="getsports" datasource="DS1">
SELECT * FROM [sports]
</cfquery>
<body>
<div id="wrap">
<cfinclude template="header.cfm">
<!-- header end -->
<div class="container" style="padding-top:0px;">
<cfdocument format="PDF" mimetype="application/pdf" orientation="landscape">
<table width="100%" cellspacing="0" cellpadding="0" topmargin="0" leftmargin="0" border="0" style="font-size:10px">
<tr>
<td colspan="8" bgcolor="#e3edef" style="padding-top:10px; padding-bottom:10px; padding-left:2px; font-family:Arial;" align="center">Books Not Issued -
<cfoutput>#yearOfSport#</h1>
</cfoutput>
</td>
</tr>
<cfoutput>
<cfloop query="getsports">
<tr>
<td colspan="8" style="padding-top:10px; padding-bottom:10px; padding-left:2px; font-family:Arial;" align="center">
<h1>#getsports.descr# </h1>
</td>
</tr>
<cfquery name="getbooks" datasource="DS1">
...
</cfquery>
<cfloop query="getbooks">
<cfquery name="getbooks2" datasource="DS1">
...
</cfquery>
<tr>
<td align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>ID</h4></td>
<td align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>Name</h4></td>
<td colspan="4" align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>Sport</h4></td>
</tr>
<tr>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#id#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#nameLast#, #nameFirst#, #nameMiddle# </td>
<td colspan="4" align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#sport#</td>
</tr>
<tr>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Class</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">ISBN</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Title</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Author</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Status</td>
</tr>
<cfloop query="getbooks2">
<tr>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.subject#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.ISBN#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.title#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.author#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.status#</td>
</tr>
</cfloop>
</cfloop>
</cfloop>
</cfoutput>
<cfdocumentItem type="footer">
<table width="100%" style="font-size:10px;">
<tr>
<td style="font-family:Arial;" align="left">
<cfoutput>Page #cfdocument.currentpagenumber# of #cfdocument.totalpagecount# - #dateformat(now(), "mm/dd/yyyy")#</cfoutput>
</td>
</tr>
</table>
</cfdocumentItem>
</div>
</table>
</cfdocument>
</div>
<!-- Container end -->
<div id="push"></div>
</div>
<cfinclude template="footer.cfm">
</body>
Disclaimer: I have no idea what is in those header and footer files..but the header and footer is outside of the cfdocument tag. I usually don't do that but maybe there is a reason why you do.
In order to get my breaks in looping data I add this (below) to the end of my loops, and sometimes I add a counter incase I need more surgical control.
<div style="page-break-before:always"> </div>
And it just works.
If you need to get some precision. I would run your page without the cf document and get the source output from the browser and start to figue what you need, don't need and where you want your breaks to occur.
Then take that and just wrap cfdocument around the raw HTML output and see if you get the desired effects.
If you data is enourmous, then grab a subset so limit your results so you can manage a smaller chuck of that report.
One other things I do for my sanity.
I use cfsavecontent and set all my HTML output to a variable and then stuff it into cfdocument so I am not mixing-it-up so to speak...
Example:
<cfsavecontent variable="buildUpReport">
<cfinclude template="header.cfm">
nested looping ad nauseum...
<div style="page-break-before:always"> </div>
more ad nauseum looping...
<cfinclude template="footer.cfm">
</cfsavecontent>
<cfdocument localUrl="yes"
format="PDF"
mimetype="text/html"
marginbottom="0.15"
margintop="0"
marginright="0"
marginleft="0">
<cfoutput>#buildUpReport#</cfoutput>
<cfdocumentitem type="footer" evalatprint="true">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td align="center">
<cfoutput>
#cfdocument.currentpagenumber# of
#cfdocument.totalpagecount# |
#dateformat(now(),"mm-dd-yyyy")#
</cfoutput>
</td></tr>
</table>
</cfdocumentitem>
</cfdocument>
Thanks for the suggestions. I ended up including additional table tags inside my main output. Once I did that the page breaks worked correctly. I think the way I was doing it before was breaking the table structure.
In my code repeater is nested in datalistdatalist contains checkboxes and radiobutton
i want to do database operation on checkchanged of checkboxes,so i had written this operation on repeater itemcomand. Here I am not able to find control of repeater.so please guide me how to find control of repeater.
My design is like this:
<asp:DataList ID="DatalistQues" runat="server" DataKeyField="QuestionID" OnSelectedIndexChanged="DataListText_SelectedIndexChanged"
Width="100%" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<table width="100%">
<tr>
<td style="width: 13%">
<asp:LinkButton ID="LinkButton6" runat="server" CommandName="Select" CssClass="ppppp">
<asp:Image ID="Image1" runat="server" ImageUrl='<% #Eval("Image")%>' Height="60px"
Width="65px" />
</asp:LinkButton>
</td>
<td style="width: 87%">
<asp:LinkButton ID="LinkButton7" runat="server" CommandName="Select" CssClass="ppppp">
<asp:Label ID="Label3" runat="server" Text='<% #Eval("name")%>'></asp:Label>
</asp:LinkButton>
</td>
</tr>
<tr>
<td style="width: 13%">
</td>
<td style="width: 87%; white-space: pre-line">
<asp:Label ID="TextBox2" runat="server" Text='<% #Eval("Question")%>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 13%">
</td>
<td style="width: 87%">
<script type="text/javascript" language="javascript">
function fnCheckUnCheck(objId) {
var grd = document.getElementById("TabContainer1_TabPanel2_DatalistQues");
alert(grd);
//Collect A
var rdoArray = grd.getElementsByTagName("input");
alert(rdoArray);
for (i = 0; i <= rdoArray.length - 1; i++) {
if (rdoArray[i].type == 'radio') {
if (rdoArray[i].id != objId) {
rdoArray[i].checked = false;
}
}
}
}
</script>
<asp:Repeater ID="RepeaterQues" runat="server" OnItemCommand="Repeater1_ItemCommand">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<table style="border: none">
<tr>
<td style="width: 100px">
<asp:LinkButton ID="LinkButton23" runat="server" CommandName="radiob">
<asp:RadioButton ID="RadioButton1" runat="server" onclick="fnCheckUnCheck(this.id);" /></asp:LinkButton><asp:LinkButton
ID="LinkButton24" runat="server" CommandName="checkb">
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%#Eval("QOption") %>' /></asp:LinkButton>
</td>
<td style="width: 100px">
<asp:Label ID="empname" Text='<%#Eval("QOption") %>' runat="server"></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Try this
((Repeater)e.Item.Parent).ID // this gives the ID as specified on the aspx page
If you need Unique ID, you have to use this
((Repeater)e.Item.Parent).ClientID
On Item command of Repeater you will have to first find the naming container of sender
it will return you datalist item.
then in returned list item you will have to find the repeater of that particular data list itme
once you will find the repeater you can easily find the controls of the item of repeater
I got a coldfusion query where the result is grouped on country names. With a click on this one, I try to open or close the list under the country. But i cannot work correctly with this siblings and this parents. The result is, if i click on a country name, the fourth one, for example, it close all childrens, and the three country name which are before too.
Can someone help me to choose the right selectors ?
Thank you in advance ,
Michel
The code:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var toggleMinus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_minus.png';
var togglePlus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_plus.png';
var $subHead = $('table#categorylist tbody th:first-child');
$subHead.prepend('<img src="' +toggleMinus+ '" alt="collapse this section" /> ');
$('img', $subHead).addClass('clickable').click(function(){
var toggleSrc = $(this).attr('src');
if(toggleSrc == toggleMinus){
$(this).attr('src',togglePlus).parents('.country').siblings().fadeOut('fast');
}else{
$(this).attr('src',toggleMinus).parents('.country').siblings().fadeIn('fast');
}
});
});
</script>
<table width="95%" border="0" cellspacing="2" cellpadding="2" align="center id="categorylist">
<thead>
<tr>
<th class="text3" width="15%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODENUMBER">
</th>
<th class="text3" width="15%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODE">
</th>
<th class="text3" width="55%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_NAME">
</th>
<th class="text3" width="15%">
<cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTIVE">
</th>
</tr>
</thead>
<tbody id="content">
<cfoutput query="qryCategoryUrl" group="country_name" groupcasesensitive="false">
<tr class="country">
<th style="font-weight:bold; text-align:left;" colspan="4">#country_name#</th>
</tr>
<cfoutput>
<tr>
<td valign="top" class="text3">#Replace(ACTOR_CODENUMBER, Chr(13) & Chr(10), "<br>", "ALL")# </td>
<td valign="top" class="text3">#Replace(ACTOR_CODE, Chr(13) & Chr(10), "<br>", "ALL")# </td>
<td valign="top" class="text3">#Replace(ACTOR_NAME, Chr(13) & Chr(10), "<br>", "ALL")# </td>
<td valign="top" class="text3"><cfmodule template="../custom_tags//get_message.cfm" keyName="#ACTIVE_display(qryCategoryUrl.ACTIVE)#"></td>
</tr>
</cfoutput>
</cfoutput>
</tbody>
</table>
Instead of:
.parents('.country').siblings().fadeOut('fast');
Try this:
.closest('.country').nextUntil('.country').fadeOut('fast');
And of course, apply the same change to the .fadeIn(). You might also look into .fadeToggle()docs.
Here's a (reduced) example: http://jsfiddle.net/redler/5sqJz/. While it doesn't affect the example, presumably you would be setting the initial state of those detail rows as hidden.
woah all that cfmodule usage, cfmodule can be a memory hog.
Although what I always recommend is that people try their pages in whatever browser, and use the SelectorGadget bookmarklet at http://www.selectorgadget.com/
This makes it easier to test and check the correct selector, for your app needs.