Is there a way with bootstrap-table to have one of the columns show passwords as none readable? I.E. #### not 1234
My setup uses the method below, any help would be great.
This is not for security issues, it's just aesthetics.
Many thanks
var optionsuser = {
filterControl: true,
showRefresh: true,
search: true,
pagination: true,
filter: true,
striped: true,
url: "php/api.php",
queryParams: queryParamsuser,
columns: [{
field: "id",
title: "Id"
},
{
field: "username",
title: "Username",
filterControl: 'select',
sortable: true,
filterStrictSearch: false
},
{
field: "password",
title: "Password"
}
],
};
var $table = $('#table').bootstrapTable(optionsuser),
$modal = $('#modal').modal({show: false}),
$alert = $('.alert').hide();
$table.bootstrapTable('hideColumn', 'id');
Try this one.
<th data-field="Password" data-sortable="true" data-formatter="nameFormatter">Password</th>
function nameFormatter(value) {
var str='';
for(i=0;i<value.length;i++)
{
str=str+'*';
}
return str;
}
You may also check http://bootstrap-table.wenzhixin.net.cn/documentation/ out.
Related
I am attempting to pass values from a Suitelet to an HTML page that is being inserted into an INLINEHTML field in the Suitelet form. However, I am unsure of the best way to accomplish this. I am currently doing it in this manner, but I want to ensure that I am using a somewhat secure method ideally, as opposed to allowing for XSS vulnerabilities.
Suitelet INLINEHTML field:
var htmlForm = form.addField({
id: 'custpage_htmlform',
type: ui.FieldType.INLINEHTML,
label: 'HTMLFORM'
});
var fileObj = file.load({
id: 123
});
var htmlContent = fileObj.getContents();
htmlContent = htmlContent.replace("['REPLACETHIS']","['<input type=\"radio\" name=\"selectRow\" />','EXAMPLE','1234','1245','01/2021','<img src=\"https://imageurl.example" />'];");
htmlForm.defaultValue = htmlContent;
HTML example:
<table id="example" class="display" style="width:100%">
</table>
<br />
<script>
//Main Data Table
var exampleValues = new Array();
var exampleDetailArr = ['REPLACETHIS'];
exampleValues.push(exampleDetailArr);
window.$vars = {
exampleValues: exampleValues
}
$(document).ready(function() {
$('#example').DataTable( {
data: exampleValues,
"bJQueryUI": true,
columns: [
{ title: "Select" },
{ title: "Type" },
{ title: "Internal ID" },
{ title: "External ID "},
{ title: "Date" },
{ title: "Memo" },
],
"columnDefs": [
{
"targets": [ 3 ],
"visible": false,
"searchable": false
}
]
} );
} );
</script>
I want to add some styling to the last row in my grid. I wont know what the row number is as there could be any number of rows. How can I go about this? I've seen rowClass and rowRenderer but not a working example. Here is the code I have:
var displayData = function (itemViewModelList) {
var fields = [
{
name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
},
{
name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
},
{ name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
{
name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'Month', type: 'text', width: 100, title: 'Month',
itemTemplate: function (value) {
return moment(value, 'M').format('MMMM');;
}
},
];
var options = {
inserting: false,
editing: false,
pageSize: 20,
fields: fields,
rowHeaders: false,
colHeaders: false,
data: itemViewModelList,
controller: controller = {
loadData: function () {
},
},
};
$('#investment-grid').tisGrid('', options);
if (itemViewModelList[0].ConsultantName != null) {
$("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
} else {
$("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
}
};
My data being passed "itemViewModelList" is an array of objects
I resolved this by using rowClass as follows:
controller: controller =
{
loadData: function () {},
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
{
return "totalItem highlight";
}
}
I have my if statement where I find the item in the last row based on my conditions. When they are met, I add my custom CSS classes to that row.
I'm creating my table inside a div like this:
var tabla = $('<table id="tablaConteo2"></table>');
var thead = $('<thead></thead>');
var enc = $('<tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr>');
thead.appendTo(tabla);
enc.appendTo(thead);
tabla.appendTo('#tablaDatosToma2');
var $tabla = $('#tablaConteo2');
and then I'm using this library
to initialize the table like this:
$tabla.bootstrapTable({
height: 200,
url: 'BuscarCodigo',
method: 'post',
queryParams: function(p){
return{
codigoProducto : $('#codigoToma2').val(),
bodegaID: $('#bodega').val()
};
},
pagination: true,
pageSize: 50,
pageList: [10, 25, 50, 100, 200],
showRefresh: true,
columns: [
{
field: 'codigoProducto',
title: 'C\u00F3digo'
},
{
field: 'cantidad',
title: 'Cant. Actual',
width: '200px'
},
{
field: 'nuevaCantidad',
title: 'Cantidad'
},
{
field: 'bodega',
title: 'Bodega'
},
{
field: 'estanteria',
title: 'Estanter\u00EDa'
},
{
field: 'seccion',
title: 'Secci\u00F3n'
},
{
field: 'estanteriaID',
title: 'Estanter\u00EDa'
},
{
field: 'seccionID',
title: 'Secci\u00F3n'
}
]
});
On my servlet I'm getting the parameters as I usually do, like this:
request.getSession().setAttribute("codigoProducto", request.getParameter("codigoProducto"));
request.getSession().setAttribute("bodegaID", request.getParameter("bodegaID"));
The servlet is being executed, but when I try to use the parameters they are null, can anyone help to find out what I'm doing wrong.
You can set the contentType option to application/x-www-form-urlencoded, because the default value is application/json:
$tabla.bootstrapTable({
method: 'post',
contentType: 'application/x-www-form-urlencoded',
...
});
Here is a related issue: https://github.com/wenzhixin/bootstrap-table/issues/918
I am using meteor-accounts-ui-bootstrap-3 to create sign up form. In my sign up form i have two options Doctor and Advisor. If during sign up process user selects doctor i want to show more fields (required fields) based on that selection and if user select advisor those field should remain hidden. Below is my code of sign up form:
Accounts.ui.config({
requestPermissions: {},
extraSignupFields: [{
fieldName: 'phone',
fieldLabel: 'Phone Number',
inputType: 'text',
visible: true,
validate: function(value, errorFunction) {
if (!value) {
errorFunction("Please write your Phone Number");
return false;
} else {
return true;
}
}
},
{
fieldName: 'type',
showFieldLabel: false,
fieldLabel: 'User Type',
inputType: 'radio',
radioLayout: 'vertical',
data: [{
id: 1,
label: 'Doctor',
value: 'doctor'
}, {
id: 2,
label: 'Advisor',
value: 'advisor',
}],
validate: function(value, errorFunction){
if (!value) {
errorFunction("Please select user type.");
return false;
} else {
return true;
}
},
visible: true
}, {
fieldName: 'terms',
fieldLabel: 'I accept the terms and conditions',
inputType: 'checkbox',
visible: true,
validate: function(value, errorFunction){
if (value != 'true') {
errorFunction("You must accept the terms and conditions.");
return false;
} else {
return true;
}
},
saveToProfile: false
}]
});
How can i show more fields if user selects "Doctor" ? How i should i add condition in above code ? For example if radio type field value is doctor i want to show more fields like zip code and date of birth.
Any help will be highly appreciated as i am learning meteor.
I have a category and a subcategory column in a Jqgrid. I have enabled inline editing, both category and subcategory are dropdownlists columns (edittype:'select'). I need to filter the subcategory list based on the selected category. I wonder how can I acheive this functionlity?
I tried the below event but its not working for me
afterEditCell: function(rowid, celname, value, iRow, iCol) {
//to do here
}
the above event doesn't get fired. my all column are editable
Thanks,
This question will be often asked. So I wrote a small code example which demonstrate how to implement such scenario with local data only (for jqGrid starting with 3.7.x). For data editing (inline editing) I use here the double-click event. The modified data will be saved after pressing of the "enter" key. For the filling of select elements I use ids. If you prefer use texts of the categories and subcategories instead you should remove formatter:'select' and make the corresponding changes in building of <option> elements (see code of dataEvents event handler).
var categories = ["sport", "science"];
var subcategories = ["football", "formel 1", "physics", "mathematics"];
var mydata = [
{Name:"Lukas Podolski", Category:0, Subcategory:0},
{Name:"Michael Schumacher", Category:0, Subcategory:1},
{Name:"Albert Einstein", Category:1, Subcategory:2},
{Name:"Blaise Pascal", Category:1, Subcategory:3}
];
var subcategoriesOfCategory = [
["football", "formel 1"],
["physics", "mathematics"]
];
var grid = jQuery("#list").jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name: 'Name', width: 200 },
{ name: 'Category', width: 200, editable:true, formatter:'select',
edittype:'select', editoptions: {
value: categories,
dataInit : function (elem) {
var v = $(elem).val();
grid.setColProp('Subcategory', {
editoptions:{value:subcategoriesOfCategory[v]}});
},
dataEvents: [
{ type: 'change',
data: { id: 7 },
fn: function(e) {
var v=$(e.target).val();
var sel = grid.getGridParam('selrow');
grid.setColProp('Subcategory', { editoptions:
{value:subcategoriesOfCategory[v]}});
var res = '';
var sc = subcategoriesOfCategory[v];
for (var i=0; i<sc.length; i++) {
res += '<option role="option" value="' + i + '">' +
sc[i] + '</option>';
}
$("select#"+sel+"_Subcategory").html(res);
}
}
]
}
},
{ name: 'Subcategory', width: 200, editable:true, formatter:'select',
edittype:'select', editoptions: {value: subcategories} }
],
onSelectRow: function(id) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
},
ondblClickRow: function(id, ri, ci) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
grid.editRow(id, true);
return;
},
editurl: 'clientArray',
sortname: 'Name',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "Inline Editing example"
}).navGrid('#pager', { edit: false, add: false, del: false,
search: false, view: false });
This example can be of cause modified for the case of building of select option from the server.