I have get a easyui-datagrid from a php file. I want insert a buttons on a colum, but I don´t know how to do it...
This is my code
<table id="dg_lineas_albaran" class="easyui-datagrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb_lineas_albaran',
onClickRow: onClickRow
">
<thead>
<tr>
<th id="combo_productos" data-options="field:'cod_producto',width:60,
formatter:function(value,row){
return row.cod_producto;
},
editor:{
type:'combogrid',
options:{
panelWidth: 500,
idField: 'cod_producto',
textField: 'cod_producto',
mode: 'remote',
url: 'get_productos_combo.php',
columns: [[
{field:'cod_producto',title:'Cod_producto',width:50,sortable:true},
{field:'descripcion_producto',title:'Descripcion',width:150,sortable:true},
]],
fitColumns: true,
}
}
">CODIGO</th>
<th data-options="field:'descripcion_producto',width:250,editor:'text'">OBSERVACIONES</th>
<th data-options="field:'cantidad_producto',width:80,align:'right',editor:'numberbox'">Cantidad</th>
<th data-options="field:'precio_producto',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">PRECIO</th>
<th data-options="field:'importe_producto',width:80,align:'right',editor:'numberbox'">IMPORTE</th>
<th data-options="field:'action',width:80,align:'right'"
>NUM SERIE</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
I will like insert a button in the same colum than the combo and another one in the cell of NUM_SERIE to open a easyui-window.
Thank for all.
Add this to your javascript file inside $(function(){ ... }
$("#dg_lineas_albaran").datagrid({
// Fires when data in datagrid is loaded successfully
onLoadSuccess:function(){
// Get this datagrid's panel object
$(this).datagrid('getPanel')
// for all easyui-linkbutton <a>'s make them a linkbutton
.find('a.easyui-linkbutton').linkbutton();
}
});
The problem is the data from the grid is loaded after the browser loads easyui. In order to get easyui to recognize the linkbuttons, you have to tell it to look for them after the data is loaded.
This is a sample add this to a data grid
<th field="PRO_RIF" align='right' width="50" formatter="acciones">Aciones</th>
a use this sample script
<script>
function acciones(val,row){
var url = 'print.php?id='+val;
return '<a target="_blank" href="' + url + '"><button>Print</button></a>';
}
</script>
Related
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 troubles merging Cells in Bootstrap Table
I've found an example here.
But I don't want the merging executed by clicking a button, instead I want to merge automatically.
Here's my code:
<table id='ViewTable'
data-toggle='table'
data-url='func/json.php?id=1'
data-class='table table-hover table-condensed'
data-striped='true'
data-show-header='false'>
<thead>
<tr>
<th data-field='picture'></th>
<th data-field='description'></th>
<th data-field='value'></th>
</tr>
</thead>
</table>
<script>
$(document).ready(function() {
$('#ViewTable').bootstrapTable('mergeCells', {
index: 0,
field: 'picture',
rowspan: 12
});
});
</script>
Any suggetions?
you can use post-body.bs.table event to do what you want:
var $table = $('#ViewTable');
$(function () {
$table.on('post-body.bs.table', function () {
$table.bootstrapTable('mergeCells', {
index: 0,
field: 'picture',
rowspan: 12
});
});
});
Here is a jsFiddle example.
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 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
The first column in my gridview (gvAvailable) is a currently checkbox column "chkSelect".
The way it works now is that a user can check multiple checkboxes on a gridview, but I would like a jquery function to deselect all the checkboxes on the gridview except for the checkbox that was clicked.
I was also looking for a way to access the columns of the checked row with jquery on a button click.
Thanks for any help
Here's how the generated html looks
<table class="Grid" cellspacing="0" border="0" id="gvAvailable" style="width:99%;border-collapse:collapse;">
<tr class="GridHeader">
<th scope="col"> </th><th scope="col">Guid</th><th scope="col">Id</th><th scope="col">Name</th>
<th scope="col">Facility</th><th scope="col">Room</th>
</tr>
<tr class="GridItem">
<td>
<input id="gvAvailable_ctl02_chkSelect" type="checkbox" name="gvAvailable$ctl02$chkSelect" />
</td>
<td>24</td>
<td>000101020201</td>
<td>Test</td>
<td>Test Facility</td>
<td> </td>
</tr><tr class="GridAltItem">
<td>
<input id="gvAvailable_ctl03_chkSelect" type="checkbox" name="gvAvailable$ctl03$chkSelect" />
</td>
<td>25</td>
<td>1001</td>
<td>Test 2</td>
<td>Test 3</td>
<td> </td>
</tr>
</table>
if you add the same class to each of the checkboxes in the markup, you can retrieve an array of them by saying
$('.classname')
This will give you back the array of objects. You can then call 'each' on the array and deselect them all.
function removeChecks()
{
$('.classname').each(function()
{
$(this).removeAttr('checked');
});
}
Then add the above function call in the click handler for the each checkbox:
$('.classname').each(function()
{
$(this).click(function()
{
removeChecks();
$(this).attr('checked', 'checked');
});
});
the code above should be set up to run on page load.
In this example I put one button to check, and one button to uncheck gridview checkboxes :
<asp:GridView runat="server" ID="grid"></asp:GridView>
<input type="button" onclick="uncheckCheckBoxes()" value="UnCheck" />
<input type="button" onclick="checkCheckBoxes()" value="Check" />
<script>
function uncheckCheckBoxes()
{
var gridClientID = '<%= grid.ClientID %>';
jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
{
this.checked = false;
});
}
function checkCheckBoxes()
{
var gridClientID = '<%= grid.ClientID %>';
jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
{
this.checked = true;
});
}
</script>
I am assuming you would like to make sure the user clicked checkboxes do not get toggled? If so, go on below.
First, just give a class name to all checkboxes in the gridview.
Whenever a checkbox was clicked, add another class to it to denote it was physically selected.
$('.checkbox').click(function(){
$(this).addClass('checked');
});
Now, when a user clicks on the select all checkbox (let's call it "selectAll") on top, iterate through all the checkboxes and toggle the status while checking the "checked" class
$('#selectAll').click(function(){
var status = $(this).attr('checked')
$('.checkbox').each(function(){
//only toggle if not set
if(!$(this).hasClass('checked')){
if(status){
$(this).attr('checked', 'checked');
}
else{
$(this).attr('checked', '');
}
}
});
});
This should get you along your merry way hopefully.
Now, accessing columns of the checked row?
You could add an onclick event to each table row.
$('#tablename tr').click(function(){
//do something
});
i found this articale very usefull Check/Uncheck all Items in an ASP.NET CheckBox List using jQuery