I want to delete selected records in a grid of the W2UI library, for which I am using w2grid (https://w2ui.com/web/docs/2.0/grid). My grid is called 'divInfoConfig'.
I have created a dynamic grid through a JSON.
What would I like to do?
I have a button with the removeSelectedRecords() function, which should behave that if I manually select 1 or more than 1 record, hitting the button should remove them.
How have I tried?
The function removeSelectedRecords() does the following:
function removeSelectedRecords() {
var sel = w2ui['divInfoConfig'].getSelection();
console.log('Selection: ' + sel);
if (sel) {
delete sel;
}
w2ui['divInfoConfig'].refresh();
}
The button is as follows:
<button class="w2ui-btn" onclick="removeSelectedRecords();">Remove Selected Records</button>
This is what the console log returns
Selection: 6,7
This is because I selected 2 records.
The problem:
The button does nothing. It should delete the selected records.
Any idea on what I am doing wrong?
You are using the native JS delete operator. You should be using w2ui delete().
So in your case it's:
function removeSelectedRecords() {
var sel = w2ui['divInfoConfig'].getSelection();
console.log('Selection: ' + sel);
if (sel) {
w2ui.grid.delete(sel);
}
w2ui['divInfoConfig'].refresh();
}
Related
Since my previous questions I learned and progressed a lot (this all started from HTML code in println inside a Java file !)
I'm close to my target.
I've got 2 dropdown : dd1 and dd2
I got a java to get values in database
dd1 is an independant list
dd2 options depend of the choice in dd1
Using gson/jquery it works perfectly
My issue is the initialisation of the page.
I load the dd1 using my fillOption function and by default my page display the first value as selected.
So I want that dd2 initialised with this value but when I trigger the change() on dd1 this.value is empty and I don't get why.
$(document).ready(function() {
fillOptions('dd1', this); // Init the first dropdown with my values, works fine
$('#dd1 option:eq(1)').prop('selected', true); // Here I tried to force the selection of the first item, doesn't change anything
// Delcaration of the change function for the first dropwdown
$('#dd1').on('change', function() {
alert(this.value); // display blank on the page load, display the value if I select manually afterwards
fillOptions('dd2', this); // at load, 'this' is blank so nothing is loaded for dd2. Works fine if selected manually. I expected to have the value displayed on screen here.
});
$('#dd1').trigger('change');
});
function fillOptions(ddId, callingElement) {
var dd = $('#' + ddId);
$.getJSON('${pageContext.request.contextPath}/optionsSousType?dd=' + ddId + '&val=' + $(callingElement).val(), function(opts) {
$('>option', dd).remove(); // Clean old options first.
if (opts) {
$.each(opts, function(key, value) {
dd.append($('<option/>').val(key).text(value));
});
} else {
dd.append($('<option/>').text("Choisir parent"));
}
});
}
I also tried getting the value using :
$('#colonne').on('change', function() {
var col = $('#colonne').find(":selected").text();
alert(col);
fillOptions('libelle', col);
});
Same result, col is blank. I'm pretty sure it's simple but I couldn't find an answer. Thanks for your help
I have a Listbox that I need refreshed after a user selects an option in DropdownList.
Image is self explanatory. If one selects Department -> load list of departmetns in Listbox, if one selects Vat Rate refresh/load list of vat rates into the listbox below. (Default department list is loaded on page load). I am currently attempting this with trigger("chosen:updated") and having no luck refreshing listbox. Here is my code for that functionality.
$(function () {
$("#SelectFilter").change(function () {
if (document.getElementById('SelectFilter').value == 1) //dropdownlist
{
//empty listbox
$('#SelectItems').empty();
//append new list to listbox
$.each(data.Departments, function (index, element) {
$('#SelectItems').append('<option value="' + element.Value + '">'
+ element.Text + '</option>');
});
//refresh
$('#SelectItems').trigger("chosen:updated");
}
if (document.getElementById('SelectFilter').value == 2)
{
$('#SelectItems').empty();
$.each(data.VatRates, function (index, element) {
$('#SelectItems').append('<option value="' + element.Value + '">'
+ element.Text + '</option>');
});
$('#SelectItems').trigger("chosen:updated");
}
});
});
Recognising the selected value from the dropdownlist isnt an issue, that works fine. Listbox is currently not getting updated/refresh with new selection. And I cannot figure out were I am going wrong with this.
Try to put all your code for creating the list into a function, and then bind an event on chosing one of the selected items to call this function which generates a new list instead of using .trigger(). If you provide the HTML part as well, I'll post example code soon.
It's not clear to me if you have a problem with recognizing the selected value, or with populating the secondary select tag, or with the initial loading of the data. So I am providing an example of the three steps.
First, to detect the selected value, you need to provide a .change() handler and extract the selected value with .val(). Something similar to this:
$("#SelectFilter").change( function() {
var v = $(this).val();
if (v=="value1") {
} else if (v=="value2") {
} else {
}
});
then each of the changes detected has to refresh the contents of the secondary select tag, something as simple as this...
$("#SelectItems").empty();
['first item','second item','troisième'].forEach( (v,i) =>
$("#SelectItems").append($("<option>").val("item"+i).text(v))
);
}
And finally triggering the initial load should be as simple as triggering a change event
$("#SelectFilter").change();
I have put all the steps together in this fiddle https://jsfiddle.net/mud9u8yL/6/
I've got two datatables and there is a dropdown created in the second one with data from the first. I've created a jsbin here
If you add a couple of instructions to the first table (add any text and then click Add Instruction) - then click on the Load Copied Data button, you will see the dropdown box is populated from the first table.
If I do:
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
alert(ins);
});
It basically gives me the html for the dropdown - how do I get which value they have chosen? I was thinking of having a hidden column and updating that on the onchange of the dropdown, but is there a better way?
Thanks in advance
You may use jQuery.map() to generate an array of selected text/value, like below.
$('#btnTest').on('click', function (e) {
//var tsor = $('#tblSORSInstall').dataTable();
var ins = $('#tblSORSInstall').find("tbody select").map(function() {
return $(this).find(":selected").text() // get selected text
//return $(this).val() // get selected value
}).get()
alert ( JSON.stringify(ins, null, 2) )
});
Here is your JS Bin - updated
Using tsor.fnGetNodes() you can get all table row nodes, then you can loop through those and get the select values.
Final code will look something like
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
var a = tsor.fnGetNodes();
$.each(tsor.fnGetNodes(), function (index, value) {
alert($(value).find('select').val());
});
});
I am working on an filter option for a results page.
I have something thats working fine with one filter but when other filters are clicked its goes wrong. The problem is that when you filter a color and a size it will show the color rows and the size rows even if colored filter doenst have that size.
This is the filter javascript:
<script>
$(document).ready(function() {
$("input:checkbox").on('click', function () {
var showAll = true;
$('.resuts_show_hide').hide();
$('input[type=checkbox]:checked').each(function () {
showAll = false;
$("[data-row-" + $(this).data('type') + "=" + $(this).val() + "]").parent().show();
});
if(showAll){
$('.resuts_show_hide').show();
}
});
});
</script>
So i thought lets do this:
$("[data-row-" + $(this).data('type') + "=" + $(this).val() + "]**:visible**").parent().show();
But that's no option because it will alway hide all rows when a checkbox is clicked but and then shows the matching one. Works fine when one checkgox filter is activated, but when the second filter is activated he should only filter thru the visible ones, but with this javascript thats no option.
Any one has a solution for this so multi filtering is also possible?
Created a fiddle: http://jsfiddle.net/m9jrn5bq/.
I have a page with a jqGrid in it. Is has to be multiselect:false because I have to allow only one row to be selected, but I also need to select multiple rows (i.e. I want to have many rows marked but only one active).
So I've created a grid whith multiselect:false and a checkbox row with formatter: 'checkbox'
I've also created a master checkbox in the collumn header (the 'name' of the collumn in the colNames is <input id="cbSelectAll" type="checkbox">)
To change all the rows at once when the header is clicked I've created the function:
$('#cbSelectAll').click(function (e) {
var valor = $(this).is(':checked');
$.each($('#grid input[type="checkbox"]'), function (idx, elm) {
var id = $(elm).closest('tr').attr('id');
var cb = $('#' + id + ' td').children().first();
$(cb).attr('checked', valor);
selectedRows[id] = valor;
});
/* other non relevant code */
});
Now that's my problem.
This function works nicelly when I try to unselect the checkbox's but when i try to select then it only works in the first time. On the subsequent clicks the checked attribute is changed but the box is not visually changed.
Instead of attr, try using prop
Please have a look at this similar issue