I want to make a hierarchical data table with angularjs.
For example, it can lower the table and took a table in the first row of the table.
How can I create nested tables this event ?
I wrote how I wanted to do something as an example below.
Please hepl me! Thank you.
Example:
<table>
<thead>
<tr>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
</tr>
<tr>
<td style="margin-left: 10px">
<table>
<thead>
<tr>
<th>Head 1.1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1.1</td>
</tr>
<table>
<thead>
<tr>
<th></th>
</thead>
<tbody>
<tr>
<td>Content 1.1.1</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
First of all - Table in Tables is valid html (see: Is a html table within a table valid?)
Second of all - What is the real question here? You need a controller storing the data you want to display. You can iterate with ng-repeat to get the structure.
It looks like you want to display a Table of Contents. A list is a better option here:
HTML:
<div ng-controller="TableController">
<ul>
<li ng-repeat="c in content">
{{c.header}}
<ul>
<li ng-repeat="cc in c.content">{{cc}}</li>
</ul>
</li>
</ul>
</div>
Controller:
var app = angular.module("tableApp", []);
app.controller("TableController", ["$scope",function($scope){
$scope.content = [
{ header: "Head 1", content: ["Content 1"]},
{ header: "Head 1.1", content: ["Content 1.1", "Content 1.1.1"]}
];
}]);
// See: https://jsfiddle.net/6se8xq41/
see example here
Related
I have a MVC Webgrid with columns that I want to Hide or Show dynamically based on a javascript function after the grid is rendered.
So after the WebGrid is displayed I want to call a javascript function and pass in a ColumnName to Show or hide. Is this possible?
Thanks,
This is how my grid is setup:
#{
var gridColumns = new List<WebGridColumn>();
gridColumns.Add(grid.Column("Id", "Test ID"));
gridColumns.Add(grid.Column("Description", "Test Description"));
gridColumns.Add(grid.Column("ProjectDate", "Test Date", format: #<text> <span>#item.ProjectDate.ToString("d/M/yyyy")</span></text>));
}
<div id="divWebGrid" class="row">
#grid.GetHtml(
fillEmptyRows: false,
tableStyle: "webgrid",
alternatingRowStyle: "webgrid-alternating-row",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns: grid.Columns(gridColumns.ToArray())
)
</div>
And this would be my Javascript code:
function ToggleColumn(columnName)
{
//Some Code to Show or Hide the Column in the WebGrid based on the columnName parameter.
}
Is this possible?
Here is the rendered code of my grid:
<table class="webgrid" data-swhgajax="true" data-swhgcontainer="divWebGrid" data-swhgcallback="">
<thead>
<tr class="webgrid-header">
<th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Id&gridItemsortdir=ASC">Test ID</a> </th>
<th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Description&gridItemsortdir=ASC">Test Description</a> </th>
<th scope="col">
<a data-swhglnk="true" href="/Home/Index?gridItemsort=ProjectDate&gridItemsortdir=ASC">Test Date</a> </th>
</tr>
</thead>
<tfoot>
<tr class="webgrid-footer">
<td colspan="3">1 <a data-swhglnk="true" href="/Home/Index?gridItempage=2">2</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">3</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=2">></a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">>></a></td>
</tr>
</tfoot>
<tbody>
<tr class="webgrid-row-style">
<td>1</td>
<td>test 1</td>
<td> <span>22/7/2016</span></td>
</tr>
<tr class="webgrid-alternating-row">
<td>2</td>
<td>test 2</td>
<td> <span>22/7/2016</span></td>
</tr>
<tr class="webgrid-row-style">
<td>3</td>
<td>test 3</td>
<td> <span>22/7/2016</span></td>
</tr>
</tbody>
</table>
I faced the similar problem in my Grid. And I solved it with the help of css class added on WebGrid columns.
First, I add a class to all those columns which needs to be hidden.
gridColumns.Add(grid.Column("ID", "Test ID", null, "hidden-column"));
Added hide property on class 'hidden-column'
<style>
.hidden-column {
display:none;
}
</style>
It will hide all the columns (td elements) having this class set (in this case, it will hide "ID" column).
To hide Grid headers as well, I called IIFE function on document ready.
(function () {
$('#divWebGrid tbody tr:first').find('td.hidden-column').each(function (i, td) {
var indexOfHiddenColumn = $(td).index();
$('#divWebGrid thead th').eq(indexOfHiddenColumn).addClass('hidden-column');
});
}());
Hope this post will help you to resolve your issue.
I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>
Is it possible to make a tablecolumn editable when using angularjs? I have this table:
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td>{{person.id}}</td>
<td>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>
So I have a $scope.fileNames which is an array containing filenames per person for example:
["Koala.jpg","Tulips.jpg","Tulips.jpg","Hydrangeas.jpg","Lighthouse.jpg","Chrysanthemum.jpg"]
I would like to make this 2nd column editable for the user so he can change/delete the files how can I accomplish this?
Use contentEditable
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td contentEditable>{{person.id}}</td>
<td contentEditable>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>
I'm trying to implement Footable, a JQuery plugin used to make tables responsive. There is an add-on for Footable to add pagination. [Demo]
And (http://fooplugins.com/footable/demos/paging.htm) for using the pagination add-on. I tried following this demo but my pagination came up as a vertical un-ordered list. The buttons are functional but unsightly. Here is a link images which i can not post here because my repuation is not high enough.
Here is my code for the table:
<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
<thead>
<th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
<th>Submission Time</th>
</thead>
<tbody>
<tr ng-repeat="(key, response) in formResponses">
<td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
<td>{{response.submission_time}}</td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td colspan="5">
<div class="pagination pagination-centered"></div>
</td>
</tr>
</tfoot>
</table>
Your footer should look something like this:
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="5" class="text-center">
<ul class="pagination">
</ul>
</td>
</tr>
</tfoot>
You can tell, that's different that what it says in the demo. This link showed me the difference https://github.com/bradvin/FooTable/issues/136.
Here's a plunk to demonstrate the issue: http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM
You need to add both attribute for pagination:
data-page-navigation=".pagination" data-page-size="2" into table tag
(If not placing the pagination in the table footer) Don't use a CSS class for table-to-pagination relationships. Use CSS ID instead.
Consider the following...
BAD - Example using CSS class to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
The footable javascript code will see two pagination objects. Which will be used by table1 and which will be used by table2 is not deterministic. This throws the footable javascript into a tizzy.
Rather than use CSS classes, be more specific by using a CSS ID instead.
GOOD - Example using CSS ID to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation="#pagination1" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination1" class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation="#pagination2" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination2" class="pagination hide-if-no-paging"></div>
Javascript Example:
$(document).ready(function () {
$(".footable").footable();
});
I have this table:
<table id="tblId">
<thead>
<tr>
<th>View Name</th>
<th>View Description</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>Name</td>
<td><span onclick="jsFunction()">description</span></td>
</tr>
<tr id="2">
<td>Name</td>
<td><span onclick="jsFunction()">description</span></td>
</tr>
</tbody>
</table>
In the onclick event of each span I need to send the js function the row id of that specific row. How do I do that?
One way is you can send "sender" data with jsFunction as below,
... onclick="jsFunction(this)" ....
In your jsFunction you can find tr element,
function jsFunction(sender){
var tr = sender.parentNode.parentNode;
alert( tr.getAttribute('id') );
}