I am trying to build a table grid which represents hourly blocks for each day of the week. What I would like to then do is make each cell in the table selectable, and to check a check box if that cell is selected, or if multiple cells are selected then tick all the check boxes that each cell corresponds to. I have put together a simplified version here: http://jsfiddle.net/yxAjx/4/.
I've really got as far as putting in the selectable code -
$(function() {
$( "#selectable" ).selectable({
filter: ".block"
})
});
For example if I clicked and dragged across the first 2 cells in the 'Tue' row I would want the corresponding check boxes to be checked.
The table that contains the check boxes I have no control over as this section of html is generated from the software I am using but I have replicated the lay out of it in my example.
My Javascript and jQuery knowledge is limited so would appreciate any pointers on how to achieve this.
How about doing something like this:
$(function() {
$( "#selectable" ).selectable({
filter: ".block",
selected: function( event, ui ) {
var row = $(ui.selected).parents('tr').index(),
col = $(ui.selected).parents('td').index();
$('#checks').find('tr').eq(row)
.children('td').eq(col)
.children('input').addClass('checked').prop('checked', true);
$('#checks input:not(.checked)').prop('checked', false);
},
unselected: function( event, ui ) {
var row = $(ui.unselected).parents('tr').index(),
col = $(ui.unselected).parents('td').index();
$('#checks').find('tr').eq(row)
.children('td').eq(col)
.children('input').removeClass('checked').prop('checked', false);
}
});
$('#checks input').click(function(){
var row = $(this).parents('tr').index(),
col = $(this).parents('td').index();
if($(this).prop('checked')){
$('#selectable').find('tr').eq(row)
.children('td').eq(col)
.children('div').addClass('ui-selected');
}else{
$('#selectable').find('tr').eq(row)
.children('td').eq(col)
.children('div').removeClass('ui-selected');
}
});
});
DEMO: http://jsfiddle.net/dirtyd77/yxAjx/9/
Related
i have 2 tables and i need to select some rows from one, then drop them to the other table in the position i want to place.
i can drag multiple rows, but they will be placed on the end of table..i need to place where i want.
i tried with this
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
}
});
http://jsfiddle.net/83k9k/5/
but i can't apply the sortable.
here i tried to apply sortable, but i can't apply the selected rows.
$("#table1 .childgrid, #table2 .childgrid").sortable({
connectWith: ".childgrid",
//connectWith: ".t_sortable",
items: $(".draggable_tr"),
//items: "> tr:not(:first)",
appendTo: $tabs,
//helper:"clone",
zIndex: 999990,
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).toggleClass('selectedRow');
}
console.log(selected.length)
var container = $('<div/>').attr('id', 'draggingContainer');
//console.log(container)
container.append(selected.clone().removeClass("selectedRow"));
return container;
},
update: function (event, ui)
{
$(this).append(ui.helper.children());
$('.selectedRow').remove();
}
}).disableSelection();
http://jsfiddle.net/ce36vd0h/
where is the issue?
Please check below. I have made some changes. THe problem I see is , you are dragging inside a table, so you do not get which tr you are dragging after . I have made below changes. I have added a class tt1 in every table row on the right side table. And then called the droppable in the table row instead of the table itself. You can do the same for the left table. This just show the example. I am not sure if this goes with your actual usecase but I feel this is the best way to identify the table row where you are dropping. I am not sure about the sortable, are you trying to apply sortable after the row is moved ?
http://jsfiddle.net/2gb7vcLf/
$("#table1 .childgrid, #table2 .tt1").droppable({
drop: function (event, ui) {
// alert($(this).hasClass('childgrid'))
//alert($(this).closest('tr').hasClass('draggable_tr'))
var droppedRow = $(this).closest('tr');
// $(droppedRow).css('color', 'red');
$(ui.helper.children()).insertAfter(droppedRow);
// $(droppedRow).next(ui.helper.children());
//$(this).append(ui.helper.children());
$('.selectedRow').remove();
}
});
<tr class="draggable_tr tt1">
I have an table in my HTMl view (php mvc).
The table displays some basic information in a row.
By clicking the 'More' botton (+) you can see other information belonging to this user.
But somehow activating the JS chances the width of the affected row and the rows below, and slightly the first row.
How is this possible? And how can I prevent this?
Any help is welcome.
The code is in a fiddle here https://jsfiddle.net/jdkosnl/e71ms5ar/41/
$(document).ready(function () {
$('.show-more-button').click(function () {
var $this = $(this);
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($this.hasClass('fa-plus-square')) {
$this.removeClass('fa-plus-square').addClass('fa-minus-square');
$showMoreElement.css('display', 'block');
} else if ($this.hasClass('fa-minus-square')) {
$this.removeClass('fa-minus-square').addClass('fa-plus-square');
$showMoreElement.css('display', 'none');
}
});
});
Try to avoid using display: block when working with tables and their elements. The suitable value for tbody is 'table-row-group' (instead of 'block'). Like this:
if ($this.hasClass('fa-plus-square')) {
$this.removeClass('fa-plus-square').addClass('fa-minus-square');
$showMoreElement.css('display', 'table-row-group');
}
JSFiddle.
Using Jquery Datatables...
Is there a way to filter out rows when clicking on a cell? For instance if a certain column had lets say 10 rows, and 4 of those rows had the name Bob and the other 6 had the name John, can you filter out the Johns by clicking on any of the Bobs and vice versa?
Yep, the general idea is to attach a click event to the cells, and depending on whether that cell is a joe or a bob, you hide the other cells. I'd recommend using jquery data tables' method for hiding and showing a row. Here's an example snippet per their docs.
var table = $('#example').DataTable();
table.rows().every( function () {
this.child( 'Row details for row: '+this.index() );
} );
$('#example tbody').on( 'click', 'tr', function () {
var child = table.row( this ).child;
if ( child.isShown() ) {
child.hide();
}
else {
child.show();
}
} );
Is there a way to rename column labels such as instead of RequestID, it is Request Id, etc and order the table columns in such that the first row is RequestID and Request Date and the rest like etc?
Please ignore the alternating color formatting.
$("#example").on("click", "a[target='tab']", function(){
var me = $(this);
var url = me.attr("href");
var tabName = me.data("tabName");
var tabIndex = parseInt(me.data("tabIndex"), 10);
$.get(url, function(data) {
var table = $( '<table style="font-weight:bold;font-size:10pt;border-color:#ddd;" cellpadding="4" width="100%" cellspacing="0" />' ),
tr = $( '<tr/>' ),
td = $( '<td/>' ),
th = $( '<th/>' );
//alert(JSON.stringify(data));
$.each( data[ 0 ], function(key,value) {
tr.clone().html( td.clone().html( key.bold() ) )
.append( td.clone().html( value ) )
.appendTo( table );
});
$(tabName).html(table);
// Activate the tab once the page has loaded:
$("#tabs").tabs("option", "active", tabIndex);
}, 'json');
// Prevent the browser from following the link:
return false;
});
});
</script>
Thanks very much in advance for your assistance.
I have not been able to find any usable information on the web.
Your best bet would be to separate everything into logical tables or definition lists. You could mangle the table to look like the bottom result, but you're doing that on the fly, and is going to be pretty bespoke (and brittle) code.
I'm not sure if you have control over the rendering of the table (but it seems you do since you're using json data), but that would be where I would start looking. Failing that, you could break up sections with tr elements containing empty td elements, and add a class to the td to make them appear to be empty spaces. That's gross though, and isn't even remotely semantic.
I have a jqGrid with a navBar that has search: true and multipleSearch: true. I would like to add a button to my UI that automatically adds an additional rule to the search.
I've tried manipulating the postData for the filter directly, but values added this way don't show up in the search UI.
I've also tried accessing the search box directly using jQuery, like this:
$('#fbox_list').searchFilter().add();
$('#fbox_list .sf .data input').each(function(index) {
alert($(this).val());
});
But, in addition to feeling hackish, it only works if the user has already clicked on the search button (the fbox_list div is not constructed on load).
Has anyone else dealt with an issue like this?
For the sake of posterity, here is the hack I'm currently using. The grid has an ID of list and the pager has an ID of pager:
jQuery(document).ready(function() {
//Initialize grid.
//Initialize the navigation bar (#pager)
//Hack to force creation of the search grid.
//The filter's ID is of the form #fbox_<gridId>
jQuery('#pager .ui-icon-search').click();
jQuery('#fbox_list').searchFilter().close();
//Example button events for adding/clearing the filter.
jQuery("#btnAddFilter").click(function() {
//Adds a filter for the first column being equal to 'filterValue'.
var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters;
if (postFilters) {
$('#fbox_list').searchFilter().add();
}
var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel');
//The index into the colModel array for the column we wish to filter.
var colNum = 0;
var col = colModel[colNum];
$('#fbox_list .sf .fields select').last().val(col.index).change();
$('#fbox_list .sf .data input').last().val('filterValue');
$('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change();
$('#fbox_list').searchFilter().search();
});
jQuery("#btnClearFilter").click(function() {
$('#fbox_list').searchFilter().reset();
});
});
If you mean the filter toolbar, you can do this: (status is the col name -- so, replace "#gs_status" w/ "#gs_" + your_col_name
jQuery("#distributor_grid").jqGrid('showCol',['status']);
jQuery(".ui-search-toolbar #gs_status")
.val('ALL')
;
$('#distributor_grid').RefreshData(); // triggers toolbar
to clear inputs, selects and reset grid
$("td#refresh_navGrid").click();