Hello,
I have a drop-down menu where based on the selected filter I produce results in a table.
I would like to add a checkbox by line where you can select "N" results and pass them to another table.
the default option must show all the selected rows, and eventually the user must be able to deselect the cells of non-interested.
when the "submit" button is pressed, the second table must be able to process the selected cell data.
Can you help me?
here below XML, JS and css.
.JS
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
// Access the "default" token model
debugger;
var tokens = mvc.Components.get("default");
var selected_values_array = [];
var submittedTokens = mvc.Components.get('submitted');
console.log("Multichecked");
// Custom renderer for applying checkbox.
var CustomRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
return _(['campo']).contains(cell.field);
},
render: function ($td, cell) {
var a = $('
').attr({
"id": "chk-sourcetype" + cell.value,
"value": cell.value
}).addClass('checkbox').click(function () {
if ($(this).attr('class') === "checkbox") {
selected_values_array.push($(this).attr('value'));
$(this).removeClass();
$(this).addClass("checkbox checked");
} else {
$(this).removeClass();
$(this).addClass("checkbox");
var i = selected_values_array.indexOf($(this).attr('value'));
if (i != -1) {
selected_values_array.splice(i, 1);
}
}
console.log(selected_values_array);
}).appendTo($td);
}
});
//List of table ID
var sh = mvc.Components.get("myTable");
if (typeof(sh) != "undefined") {
sh.getVisualization(function (tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRenderer());
tableView.table.render();
});
}
$(document).ready(function () {
// Disabling button while search is running
var mysearch = mvc.Components.get('mysearch');
mysearch.on('search:error', function (properties) {
$("#mybutton").attr('disabled', false);
console.log("error search"+ properties);
});
mysearch.on('search:start', function (properties) {
// selected_values_array = [];
tokens.set("mytoken", selected_values_array.join());
$("#mybutton").attr('disabled', false);
// $(".checkbox").removeClass("checked");
console.log("inizio start");
});
mysearch.on('search:done', function (properties) {
try {
//try to unset token (hai da funzionĂ !!!)
selected_values_array = [];
//$(".checkbox").removeClass("checked");
console.log("fine done");
$("#mybutton").attr('disabled', false);
} catch(e) {
console.log("Exception: " + e);
}
});
mysearch.on('search:failed', function (properties) {
$("#mybutton").attr('disabled', false);
console.log("failed search");
});
mysearch.on('search:cancelled', function (properties) {
tokens.set("mytoken", "")
selected_values_array = [];
$("#mybutton").attr('disabled', false);
console.log("search cancelled");
});
//setting up tokens with selected value.
$("#mybutton").on("click", function (e) {
e.preventDefault();
console.log(e);
tokens.set("mytoken", selected_values_array.join());
submittedTokens.set(tokens.toJSON());
$("#mybutton").attr('disabled', false);
});
});
});
XML
.css
/* The standalone checkbox square*/
.checkbox {
width:20px;
height:20px;
border: 1px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 4px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:4px;
left:7px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}