I am working on a table that can contain all possible products in the warehouse. One of the columns needs to contain some buttons and the QR code in image and text form.
I am currently using w2ui to generate the table and this is the code for the QR code column (I stripped the buttons and custom id to make it more readable:
{
field: 'barcode', text: 'QR-Code', size: '200px', sortable: true,
resizable: true,
render: function (record, index, col_index) {
var html = "<body>" +"<img id='barcode' class =\"thumbnail\"
src=\"https://api.qrserver.com/v1/create-qr-code/?data=" + record.barcode +
"& amp; size = 100x100\" alt=\"\" title=\"\" width=\"50\" height=\"50\" />" +
record.barcode + "</body >";
return html;
}
},
This works (I know the "' are used kinda bad), but I don't want to depend on the "https://api.qrserver.com/v1/create-qr-code/?data" api, I'd rather generate it in the browser to also allow offline access to the codes.
The problem is, even tho all my tags have custom ID's, I can't access them right inside this field definition, as they are only created after the return. There are no events that trigger everytime a row / record is loaded (As far my search results told me), so I have to somehow implement it right there in the field render Function.
Is there a library to achieve what I am trying, maybe it only generates the qr code html and I can insert it, or it doesn't require an element to append itself to, or do I have to build something from the ground up? My search hasn't brought me any luck yet.
What I have tried:
I tried a lot of QR generators. "Qrious", "JQuery.ClassyQR", "QRcode.js" and some lesser known ones, but none quite enabled me to do what I want here.
Submit an article or tip