i'm using easyui datagrid
i added a new button which would populate the datagrid with another set of data based on what row you selected.
here is the button:
a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="view-breakdown()">View Breakdown</a>
and this is my table:
<table id="dg" title="My Users" class="easyui-datagrid" style="width:980px;height:370px;"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true" height="auto";>
<thead>
<tr>
<th field="item_group_desc" width="50">item description</th>
</tr>
</thead>
</table>
i want the function view_breakdown() to get the value of item_group_desc and change the url of the table to "breakdown.php"
how can i do this? thanks in advance
try like this,
view_breakdown()
{
$('#dg').datagrid({
url:'breakdown.php'});
}
Related
How can I prevent Tablesorter from sorting a certain value or keep these values at the bottom? More specifically, this certain value will always be a -
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Bach</td>
<td>40</td>
</tr>
<tr>
<td>Doe</td>
<td>-</td>
</tr>
</tbody>
</table>
I want to keep Doe with the value "-" always at the bottom.
Tablesorter has an emptyTo option which can modify the sort behavior of empty, or non-numeric, cells (demo)
In this case, you might need to set a data-text attribute (modified by the textAttribute option to an empty string.
HTML
<td data-text="">-</td>
JS
$('#myTable').tablesorter({
// ...
emptyTo: 'bottom'
});
This worked for me.
Doc: https://mottie.github.io/tablesorter/docs/example-options-headers-digits-strings.html
jQuery(function($) {
$("#myTable").tablesorter({
stringTo: 'bottom'
});
});
I am using Jquery Easyui Datagrid with grails this is my code for creating the grid in GSP file:-
<table class="easyui-datagrid"
data-options="fit:true,idField:'id',pageNmber:1,pageList:[25,50,75,100]" pagination="true" id="importGrid">
<thead>
<tr>
<th data-options="field:'firstName',sortable:true,width:15,nowrap:true" >First Name</th>
<th data-options="field:'lastName',sortable:true,width:25,nowrap:true" editor="{type:'validatebox',options:{required:true}}" >Last Name</th>
<th data-options="field: 'firstNameLastName',sortable:true,width:130,nowrap:true" >First Name Last Name</th>
<th data-options="field:'displayName',sortable:true,rowspan:2,width:80,nowrap:true">Display Name</th>
<th data-options="field:'relocation',sortable:true,width:130,nowrap:true">Relocation</th>
<th data-options="field:'proficiency',sortable:true,width:130,nowrap:true" editor="{
type:'combobox',
options:{
valueField:'rightid',
textField:'rightname',
data:aRights,
required:true
}
}">Proficiency</th>
<th data-options="field:'subProficiency',sortable:true,width:130,nowrap:true" editor='proficiencyEditor'>Sub Proficiency</th>
<th data-options="field:'uploadResume',sortable:true,width:130,nowrap:true,">Relocation</th>
</tr>
</thead>
</table>
i tried using url which refers to one action in controller but it doesn't work.so to make it work with gsp now i am using a js variable which i have declared in the same gsp. I have the variable aRights like this:-
<script> var aRights = [{rightid: 'V', rightname: 'View Only'},
{rightid: 'E', rightname: 'Edit FPC'},
{rightid: 'A', rightname: 'Admin'},
{rightid: 'N', rightname: 'None'}
] ;
</script>
But editor is never visible..
this is the code i am using to populate the data grid.This code is in js:-
$('#importGrid').datagrid({
url:'/'+productName+'/TestList/excelImport',
queryParams:{
list: hiddenMapForFields,
file:fileName
},
pageNumber: 1,
});
I am new to Jquery easyui editors.Please let me know where i am wrong and help me to solve the issue.
I try to reproduce your bug.
http://jsfiddle.net/niscio/63fyrzL8/1/
If you read the documentation the real problem for editing is that you have to use edatagrid declaration
$('#ID').edatagrid({... options ...});
I want to sort both asc and desc direction alternately from the link
Not from the table header
I am not able to figure it out, the code that inserted is working only one direction. I need both directions
plugin :: jQuery plugin:Tablesorter2.0
<table id="myTable" class="tablesorter" border=1>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tbody>
<a id="trigger-link" href="#">I want to sort both asc and des`enter code here`c alternately from this link</a>
<script>
$(document).ready(function(){
$("#myTable").tablesorter();
$("#trigger-link").click(function() {
var sorting = [[0,1]];
$("table").trigger("sorton",[sorting]);
return false;
});
});
</script>
If you are using this fork of tablesorter, you now have two ways to accomplish this:
Trigger a "sort" event on the header cell (v2.9+)
$("table").find("th:contains(Discount)").trigger("sort");
As of v2.17.0, you can trigger the "sorton" method using an "n" (or next) variable
$("table").trigger("sorton", [ [[0,"n"]] ]);
Please see this demo for other sort methods.
I have a table in a gsp containing 10 deiiferent values :
<table class="table table-striped">
<tr>
<th scope="row">Name:</th>
<td>
${person.name}
</td>
</tr>
<tr>
<th scope="row">Address:</th>
<td>
${person.address}
</td>
</tr>............
I need to highlight (either change the background or text clour on some of the values if they are present in an array also available in the gsp.
Is this possible? For example using g:if? Like :
<tr>
<th scope="row">Name:</th>
<td>
<g:if ${array}.contains("${person.name}")>
//change styling of this cell
${person.name}
</g:if>
</td>
</tr>
This should work, but I've not tried it:
<td class="${array.contains( person.name ) ? 'highlight' : ''}">
So if it contains the name, then a 'highlight' class will be added to the td
I have a table structure like this with out any ID and span has same text.
<table>
<tr>
<td>
<span>Name</span>
</td>
<td>
<span>Name</span>
</td>
</tr>
</table>
If i click on first span this will open a pop up. Pop up contains text box and Button.If i type some text and click the button, the clicked span should replace with newly entered text. how can i identify the clicked span and replace the text?.
The same way we need to do for second span.
Thanks
you can pass this to your function when you click on span like so:
<table>
<tr>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
</tr>
</table>
You will have to store the element so u can change it later when ure done with the popup.
function openPopup(el)
{
// open popup and if button pressed
el.innerHTML = yourNewText;
}
Here is a simple example of how to achieve this:
http://jsfiddle.net/ApsbC/7/
And the code snippet:
$(document).on("click","span",function(){
alert($(this).text());
// some popup code here
$(this).html("Some new Name");
});
EDIT:
I suggest though putting some class/id on those spans to have a better selector for the .on() method. So instead of having just span you could have something like span.spanClass
Try this:
<table>
<tr>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
</tr>
</table>
<script type="text/javascript">
function openPopup (o) {
var newText = prompt("Enter some text: ");
$(o).text(newText);
}
</script>
if you add a click event in your span, you will have the tag reference with "this". Then if you call .text() on it, the related tag will be updated.
like that :
$('span').click(function() {
$(this).text('new text');
})
Here is an example using jQuery Dialog widget to edit span text
http://jsfiddle.net/npch3/2/