diff --git a/dist/js/plate-map.js b/dist/js/plate-map.js index b771b36..b197916 100755 --- a/dist/js/plate-map.js +++ b/dist/js/plate-map.js @@ -637,7 +637,7 @@ var plateMapWidget = plateMapWidget || {}; this.bottomTableBody.empty(); this.bottomTableHead.empty(); this.bottomTableHead.append(row); - this.adjustFieldWidth(this.bottomRow); + this.adjustFieldWidth(row); }, tileAttrText: function tileAttrText(tile, attr) { var well = this.engine.derivative[tile.index]; diff --git a/dist/js/plate-map.min.js b/dist/js/plate-map.min.js index 1fd2789..b2e527c 100755 --- a/dist/js/plate-map.min.js +++ b/dist/js/plate-map.min.js @@ -1,2 +1,2 @@ -"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var plateMapWidget=plateMapWidget||{};!function(e){plateMapWidget.addDataOnChange=function(){return{_addAllData:function(t){var i=[];if(this.selectedIndices){var a=this.selectedIndices.length;this.selectedIndices.forEach(function(i){var n;i in this.engine.derivative?n=this.engine.derivative[i]:(n=e.extend(!0,{},this.defaultWell),this.engine.derivative[i]=n),n=this.processWellData(t,n,a),this.engine.wellEmpty(n)&&(this.disableAddDeleteWell?this.engine.derivative.hasOwnProperty(i)&&(n=e.extend(!0,{},this.emptyWellWithDefaultVal),this.engine.derivative[i]=n):delete this.engine.derivative[i])},this)}this._getAllMultipleVal(i),this.applyFieldWarning(i),this._colorMixer(),this.derivativeChange(),this.addToUndoRedo()},processWellData:function(e,t,i){for(var a in e)if(e.hasOwnProperty(a)){var n=e[a];if(null!=n){if(n.multi){var l=t[a];n=this._getMultiData(l,n,a,i)}n=JSON.parse(JSON.stringify(n))}else n=null;t[a]=n}return t},_getMultiData:function(e,t,i,a){var n=t.added,l=t.removed;if(n)if(e)if(n.value){var s=!0;for(var r in e){if(e.hasOwnProperty(r))e[r][i].toString()===n.id.toString()&&(s=!1,e=e.map(function(e){if(e[i].toString()===n.id.toString())for(var t in e)e.hasOwnProperty(t)&&t in n.value&&t!==i&&(1===a?e[t]=n.value[t]:n.value[t]&&(e[t]=n.value[t]));return e}))}s&&e.push(n.value)}else e.indexOf(n)<0&&e.push(n);else e=[],n.value?e.push(n.value):n&&e.push(n);var d,o=function(e,t){var i=[];for(var a in e)e.hasOwnProperty(a)&&parseInt(a)!==parseInt(t)&&i.push(e[a]);return i};if(l)if(l.value){for(var u in e){e[u][i].toString()===l.id.toString()&&(d=u)}e=o(e,d)}else e&&(d=e.indexOf(l))>=0&&(e=o(e,d));return e&&0===e.length&&(e=null),e},_colorMixer:function(){this.engine.searchAndStack(),this.engine.applyColors()},derivativeChange:function(){this._trigger("updateWells",null,this)},createState:function(){return{derivative:e.extend(!0,{},this.engine.derivative),checkboxes:this.getCheckboxes(),selectedIndices:this.selectedIndices.slice(),requiredField:this.requiredField}},getPlate:function(){var t={},i=this.engine.derivative;for(var a in i)if(i.hasOwnProperty(a)){var n=this.indexToAddress(a),l=i[a];t[n]=e.extend(!0,{},l)}return{wells:t,checkboxes:this.getCheckboxes(),selectedAddresses:this.getSelectedAddresses(),requiredField:this.requiredField}}}}}(jQuery),(plateMapWidget=plateMapWidget||{}).addDataToFields=function(){return{_addDataToTabFields:function(e){for(var t=0;t").addClass("plate-setup-tab-default-field"),s=this._createElement("
").addClass("plate-setup-tab-field-left-side"),r=this._createElement("
").addClass("plate-setup-tab-field-right-side"),d=this._createElement("
").addClass("plate-setup-tab-name").text(i.name),o=this._createElement("
").addClass("plate-setup-tab-field-container");e(r).append(d),e(r).append(o),e(l).append(s),e(l).append(r),e(this.allDataTabs[a]).append(l);var u={id:i.id,full_id:t.id+"_"+i.id,name:i.name,root:l,data:i,required:i.required||!1};return n.push(u),this.fieldMap[u.full_id]=u,u},_makeRegularField:function(e,t,i,a){var n=this,l=n._createElement("
").addClass("plate-setup-tab-default-field"),s=n._createElement("
").addClass("plate-setup-tab-field-left-side"),r=n._createElement("
").addClass("plate-setup-tab-field-right-side "),d=n._createElement("
").addClass("plate-setup-tab-name").text(e.name),o=n._createElement("
").addClass("plate-setup-tab-field-container");r.append(d),r.append(o),l.append(s),l.append(r),n.allDataTabs[t].append(l);var u={id:e.id,full_id:e.id,name:e.name,root:l,data:e,required:e.required};return u.required&&n.requiredField.push(u.id),i.push(u),n.fieldList.push(u),n.fieldMap[u.full_id]=u,a&&n._addCheckBox(u),n._createField(u),u.onChange=function(){var e=u.getValue(),t={};t[u.id]=e,n._addAllData(t)},u},_makeMultiplexField:function(e,t,i){var a=this,n=a._createElement("
").addClass("plate-setup-tab-default-field"),l=a._createElement("
").addClass("plate-setup-tab-field-left-side"),s=a._createElement("
").addClass("plate-setup-tab-field-right-side "),r=a._createElement("
").addClass("plate-setup-tab-name").text(e.name),d=a._createElement("
").addClass("plate-setup-tab-field-container");s.append(r),s.append(d),n.append(l),n.append(s),a.allDataTabs[t].append(n);var o={id:e.id,full_id:e.id,name:e.name,root:n,data:e,required:e.required};i.push(o),a.fieldList.push(o),a.fieldMap[o.full_id]=o;for(var u=[],c=[],p=0;p").html(this._assets.warningImg).attr("id",n).addClass("plate-field-warning-image");if(a){if(t.root.find("#"+n).length<=0){t.root.find(".plate-setup-tab-name").text(" "+t.name),t.root.find(".plate-setup-tab-name").prepend(l);var s=e("
").addClass("pop-out-text");s.text(i),t.root.find(".plate-setup-tab-name").append(s),e("#"+n).hover(function(){s[0].style.display="flex"},function(){s.hide()})}}else t.root.find("#"+n).length>0&&(t.root.find(".plate-setup-tab-name").text(t.name),e("#"+n).remove())},removeWarningMsg:function(t,i,a){var n="fieldWarning"+t.full_id;if(a){var l=e("").html(this._assets.warningImg).attr("id",n).addClass("plate-field-warning-image");t.root.find(".plate-setup-tab-name").append(l);var s=e("
").addClass("pop-out-text");s.text(i),t.root.find(".plate-setup-tab-name").append(s),l.hover(function(){s[0].style.display="inline-block"},function(){s.hide()})}else e("#"+n).remove()},applyFieldWarning:function(e){var t=this,i={};t.fieldList.forEach(function(e){i[e.id]=[]}),e.forEach(function(e){if(!t.engine.wellEmpty(e))for(var a in i)i.hasOwnProperty(a)&&(a in e?i[a].push(e[a]):i[a].push(null))});for(var a=0;a
").addClass("plate-setup-bottom-container"),this.bottomTableContainer=this._createElement("
").addClass("plate-setup-bottom-table-container"),this.bottomTable=this._createElement("
").addClass("plate-setup-bottom-table"),this.bottomTableHead=this._createElement(""),this.bottomTableBody=this._createElement(""),this.bottomTable.append(this.bottomTableHead),this.bottomTable.append(this.bottomTableBody),this.bottomTableContainer.append(this.bottomTable),this.bottomContainer.append(this.bottomTableContainer),this.container.append(this.bottomContainer)},addBottomTableHeadings:function(){var e=this._createElement(""),t=this._createElement("").text("Group");e.prepend(t),this.rowCounter=1;for(var i=0;i").text(n.name);e.append(l),this.rowCounter=this.rowCounter+1}this.bottomTableBody.empty(),this.bottomTableHead.empty(),this.bottomTableHead.append(e),this.adjustFieldWidth(this.bottomRow)},tileAttrText:function(e,t){var i=this.engine.derivative[e.index];return this.fieldMap[t].getText(i[t])},addBottomTableRow:function(e,t){var i=this,a=this.allTiles[t[0]],n=this._createElement(""),l=this._createElement("").addClass("plate-setup-bottom-id"),s=this._createElement("");o.append(c),c.click(function(){u.find("input:checked").each(function(){var e=this.value;t.multiOnChange(null,{id:e})}),a.decideSelectedFields(),s()})}}else e("

").text("No "+t.name+" in the selected wells").appendTo(d);var p=e("");o.append(p),p.click(s),l.show(),window.onclick=function(e){e.target===l[0]&&s()}},_deleteDialogTable:function(t,i){var a=this,n=[t.name,"Counts"];a.readOnly||n.push("Delete");var l=e(""),s=e("").appendTo(l);e("").appendTo(s).append(n.map(function(t){return e("").appendTo(l);return t.data.options.forEach(function(t){if(t.id in i){var n=e("").appendTo(r),l=e("").prop("value",t.id);e(""),this.bottomTableBody=this._createElement(""),this.bottomTable.append(this.bottomTableHead),this.bottomTable.append(this.bottomTableBody),this.bottomTableContainer.append(this.bottomTable),this.bottomContainer.append(this.bottomTableContainer),this.container.append(this.bottomContainer)},addBottomTableHeadings:function(){var e=this._createElement(""),t=this._createElement("").text("Group");e.prepend(t),this.rowCounter=1;for(var i=0;i").text(n.name);e.append(l),this.rowCounter=this.rowCounter+1}this.bottomTableBody.empty(),this.bottomTableHead.empty(),this.bottomTableHead.append(e),this.adjustFieldWidth(e)},tileAttrText:function(e,t){var i=this.engine.derivative[e.index];return this.fieldMap[t].getText(i[t])},addBottomTableRow:function(e,t){var i=this,a=this.allTiles[t[0]],n=this._createElement(""),l=this._createElement("").addClass("plate-setup-bottom-id"),s=this._createElement(""),t=this.colorPairs[0],i=this._createElement("");i.css("background","-webkit-linear-gradient(left, "+t[0]+" , "+t[1]+")"),e.append(i),this.bottomTableBody.append(e),this.createExportButton()},adjustFieldWidth:function(e){var t=this.rowCounter;150*t>1024&&e.css("width",152*t+"px")},downloadCSV:function(e,t){var i,a;i=new Blob([e],{type:"text/csv"}),(a=document.createElement("a")).download=t,a.href=window.URL.createObjectURL(i),a.style.display="none",document.body.appendChild(a),a.click()},exportData:function(e){var t=[],i=document.querySelectorAll("table tr"),a={},n=this.engine.stackUpWithColor;for(var l in n)n.hasOwnProperty(l)&&(a[l]=n[l].map(this.indexToAddress,this));for(var s=0;s").addClass("plate-setup-bottom-control-container"),a=e("
").addClass("plate-setup-overlay-text-container");a.text("Color groups"),i.append(a);var n=e("
").addClass("plate-setup-overlay-bottom-button-container"),l=e("");o.append(c),c.click(function(){u.find("input:checked").each(function(){var e=this.value;t.multiOnChange(null,{id:e})}),a.decideSelectedFields(),s()})}}else e("

").text("No "+t.name+" in the selected wells").appendTo(d);var p=e("");o.append(p),p.click(s),l.show(),window.onclick=function(e){e.target===l[0]&&s()}},_deleteDialogTable:function(t,i){var a=this,n=[t.name,"Counts"];a.readOnly||n.push("Delete");var l=e("

").text(t)}));var r=e("
").text(t.text).appendTo(n),e("").text(i[t.id]).appendTo(n),a.readOnly||e("").append(l).appendTo(n)}}),l},_createDeleteButton:function(t){var i=this,a=e("
"),s=e("").appendTo(l);e("").appendTo(s).append(n.map(function(t){return e("").appendTo(l);return t.data.options.forEach(function(t){if(t.id in i){var n=e("").appendTo(r),l=e("").prop("value",t.id);e("\");\n this.bottomTableBody = this._createElement(\"\");\n this.bottomTable.append(this.bottomTableHead);\n this.bottomTable.append(this.bottomTableBody);\n this.bottomTableContainer.append(this.bottomTable);\n this.bottomContainer.append(this.bottomTableContainer);\n this.container.append(this.bottomContainer);\n },\n\n addBottomTableHeadings: function() {\n\n let row = this._createElement(\"\");\n\n let singleField = this._createElement(\"\")\n .text(\"Group\");\n row.prepend(singleField);\n\n this.rowCounter = 1;\n\n for (let i = 0; i < this.globalSelectedAttributes.length; i++) {\n let attr = this.globalSelectedAttributes[i];\n let field = this.fieldMap[attr];\n let singleField = this._createElement(\"\").text(field.name);\n row.append(singleField);\n this.rowCounter = this.rowCounter + 1;\n }\n\n // Now we append all the captions at the place.\n this.bottomTableBody.empty();\n this.bottomTableHead.empty();\n this.bottomTableHead.append(row);\n this.adjustFieldWidth(this.bottomRow);\n },\n\n tileAttrText: function(tile, attr) {\n let well = this.engine.derivative[tile.index];\n let field = this.fieldMap[attr];\n return field.getText(well[attr]);\n },\n\n addBottomTableRow: function(color, singleStack) {\n let that = this;\n let modelTile = this.allTiles[singleStack[0]];\n let row = this._createElement(\"\");\n let plateIdDiv = this._createElement(\"\").addClass(\"plate-setup-bottom-id\");\n let numberText = this._createElement(\"\").text(text);\n row.append(dataDiv);\n }\n this.bottomTableBody.append(row);\n this.adjustFieldWidth(row);\n },\n\n bottomForFirstTime: function() {\n this.addBottomTableHeadings();\n // This is executed for the very first time.. !\n let row = this._createElement(\"\");\n\n let colorStops = this.colorPairs[0];\n let plateIdDiv = this._createElement(\"\");\n plateIdDiv.css(\"background\", \"-webkit-linear-gradient(left, \" + colorStops[0] + \" , \" + colorStops[1] + \")\");\n row.append(plateIdDiv);\n this.bottomTableBody.append(row);\n this.createExportButton();\n },\n\n adjustFieldWidth: function(row) {\n\n let length = this.rowCounter;\n if ((length) * 150 > 1024) {\n row.css(\"width\", (length) * 152 + \"px\");\n }\n },\n\n downloadCSV: function(csv, filename) {\n let csvFile;\n let downloadLink;\n\n // CSV file\n csvFile = new Blob([csv], {\n type: \"text/csv\"\n });\n\n // Download link\n downloadLink = document.createElement(\"a\");\n\n // File name\n downloadLink.download = filename;\n\n // Create a link to the file\n downloadLink.href = window.URL.createObjectURL(csvFile);\n\n // Hide download link\n downloadLink.style.display = \"none\";\n\n // Add the link to DOM\n document.body.appendChild(downloadLink);\n\n // Click download link\n downloadLink.click();\n },\n\n exportData: function(format) {\n let data = [];\n let rows = document.querySelectorAll(\"table tr\");\n\n let colorLocMap = {};\n let colorLocIdxMap = this.engine.stackUpWithColor;\n for (let colorIdx in colorLocIdxMap) {\n if (colorLocIdxMap.hasOwnProperty(colorIdx)) {\n colorLocMap[colorIdx] = colorLocIdxMap[colorIdx].map(this.indexToAddress, this);\n }\n }\n\n for (let i = 0; i < rows.length; i++) {\n let row = [],\n cols = rows[i].querySelectorAll(\"td, th\");\n\n for (let j = 0; j < cols.length; j++) {\n let v = \"\";\n if (cols[j].innerText) {\n if (format === \"csv\") {\n v = '\"' + cols[j].innerText.replace(/\"/g, '\"\"') + '\"';\n } else {\n v = cols[j].innerText;\n }\n }\n row.push(v);\n\n // add location column\n if (i === 0 && j === 0) {\n if (format === \"csv\") {\n row.push('\"Location\"');\n } else if (format === 'clipboard') {\n row.push(\"Location\");\n }\n\n }\n if (i !== 0 && j === 0) {\n let loc = '';\n if (colorLocMap[parseInt(cols[j].innerText)]) {\n if (format === \"csv\") {\n loc = '\"' + colorLocMap[parseInt(cols[j].innerText)].join(\",\") + '\"';\n } else if (format === 'clipboard') {\n loc = colorLocMap[parseInt(cols[j].innerText)].join(\",\");\n }\n }\n row.push(loc);\n }\n }\n\n if (format === \"csv\") {\n data.push(row.join(\",\"));\n } else if (format === 'clipboard') {\n data.push(row.join(\"\\t\"));\n //data.push(row); // for text type\n }\n\n }\n if (format === \"csv\") {\n // Download CSV file\n this.downloadCSV(data.join(\"\\n\"), 'table.csv');\n } else if (format === 'clipboard') {\n //return formatTableToString(data); // for text type\n return data.join(\"\\n\");\n }\n },\n\n createExportButton: function() {\n let that = this;\n let overlayContainer = $(\"
\").addClass(\"plate-setup-bottom-control-container\");\n\n let descriptionDiv = $(\"
\").addClass(\"plate-setup-overlay-text-container\");\n descriptionDiv.text(\"Color groups\");\n overlayContainer.append(descriptionDiv);\n\n let buttonContainer = $(\"
\").addClass(\"plate-setup-overlay-bottom-button-container\");\n\n // create export csv option\n let exportButton = $(\"
").text(t)}));var r=e("
").text(t.text).appendTo(n),e("").text(i[t.id]).appendTo(n),a.readOnly||e("").append(l).appendTo(n)}}),l},_createDeleteButton:function(t){var i=this,a=e("
');\n let thead = $('').appendTo(table);\n let tr = $('').appendTo(thead);\n\n tr.append(colName.map(function(text) {\n return $('\").appendTo(table);\n\n field.data.options.forEach(function(opt) {\n if (opt.id in valMap) {\n let tr = $('').appendTo(tbody);\n let checkbox = $(\"\").prop(\"value\", opt.id);\n $(\"\");\n this.bottomTableBody = this._createElement(\"\");\n this.bottomTable.append(this.bottomTableHead);\n this.bottomTable.append(this.bottomTableBody);\n this.bottomTableContainer.append(this.bottomTable);\n this.bottomContainer.append(this.bottomTableContainer);\n this.container.append(this.bottomContainer);\n },\n\n addBottomTableHeadings: function() {\n\n let row = this._createElement(\"\");\n\n let singleField = this._createElement(\"\")\n .text(\"Group\");\n row.prepend(singleField);\n\n this.rowCounter = 1;\n\n for (let i = 0; i < this.globalSelectedAttributes.length; i++) {\n let attr = this.globalSelectedAttributes[i];\n let field = this.fieldMap[attr];\n let singleField = this._createElement(\"\").text(field.name);\n row.append(singleField);\n this.rowCounter = this.rowCounter + 1;\n }\n\n // Now we append all the captions at the place.\n this.bottomTableBody.empty();\n this.bottomTableHead.empty();\n this.bottomTableHead.append(row);\n this.adjustFieldWidth(row);\n },\n\n tileAttrText: function(tile, attr) {\n let well = this.engine.derivative[tile.index];\n let field = this.fieldMap[attr];\n return field.getText(well[attr]);\n },\n\n addBottomTableRow: function(color, singleStack) {\n let that = this;\n let modelTile = this.allTiles[singleStack[0]];\n let row = this._createElement(\"\");\n let plateIdDiv = this._createElement(\"\").addClass(\"plate-setup-bottom-id\");\n let numberText = this._createElement(\"\").text(text);\n row.append(dataDiv);\n }\n this.bottomTableBody.append(row);\n this.adjustFieldWidth(row);\n },\n\n bottomForFirstTime: function() {\n this.addBottomTableHeadings();\n // This is executed for the very first time.. !\n let row = this._createElement(\"\");\n\n let colorStops = this.colorPairs[0];\n let plateIdDiv = this._createElement(\"\");\n plateIdDiv.css(\"background\", \"-webkit-linear-gradient(left, \" + colorStops[0] + \" , \" + colorStops[1] + \")\");\n row.append(plateIdDiv);\n this.bottomTableBody.append(row);\n this.createExportButton();\n },\n\n adjustFieldWidth: function(row) {\n\n let length = this.rowCounter;\n if ((length) * 150 > 1024) {\n row.css(\"width\", (length) * 152 + \"px\");\n }\n },\n\n downloadCSV: function(csv, filename) {\n let csvFile;\n let downloadLink;\n\n // CSV file\n csvFile = new Blob([csv], {\n type: \"text/csv\"\n });\n\n // Download link\n downloadLink = document.createElement(\"a\");\n\n // File name\n downloadLink.download = filename;\n\n // Create a link to the file\n downloadLink.href = window.URL.createObjectURL(csvFile);\n\n // Hide download link\n downloadLink.style.display = \"none\";\n\n // Add the link to DOM\n document.body.appendChild(downloadLink);\n\n // Click download link\n downloadLink.click();\n },\n\n exportData: function(format) {\n let data = [];\n let rows = document.querySelectorAll(\"table tr\");\n\n let colorLocMap = {};\n let colorLocIdxMap = this.engine.stackUpWithColor;\n for (let colorIdx in colorLocIdxMap) {\n if (colorLocIdxMap.hasOwnProperty(colorIdx)) {\n colorLocMap[colorIdx] = colorLocIdxMap[colorIdx].map(this.indexToAddress, this);\n }\n }\n\n for (let i = 0; i < rows.length; i++) {\n let row = [],\n cols = rows[i].querySelectorAll(\"td, th\");\n\n for (let j = 0; j < cols.length; j++) {\n let v = \"\";\n if (cols[j].innerText) {\n if (format === \"csv\") {\n v = '\"' + cols[j].innerText.replace(/\"/g, '\"\"') + '\"';\n } else {\n v = cols[j].innerText;\n }\n }\n row.push(v);\n\n // add location column\n if (i === 0 && j === 0) {\n if (format === \"csv\") {\n row.push('\"Location\"');\n } else if (format === 'clipboard') {\n row.push(\"Location\");\n }\n\n }\n if (i !== 0 && j === 0) {\n let loc = '';\n if (colorLocMap[parseInt(cols[j].innerText)]) {\n if (format === \"csv\") {\n loc = '\"' + colorLocMap[parseInt(cols[j].innerText)].join(\",\") + '\"';\n } else if (format === 'clipboard') {\n loc = colorLocMap[parseInt(cols[j].innerText)].join(\",\");\n }\n }\n row.push(loc);\n }\n }\n\n if (format === \"csv\") {\n data.push(row.join(\",\"));\n } else if (format === 'clipboard') {\n data.push(row.join(\"\\t\"));\n //data.push(row); // for text type\n }\n\n }\n if (format === \"csv\") {\n // Download CSV file\n this.downloadCSV(data.join(\"\\n\"), 'table.csv');\n } else if (format === 'clipboard') {\n //return formatTableToString(data); // for text type\n return data.join(\"\\n\");\n }\n },\n\n createExportButton: function() {\n let that = this;\n let overlayContainer = $(\"
\").addClass(\"plate-setup-bottom-control-container\");\n\n let descriptionDiv = $(\"
\").addClass(\"plate-setup-overlay-text-container\");\n descriptionDiv.text(\"Color groups\");\n overlayContainer.append(descriptionDiv);\n\n let buttonContainer = $(\"
\").addClass(\"plate-setup-overlay-bottom-button-container\");\n\n // create export csv option\n let exportButton = $(\"
').text(text);\n }));\n\n let tbody = $(\"
\").text(opt.text).appendTo(tr);\n $(\"\").text(valMap[opt.id]).appendTo(tr);\n if (!that.readOnly) {\n $(\"\").append(checkbox).appendTo(tr);\n }\n }\n });\n\n return table;\n },\n\n _createDeleteButton: function(field) {\n let that = this;\n let deleteButton = $(\"
');\n let thead = $('').appendTo(table);\n let tr = $('').appendTo(thead);\n\n tr.append(colName.map(function(text) {\n return $('\").appendTo(table);\n\n field.data.options.forEach(function(opt) {\n if (opt.id in valMap) {\n let tr = $('').appendTo(tbody);\n let checkbox = $(\"\").prop(\"value\", opt.id);\n $(\"
').text(text);\n }));\n\n let tbody = $(\"
\").text(opt.text).appendTo(tr);\n $(\"\").text(valMap[opt.id]).appendTo(tr);\n if (!that.readOnly) {\n $(\"\").append(checkbox).appendTo(tr);\n }\n }\n });\n\n return table;\n },\n\n _createDeleteButton: function(field) {\n let that = this;\n let deleteButton = $(\"