I have a JSON as given in the link and i want it to display it in a table. i had various options for that and i can able to bring it successfully in that table i also have an extra column for edit and view buttons. i'm facing my difficulty in the view option. i wanted the the particular selected row should be displayed as below
I tried ngHandsontable but the problem i'm facing is i can't able to populate the values in exact cells as i want in the above merged cells and also each row has different entities in my required table. This is a table and i hope it is possible to make it display in the way i want in angularjs.
Can some one help me to solve this
Thanks in advance
note:
I am trying to bring this table below the first table i use ng-show directive for this table so only when the view option clicked it will open on the same page
The below table is 16x4 cells table images and chart has a rowspan=4
images has a colspan=2 and chart has a colspan=4
Example: http://jsfiddle.net/kevalbhatt18/sjpyffd8/1/
I have done with basic functionality. Now apply css on table
<div ng-controller="MyCtrl">
<div ng-repeat="line in parent">
<div class="header">{{line.name}}</div>
<table>
<tr>
<td ng-repeat="satellites in line.satellites">{{satellites.name}}
<div>{{satellites.image}}</div>
</td>
</tr>
<tr>
<td ng-repeat="continents in line.continents">{{continents.name}}
<div>{{continents.image}}</div>
</td>
<tr/>
</table>
<div class="header">Population</div>
<div>{{line.population.graph}}</div>
</div>
</div>
Related
I am fetching list of posts with sort order from Database and binding with table using ng-repeat of rows. I set them up so you can reorder them with drag-and-drop using Angular Dragula. This works fine.
After dragging, Whenever I click on save button I should get Updated Sort Order, So that I can update it on Database.
Before Drag:
Let Suppose post_sort_order:1,2,3,5
After Drag :
post_sort_order: 4,2,3,1
HTML:
<tbody md-body ui-sortable >
<tr md-row>
<td>
<div dragula-model="vm.GroupData.groups" class="drag-container" dragula='"drag-container"' layout="column" layout-xs="column" layout-align="space-between" layout-margin>
<tri-widget ng-repeat="order in vm.GroupData.groups" flex title="{{::order.group_name | triTranslate}}" title-position="top" palette-background="blue-grey:600" background="primary"></tri-widget>
</div>
</td>
</tr>
</tbody>
Javascript:
Result: vm.GroupsData.groups:
Now, Once I click on Save button, I should get updated sort list like here 4,3,2,1.
Actual post_sort_order: 1,2,3,5
Expected post_sort_order:3,1,5,2
Is there a way to get updated list ?If yes, Please let me know.
Thanks in advance.
For purposes that are very central to my apps purpose, I display text content in an HTML table in a UIWebView. Here is an example of what that HTML looks like:
<table width = "100%">
<tbody>
<tr>//Row 1
<td>
<div id = "guid">
Here is the text of the first row, first cell in the table
</div>
</td>
<td>
<div id = "guid">
Here is the text of the first row, second cell in the row
</div>
</td>
</tr>
<tr>//Row 2
<td>
<div id = "guid">
Here is the text of the second row, first cell in the row
</div>
</td>
<td>
<div id = "guid">
Here is the text of the second row, second cell in the row
</div>
</td>
</tr>
</tbody>
</table>
Again, it might not seem like I need to use a table, but it is essential to other functionality of the app - more s can be added to the same row.
I am trying to add a highlight tool to my app, and am running into some issues due to the fact that I am working with a table. Here is an example of the type of selection I am trying to make (same structure, different content):
Once the selection is made, it is quite easy to set a highlight to the text using execCommand. Quite easy if there is only one column of data that is. Take a look at what happens when I try and highlight the selection I made above:
It highlights the cell from the other column! The reason I am using a table is that I need to make sure that each block of text in the row (within the tr/td tags) starts at the same time, even though they could have varying heights, and one could be longer than the other and make the row taller as a result. This approach ensures unity at the row level.
Anybody have any ideas what I could do to fix this?
I have a html grid that returns a checkbox with each row. Currently I have these bound with knockout to my viewmodel. I've gotten far enough to capture the id of what is checked for a row but I'm not sure how to make Knockout give me a list of all rows checked and the content of every cell for the row.
Ultimately the intent is to let users select multiple rows from this table and then export that data. So I need a good way to gather the entire row up.
I've only been using Knockout for about a week so am I trying to get it to track something that perhaps I'd be better of just looping through the table with javascript?
<tbody data-bind="foreach: projectListing">
<tr data-bind="css: $data.rowclass">
<td><input type="checkbox" data-bind="value: $data.id, checked: $root.selectedRows, click: $root.toggleRowSelection"/></td>
<td data-bind="text: $data.SORT_ID"></td>
<td data-bind="text: $data.PROJ_ID"></td>
</tr>
</tbody>
*I know that code isn't enough to go on but I had to put something in here so I could list a link to jsFiddle.
I have a fiddle going that represents this to show code I have so far. What I'd like to do with this fiddle is each time I check the checkbox, the entire row content should show up. That would get me to the place I need to be in my real project.
Any ideas on how to go about this?
Here is what I have so far.
http://jsfiddle.net/robhortn/ad2Yu/4/
Instead of getting the id with the checked binding, you can create a selectedItems computed to get the selected items objects
self.selectedItems = ko.computed(function() {
return self.availableItems().filter(function(item) {
return item.Selected();
});
});
Html
Selected Books:
<div data-bind="foreach: $root.selectedItems">
<span data-bind="text: Name"></span>
<br/>
</div>
See this JSFiddle
Really need your help.
I have a table that can dynamically add and delete row. But the problem is I want to delete the row of the table based on div id. I mean, on one column for every row of table i have div id which are auto increment. Then, I want to delete the row based on the div id. Is that possible?
Thanks a lot.
You can do this really easy with jQuery.
http://jsfiddle.net/KWPWr/1/
$('#d2').closest('tr').remove();
Yes.
$('#row-id').closest('tr').fadeOut(200, function() { $(this).remove(); });
The above will first select the div, then find the table row it exists in, fades it out and the removes it.
If your table looks like this:
<table>
<tbody>
<tr>
<td>
<div id="01"></div>
</td>
</tr>
<tr>
<td>
<div id="02"></div>
</td>
</tr>
</tbody>
</table>
You can use document.getElementById(DIVID).parentNode.parentNode to access the <tr> Element.
I have a table on my site that contains the options for different products. I didn't put it there, the ecommerce platform did. It lists the options in a row in the table. The table looks like this:
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
<td> </td>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
Then if there were another option it would be in an additional row with the same markup.
This renders with the label (size in this case) out in front of the <select> box. I want the label above the <select> box and I figured the easiest way to accomplish this would be to close the <tr> and open a new one. Any ideas on how to do this?
EDIT: I should mention that the ecommerce platform generates the html and I do not have access to the source code
Assuming that it follows that exact structure, try this:
$(".attributes select").each(function(){
$label = $(this).parent().prev().prev();
$label.parent().before("<tr></tr>");
$label.parent().prev().append($label.clone());
$label.remove();
$(this).parent().prev().remove();
});
Here's an example: Demo
Like so?
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
</tr>
<tr>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
I think you have to do it in two steps:
remove the elements:
$('.attributes').find('tr:first-child').remove();
$('.attributes').find('tr:first-child').remove();
2.append them back in the same place
$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');