124 lines
4.0 KiB
HTML
124 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Boolean Options</title>
|
|
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
|
<link rel="stylesheet" href="../assets/multiple-select/multiple-select.css">
|
|
<link rel="stylesheet" href="../assets/examples.css">
|
|
<style>
|
|
.boolean-options {margin: 20px 0;}
|
|
.boolean-options select {width: 400px;}
|
|
.ms-drop input[type="checkbox"] {vertical-align: top;}
|
|
</style>
|
|
<script src="../assets/jquery.min.js"></script>
|
|
<script src="../assets/sprintf.js"></script>
|
|
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
|
<script src="../assets/multiple-select/multiple-select.js"></script>
|
|
<script src="../ga.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Boolean Options</h1>
|
|
<div class="boolean-options">
|
|
<b>Table Options:</b> <select id="tableSelect" multiple="multiple"></select>
|
|
<b>Column Options:</b> <select id="columnSelect" multiple="multiple"></select>
|
|
</div>
|
|
<table id="table"></table>
|
|
</div>
|
|
<script>
|
|
var $tableSelect = $('#tableSelect'),
|
|
$columnSelect = $('#columnSelect'),
|
|
$table = $('#table'),
|
|
defaultTableOptions = {},
|
|
defaultColumnOptions = {};
|
|
|
|
$(function () {
|
|
initOptions($.fn.bootstrapTable.defaults, defaultTableOptions, $tableSelect);
|
|
initOptions($.fn.bootstrapTable.columnDefaults, defaultColumnOptions, $columnSelect);
|
|
initTable();
|
|
});
|
|
|
|
function initOptions(defaults, defaultOptions, $select) {
|
|
var html = [];
|
|
|
|
$.each(defaults, function (key, value) {
|
|
if (typeof value === 'boolean') {
|
|
html.push(sprintf('<option value="%(key)s" %(value)s>%(key)s</option>', {
|
|
key: key,
|
|
value: value ? 'selected' : ''
|
|
}));
|
|
|
|
if ($.inArray(key, ['radio', 'checkbox'] === -1)) {
|
|
defaultOptions[key] = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
$select.html(html.join('')).multipleSelect({
|
|
onClick: initTable,
|
|
onCheckAll: initTable,
|
|
onUncheckAll: initTable
|
|
});
|
|
}
|
|
|
|
function initTable() {
|
|
var defaultColumns = [{
|
|
field: 'id',
|
|
title: 'Item ID'
|
|
}, {
|
|
field: 'name',
|
|
title: 'Item Name'
|
|
}, {
|
|
field: 'price',
|
|
title: 'Item Price'
|
|
}],
|
|
selectsColumns = [{
|
|
field: 'state'
|
|
}, {
|
|
field: 'id',
|
|
title: 'Item ID'
|
|
}, {
|
|
field: 'name',
|
|
title: 'Item Name'
|
|
}, {
|
|
field: 'price',
|
|
title: 'Item Price'
|
|
}],
|
|
columns = [],
|
|
tableOptions = {},
|
|
columnOptions = {};
|
|
|
|
$.each($tableSelect.multipleSelect('getSelects'), function (i, key) {
|
|
tableOptions[key] = true;
|
|
});
|
|
$.each($columnSelect.multipleSelect('getSelects'), function (i, key) {
|
|
columnOptions[key] = true;
|
|
});
|
|
|
|
if (columnOptions.checkbox) {
|
|
columns = selectsColumns.slice(0);
|
|
columns[0].checkbox = true;
|
|
} else if (columnOptions.radio) {
|
|
columns = selectsColumns.slice(0);
|
|
columns[0].radio = true;
|
|
} else {
|
|
columns = defaultColumns.slice(0);
|
|
}
|
|
delete columnOptions.checkbox;
|
|
delete columnOptions.radio;
|
|
|
|
$.each(columns, function (i, column) {
|
|
columns[i] = $.extend({}, defaultColumnOptions, columnOptions, column);
|
|
});
|
|
|
|
$table.bootstrapTable('destroy').bootstrapTable($.extend({
|
|
url: '../json/data1.json',
|
|
columns: columns
|
|
}, defaultTableOptions, tableOptions));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|