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
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.
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.
I have created some users and i have data in my users collection.I wan to display this data in a reactive table https://github.com/aslagle/reactive-table
This is my helper code
settings: function () {
return {
collection: Meteor.users.find(),
rowsPerPage: 10,
showFilter: true,
fields: ['_id', 'profile.schoolname', 'profile.schoollocation']
};
},
and this is my html
{{> reactiveTable settings=settings}}
When i run the code,only the fields i have defined show but not the data.
What could be the problem?.
I solved it this way.
In the helper
settings: function () {
return {
collection: 'ma',
rowsPerPage: 5,
showFilter: true,
showNavigation: 'auto',
fields: [
{ key: '_id', label: 'Id' },
{ key: 'profile.schoolname', label: 'Name' },
{ key: 'profile.schooltelephonenumber', label: 'Telephone' },
{ key: 'profile.schoollocation', label: 'Location' }
],
useFontAwesome: true,
group: 'client'
};
},
and in my publish
ReactiveTable.publish("ma",
function () {
return Meteor.users;
}
);
the html
{{> reactiveTable settings=settings}
Here is my PUT code in Web Api. (ASP.NET MVC 6).
public class VendorManagementController : ApiController
{
// GET
[Microsoft.AspNet.Mvc.HttpGet]
public dynamic GetVendors(string sidx, string sortOrder, int page, int rows,int pkey)
{
var vendors = _vendorRespository.GetAllVendors().AsQueryable();
var pageIndex = Convert.ToInt32(page) - 1;
var pageSize = rows;
var totalRecords = vendors.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
if (sidx != null)
{
vendors = sortOrder == "asc" ? vendors.OrderBy(sidx) : vendors.OrderBy(sidx + " descending");
}
else
{
vendors = vendors.OrderBy(x => x.pkey);
}
vendors = vendors.Skip(pageIndex * pageSize).Take(pageSize);
return new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (from vendor in vendors
select new
{
cell = new string[]
{
vendor.pkey.ToString(),
vendor.Company,
vendor.ContactName,
vendor.ContactPhone,
vendor.UserName,
Encoding.UTF8.GetString(vendor.UserKey),
vendor.Active.ToString(),
vendor.FacilityId.ToString(),
vendor.ClientID.ToString(),
vendor.PhotoURL,
vendor.PushToGP.ToString()
}
}).ToArray()
};
}
In the view, I have:
jQuery(gridSelector).jqGrid({
url: API_URL + 'GetVendors',
datatype: 'json',
mtype: 'GET',
height: 'auto',
colNames: ['pkey', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'],
colModel: [
{ name: 'pkey', index: 'pkey', width: 50, hidden: true },
{ name: 'Company', width: 120 },
{ name: 'ContactName', width: 110 },
{ name: 'ContactPhone', width: 120 },
{ name: 'UserName', align: "right", width: 90 },
{ name: 'UserKey', align: "right", width: 120, hidden: true },
{ name: 'Active', width: 50, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch },
{ name: 'FacilityId', align: "right", width: 100, formatter: "integer" },
{ name: 'ClientID', align: "right", width: 100, formatter: "integer" },
{ name: 'PhotoURL', align: "right", width: 80 },
{ name: 'PushToGP', align: "right", width: 80, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch }
],
cmTemplate: { autoResizable: true, editable: true },
rowNum: 10,
rowList: [10, 20, 30],
pager: pagerSelector,
sortname: 'company',
sortorder: "asc",
viewrecords: true,
jsonreader: {
root: "rows",
page: "page",
total: "total",
records:"records"
},
caption: "Vendor Managerment"
});
However I inspect the page, I find a 500 error. See the image.
And in Home Controller:
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult VendorManagement()
{
return View();
}
In Startup.cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
// Configure the HTTP request pipeline.
// Add the following to the request pipeline only in development environment.
if (env.IsDevelopment())
{
app.UseBrowserLink();
app.UseErrorPage();
}
else
{
// Add Error handling middleware which catches all application specific errors and
// send the request to the following path or controller action.
app.UseErrorHandler("/Home/Error");
}
// Add static files to the request pipeline.
app.UseStaticFiles();
// Add MVC to the request pipeline.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
// Uncomment the following line to add a route for porting Web API 2 controllers.
// routes.MapWebApiRoute("DefaultApi", "api/{controller}/{id?}");
});
}
}
I am new to ASP.NET Web Api. Is there anything wrong on my mapping? Why I get 500 error?
As per jqGrid documentation, it requires following default JSON format,
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
If I understand your code correctly then your method should return JSON result
Please try to modify code like this and see if it helps,
I have added id = vendor.pkey
var result = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (from vendor in vendors
select new
{
id = vendor.pkey,
cell = new string[]
{
vendor.pkey.ToString(),
vendor.Company,
vendor.ContactName,
vendor.ContactPhone,
vendor.UserName,
Encoding.UTF8.GetString(vendor.UserKey),
vendor.Active.ToString(),
vendor.FacilityId.ToString(),
vendor.ClientID.ToString(),
vendor.PhotoURL,
vendor.PushToGP.ToString()
}
}).ToArray()
};
return Json(result, JsonRequestBehavior.AllowGet);