i cant find how put a cell with an href in a dojo toolkit datagrid, the version od dojo that am using is 1.6
this is my table
<table id="billsGrid" dojoType="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false">
<thead>
<tr>
<th field="name" width="auto">name</th>
<th field="description" width="auto">Description</th>
<th field="activity" width="auto">activity</th>
</tr>
</thead>
</table>
am getting the data with Json.
You can use formatter function to format a cell. For example, you can declare a JavaScript object that contains all the formatting function.
var myFormatters = {
formatLink : function(value, index) {
return "<a href='#'>" + value + "</a>";
}
};
Then in the grid,
<table id="billsGrid" dojoType="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false" formatterScope="myFormatters" >
<thead>
<tr>
<th formatter="formatLink" field="name" width="auto">name</th>
<th field="description" width="auto">Description</th>
<th field="activity" width="auto">activity</th>
</tr>
</thead>
</table>
You don't need to create a scope object for the formatters, then this formatting functions should be in the global scope and then you can omit the formatterScope attribute in the grid.
dojo grid is escaping html tags by default for security reasons, you can simply enable html tags doing this:
<table dojoType="dojox.grid.DataGrid" escapeHTMLInData="false" ...>
or this if your grid is added programatically
escapeHTMLInData: false
more info here:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
Related
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
I’m using Bootstrap Table http://bootstrap-table.wenzhixin.net.cn/
All rows in the table are linked with data-href=.
All links work correctly after the table is loaded, but when I re-sort the table (i.e. click on "URL" column header), the links no longer work.
Any ideas how to fix it?
Here is a test code:
<table class="table" id="lst_art_adm"
data-toggle="table"
data-striped="true"
data-search="true"
data-sort-name="site"
data-sort-order="asc"
data-mobile-responsive="true"
mobileResponsive="true">
<thead>
<tr>
<th data-field="site" data-sortable="true">Site</th>
<th data-field="url" data-sortable="true">URL</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="mrow" data-href="https://google.com">
<td id="td-id-1" data-sortable="true">Google</td>
<td>google.com</td>
</tr>
<tr id="tr-id-2" class="mrow" data-href="https://yahoo.com">
<td id="td-id-2" data-sortable="true">Yahoo</td>
<td>yahoo.com</td>
</tr>
</tbody>
</table>
$(function(){
$(".mrow").on("click", function (e) {
window.location = $(this).data("href");
});
});
And the jsfiddle
I found a solution myself :)
The table must be included in a div element, i.e. class="mytable".
Then the jquery should be changed like this:
$(function(){
$(".mytable").on("click", ".table tbody tr", function()
window.location = $(this).data("href");
});
});
Then the function will found the row after re-sorting.
I have this bootstrap table where I cannot populate with my data, on data-url im calling a function inside my controler, when I inspect the the object i can see that it loaded correctly but for some reason it not populating the table Am I missing somenthing?
<table id="t_user" class="table table-hover tbl_usr"
data-toggle="table"
data-url="<?php echo site_url('mda_user/tblrefresh')?>"
data-toolbar="#custom-toolbar"
data-click-to-select="true"
data-single-select="true"
data-search="false"
data-show-refresh="false"
data-show-toggle="true"
data-show-columns="true"
data-pagination="true"
data-search="true"
data-height="300"
data-response-handler="responseHandler">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-sortable="true"><?= $id?> </th>
<th data-field="name" data-sortable="true"><?= $name?> </th>
<th data-field="password"> <?=$password?></th>
<th data-field="operate"
data-halign="center"
data-align="center"
data-formatter="operateFormatter"
data-events="operateEvents">
<?=$operation?>
</th>
</tr>
</thead>
</table>
What is the content of your responseHandler(res) function?
eg, I defined my table mostly inline but also with some JS:
$().ready(function(){
$('#myTable').bootstrapTable({
url : "/api/data",
responseHandler: function(res) {
return res.data.content;
}
})
(The response is wrapped in some JSON that I need to remove to pass the pure array to bootstrap-table)
I have a table which I have applied sorting to but to complete this task I would like the classes to change to show carets going up or down based on the sorting.
As you can see I have used the standard SortableMixin within Ember to get the sorting functionality but I'm having trouble changing the class of the individual element which has been clicked.
App.CampaignsController = Ember.ArrayController.extend({
sortProperties: ["id"],
sortAscending: true,
actions: {
sortBy: function(property){
if (this.get("sortProperties")[0] === property){
this.toggleProperty("sortAscending");
} else {
this.set("sortProperties", [property]);
this.set("sortAscending", true)
}
}
}
});
The table I'm I've applied the actions to is below:
<table class="table table-striped table-hover">
<thead>
<tr>
<th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th>
<th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th>
</tr>
</thead>
<tbody>
<td>{{name}}</td>
<td>{{campaign_code}}</td>
</tbody>
</table>
I'm using the sortAscending boolean to dictate what CSS class will appear. My problem is if I click the first heading, the classes on the second heading also change.
How do I get the CSS to change only on the heading that I have clicked?
Your <th> now has state (whether it's sorted, and whether it's ascending or descending), so you should wrap it up in a component. Something like this
<table>
<thead>
<tr>
{{#sortable-th property='name' action='sortBy'}}
Campaign Name
{{/#sortable-th}}
</tr>
</thead>
</table>
The component's template
// templates/components/sortable-th.js
<th>
<i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>
{{yield}}
</th>
and code
// components/sortable-th.js
export default Ember.Component.extend({
sortAscending: true,
click: function() {
this.toggleProperty('sortAscending');
this.sendAction('action', this.get('property'), this.get('sortAscending'));
}
}
That's just a rough outline, try the implementation yourself. But that's how I would start thinking about it.
I have a DataGrid that is loaded from an XML data store, all created declaratively. I'd like to set the sort when the data is loaded. All of the examples I've found deal with doing this programatically and hint that it should be doable Declaratively.
This is the code that creates the datasource.
<head>
<title>Untitled Page</title>
<style type="text/css">
#import "StyleSheet.css";
#import "js/dojotoolkit/dijit/themes/pfga/pfga.css";
#import "js/dojotoolkit/dojo/resources/dojo.css";
#import "js/dojotoolkit/dojox/grid/resources/Grid.css";
#import "js/dojotoolkit/dojox/grid/resources/pfgaGrid.css";
</style>
<script src="js/dojotoolkit/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.XmlStore");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="pfga">
<div dojotype="dojox.data.XmlStore" url="events.xml" jsID="eventStore"></div>
<table dojoType="dojox.grid.DataGrid" store="eventStore" class="pfga" style="height:500px" clientSort="true" jsID="eventGrid">
<thead>
<tr>
<th field="date" width="80px">Date</th>
<th field="description" width="600">Description</th>
<th field="DateID" sortDesc="true" hidden="false">DateSort</th>
</tr>
<tr>
<th field="time" colspan="3">Details</th>
</tr>
</thead>
</table>
</body>
For the record, in dojo 1.5 it's the 'sortInfo' param passed to the Data Grid. It uses the same convention as the 'canSort' function, i.e. a number indicating the column (starting at 1) and the sign indicating the direction of sort.
I added a comment to http://docs.dojocampus.org/dojox/grid/DataGrid to this effect.
For example, this grid is sorted by the 'created' column in 'most recent first' order:
<table dojoType="dojox.grid.DataGrid" clientSort="true" selectionMode="single"
formatterScope="formatterScope" dojoAttachPoint="logGrid" sortInfo="-2">
<thead><tr>
<th field="clientId" width="10%">Client ID</th>
<th field="created" width="20%" formatter="datefmt">Created</th>
<th field="message" width="30%" formatter="messagebodyfmt">Message</th>
<th field="token" width="10%">Token</th>
<th field="type" width="20%">Type</th>
<th field="username" width="10%">Username</th>
</tr>
</table>
Of course your choice of store and the way it understands the sort directives will have further impact, for example I'm using JsonQueryRestStore and the sortInfo param results in the store query including sort syntax based on dojox.data.JsonQuery and the backend handling the query must understand how to sort the data before returning it.
It looks like the Sort started to work once I added the JSID to solve my filtering problem