these codes are examples of bootstrap table constant columns (third party jQuery plugin). I added
… for testing. I couldn’t edit the inside (function?) Of the below. Can you help me with this. I want my list to appear.//https://examples.bootstrap-table.com/#extensions/fixed-columns.html//
//Boostrap Fixed Column +++/
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
<style>
.mr10 {margin-right: 10px;}
</style>
<div class="toolbar">
<div>
<label class="checkbox">
<input id="height" type="checkbox" checked> Enable Height
</label>
</div>
<div class="form-inline">
<span class="mr10">Fixed Number: </span>
<input class="form-control mr10" id="fixedNumber" type="number" value="2" min="1" max="5">
<span class="mr10">Fixed Right Number: </span class="mr10">
<input class="form-control" id="fixedRightNumber" type="number" value="1" min="0" max="5">
</div>
<div class="form-inline">
<span class="mr10">Cells: </span>
<input class="form-control mr10" id="cells" type="number" value="20" min="1" max="30">
<span class="mr10">Rows: </span class="mr10">
<input class="form-control mr10" id="rows" type="number" value="20" min="1" max="50">
<button id="build" class="btn btn-secondary">Rebuild Table</button>
</div>
</div>
<table id="table">
//the code I added ***************************************************************/
<thead> <tr>
<th>{{{MyFild1}}}</th>
<th>{{{Myfield2}}}</th>
<th>{{{Myfield3}}}</th>
<th>{{{Myfield4}}}</th>
<th>{{{Myfield5}}}</th>
<th>{{{Myfield6}}}</th>
<th>{{{Myfield7}}}</th>
<th>{{{Myfield8}}}</th>
<th>{{{Myfield9}}}</th>
<th>{{{Myfield10}}}</th>
<th>{{{Myfield11}}}</th>
<th>{{{Myfield12}}}</th>
<th>{{{Myfield13}}}</th>
<th>{{{Myfield14}}}</th>
<th>{{{Myfield15}}}</th>
</tr>
</thead>
<tbody>
<tr{{{row_attrs}}}>
<tr>
<td>{{{MyFild1}}}</td>
<td>{{{Myfield2}}}</td>
<td>{{{Myfield3}}}</td>
<td>{{{Myfield4}}}</td>
<td>{{{Myfield5}}}</td>
<td>{{{Myfield6}}}</td>
<td>{{{Myfield7}}}</td>
<td>{{{Myfield8}}}</td>
<td>{{{Myfield9}}}</td>
<td>{{{Myfield10}}}</td>
<td>{{{Myfield11}}}</td>
<td>{{{Myfield12}}}</td>
<td>{{{Myfield13}}}</td>
<td>{{{Myfield14}}}</td>
<td>{{{Myfield15}}}</td>
</tr>
<tbody>
*************************************************************
</table>
<script>
var $table = $('#table')
function buildTable($el) {
var cells = +$('#cells').val()
var rows = +$('#rows').val()
var i
var j
var row
var columns = [
{
field: 'state',
checkbox: true,
valign: 'middle'
}
]
var data = []
for (i = 0; i < cells; i++) {
columns.push({
field: 'field' + i,
title: 'Cell' + i,
sortable: true,
valign: 'middle',
formatter: function (val) {
return '<div class="item">' + val + '</div>'
},
events: {
'click .item': function () {
console.log('click')
}
}
})
}
for (i = 0; i < rows; i++) {
row = {}
for (j = 0; j < cells + 3; j++) {
row['field' + j] = 'Row-' + i + '-' + j
}
data.push(row)
}
$el.bootstrapTable('destroy').bootstrapTable({
height: $('#height').prop('checked') ? 400 : undefined,
columns: columns,
data: data,
toolbar: '.toolbar',
search: true,
showColumns: true,
showToggle: true,
clickToSelect: true,
fixedColumns: true,
fixedNumber: +$('#fixedNumber').val(),
fixedRightNumber: +$('#fixedRightNumber').val()
})
}
$(function() {
buildTable($table)
$('#build').click(function () {
buildTable($table)
})
})
</script>
| {{{…}}} |
|---|