According to Table documentation of Ant Design, it seems that there is no way to render Table manually, e.g.:
// Possible
<Table dataSource={dataSource} columns={columns} />
// Impossible
<Table>
<Row>
<Col></Col>
</Row>
</Table>
Am I misunderstanding Ant Design Table? Is there a way to achieve this?
Related
I'm using jsreport and using jsrender engine to generate PDF reports.
I want to print some variables on all the pages (but not in the page header or footer), and also a header of a table should appear on all pages. How Can I specify to print something on all pages ?
Thank you.
This could be potentially do-able with thead tag, which by default prints on each page of the long table
<table>
<thead>
<tr><td>Repeated thing here</td></tr>
</thead>
<tbody>
<tr>....</tr>
</tbody>
</table>
Unfortunately this is very buggy in all printing engines, so you may have problems with it, some workarounds are mentioned here https://github.com/ariya/phantomjs/issues/10927
Not sure if this is possible, but I have some HTML in a DB column which I want to display in a Table TD cell in a Razor View. However the issue is that I only want the first 300 chars followed by "..."
ie:
<h2>My Test</h2>
<p>My Test description is very long</p>
So if I return the first 25 chars for the purpose of this question plus "...", I would get:
<h2>My Test</h2>
<p>My Tes ...
Which would then upset the containing page, due to the invalid HTML
ie
<table>
<tr>
<td>
<h2>My Test</h2>
<p>My Tes ...
</td>
</tr>
</table>
Is there a way round this?
At the moment I am using:
#Html.Raw(Model.myTestHtml)
to display the test HTML.
Perhaps I can only strip out the text from the HTMl and then .substring this.
Thanks appreciated.
If the html is not dynamic and it always follows same pattern, you may:
Parse the html to xml content
use LINQ2XML and find the node you want in there
edit that text and replace the additional parts with (...)
parse back to html
render it
LINQ2XML is very reliable. I am not sure if you can find dependencies which does same work as it with same level of accuracy and performance. but if you do find it, then you would not need to parsing in the process(to xml and from xml)
This question already has answers here:
Parse table using Nokogiri
(3 answers)
Closed 8 years ago.
how can i fetch the tr which mention in code of this structure in nokogiri of in html response
<html>
<body>
<table>
</table>
<table>
<tbody>
<tr>
<td>
<table>
<tr></tr>
<tr><td> wanna this text as output.</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I prefer using the CSS accessors as they're more forgiving. Using your HTML sample, I'd use:
irb(main):026:0> doc.search('table table tr').last.text
" wanna this text as output."
Alternately, the XPATH accessor is:
irb(main):042:0> doc.search('//table//table//tr').last.text
" wanna this text as output."
You're looking for the nested table containing multiple rows. You want the last row.
Be wary whenever you look at the HTML inside a browser and see a <table><tbody> combination. Browsers do a lot of code fix-up, which can result in tags that are not there when you retrieve the HTML directly and pass it into a parser. And, those non-existing tags you see in the browser's output will throw off your CSS or XPath access when you add them in. In particular, <tbody> is a real common problem.
There are multiple ways to access that text, for instance:
html = Nokogiri::HTML my_html_string
row_text = html.at('//table[2]/tbody/tr/td/table/tr[2]').text
I am using ui:repeat tag which render images. I have five images i want that on each iteration my image get ids like image1, image2, image3.... imagen. I tried this but it is not working.
<div id="imageGallery">
<ui:repeat value="#{countryPages_Setup.images}" var="image" varStatus="status">
<tr>
<td>
<a href="javascript:void()" class="launchLink">
<p:graphicImage id="image#{status.index}" //problem
value="/resources/images/#{image}"
width="100"
height="100"
rendered="#{countryPages_Setup.renderImages}"/>
</a>
</td>
</tr>
</ui:repeat>
</div>
I also tried {staus.index + 1}. I also tried id= image#{1++} But it is also not working. How can i do it?
Thanks
You can use EL in the id attribute, but it has to be available during view build time. The <ui:repeat> however runs during view render time, it will reuse the same <p:graphicImage> to generate multiple HTML <img> elements. It doesn't run during view build time, so the id remains image.
If you replace <ui:repeat> by <c:forEach>, then it'll work as you intented. The <c:forEach> runs during view build time and it will generate multiple <p:graphicImage> components which will then each get rendered only once.
<div id="imageGallery">
<c:forEach items="#{countryPages_Setup.images}" var="image" varStatus="status">
<tr>
<td>
<a href="javascript:void()" class="launchLink">
<p:graphicImage id="image#{status.index}"
name="images/#{image}"
width="100"
height="100"
rendered="#{countryPages_Setup.renderImages}"/>
</a>
</td>
</tr>
</c:forEach>
</div>
You cannot use el expressions within the id attribute. It needs to be static. The ui:repeat itself generates a prefix to your id. You don't need to care about uniqueness.
So, for instance if you have an id="image", then the generated ids are
somePrefix:0:image, somePrefix:1:image, ...
But you can use variable in Javascript, for example:
<h:graphicImage ... onclick="top.location.href='http://blabla.com/imageclicked?id=#{status.index}'"/>
You can also use Variables with event handlers (since JSF 2.0):
<h:commandLink ... action="#{myBean.imageClicked(status.index)"/>
But your loop with c:forEach can cause problems. Be aware that the JSTL tags (everything that begins with c:) are not fully compatible to JSF. If you have luck, then they work as expected. But anyways the slow down the rendering engine, since the page gets processed multiple times by the JSF and JSP rendering engine.
Better use ui:repeat.
Just change <ui:repeat> to <c:forEach>
Are we allowed to have multiple content roles in a page?
The documentation suggests there should be one but doesn't explicitly say that there should only be one
I have been using the content roles to provide a logical grouping of areas of my pages.
This also provides padding and background gradients to give a nice separation of grouped elements, without the addition of my own css - we have avoided adding css where possible to allow the upgrade path to be as easy as possible
If so, is there any other role which would be better suited or should I be using standard ui- CSS rules?
.. like ui-body or can you suggest an other?
Would there be any place for a 'section' role which would do the same job?
Many thanks, Ant
originally asked here https://forum.jquery.com/topic/multiple-content-roles
Have you looked at fieldset, which I'm using quite a bit. Also gives you legend as sort-of section header
Another nice combination I'm using is JQM collapsibles with the 1140 CSS grid. The Grid allows to do rows of max 12 cells, like so:
<container>
<row>
<cell1><cell2><cell3><cell4><cell5>...<cell12>
// cells can be anything from 1-12, so 4/4/4, 2/4/4/2...
</row>
<row>
// new row
</row>
</container>
On smartphone the cells change to 100% width, so you will have:
<container>
<row>
<cell1>
<cell2>
<cell3>
<cell4>
<cell5>
...
<cell12>
</row>
</container>
I'm mixing this with collapsibles (no additional CSS needed) like so:
<container>
<collapsible-set>
<collapsible-1>
<row>
<cell><fieldest><content>
<cell><fieldest><content>
<row>
</collabsible-1>
<collapsible-2>
<row>
<cell><fieldest><content>
<cell><fieldest><content>
<row>
</collabsible-2>
...
Looks nice on Smartphone and Tablet. I'm using it for long forms mostly.