| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/gld/view/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<?php include 'inc/headlinks.php'; ?>
<link href="../assets/css/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<?php include 'inc/nav.php'; ?>
<div class="container-fluid lightblueBg wrap">
<div class="pageControl">
<h1 class="pageTitle"> User Management </h1>
<button type="button" class="btn btn-success longBtn" data-bs-toggle="modal" data-bs-target="#Add"><i
class="fas fa-plus"></i> Add User</button>
</div>
<div class="table-responsive">
<table id="table" class="table">
<thead>
<tr>
<th data-field="userid" data-sortable="true">User ID</th>
<th data-field="name" data-sortable="true">User Name</th>
<th data-field="type" data-sortable="true">User Type</th>
<th data-field="company" data-sortable="true">Company</th>
<th data-field="state" data-sortable="true">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1234567890</td>
<td>
Yeung Yeung Jennifer Chan Fong
</td>
<td>System Admin</td>
<td>Government Logistics Department</td>
<td>
<div class="toggleBox">
<div class="checkbox">
<input type="checkbox" class="toggleCheckBox" />
<label></label>
</div>
<span class="label"> </span>
</div>
</td>
<td>
<button type="button" class="btn-outline-edit longBtn" data-bs-toggle="modal"
data-bs-target="#Edit">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<?php include 'modal/modal_user.html'; ?>
<script src="../assets/js/custom.js"></script>
<script src="../assets/js/bootstrap-table.min.js"></script>
<script src="../assets/js/bootstrap-table-locale-all.min.js"></script>
<script src="../assets/js/bootstrap-table-export.min.js"></script>
<script>
$(function() {
// $('.toggleCheckBox').change(function() {
// alert(12345);
// if(this.checked) {
// var returnVal = confirm("Are you sure?");
// $(this).prop("checked", returnVal);
// }
// $('#textbox1').val(this.checked);
// });
var $table = $("#table"),
$remove = $("#remove"),
selections = [];
// var columns = [{
// title: "User ID",
// field: "userid",
// sortable: true,
// valign: "middle",
// width: "120px"
// },
// {
// title: "User Name",
// field: "name",
// sortable: true,
// valign: "middle",
// width: "600px"
// },
// {
// title: "User Type",
// field: "type",
// sortable: true,
// valign: "middle"
// },
// {
// title: "Company",
// field: "company",
// sortable: true,
// valign: "middle",
// }, {
// title: "Status",
// field: "state",
// sortable: true,
// valign: "middle",
// }
// ];
$.ajax({
url: "../assets/json/user.json",
type: "get",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function(result) {
var data = result.data;
console.log(data);
$table.bootstrapTable({
data: data,
columns: [{}, {}, {},{},{
field: '',
title: 'Status',
align: 'left',
valign: 'middle',
width:'150xp',
clickToSelect: false,
formatter: function(value, row, index) {
//return '<input name="elementname" value="'+value+'"/>';
return `<div class="toggleBox">
<div class="checkbox">
<input type="checkbox" class="toggleCheckBox" />
<label></label>
</div>
<span class="label"> </span>
</div>`;
}},
{
field: '',
title: '',
align: 'right',
valign: 'middle',
clickToSelect: false,
formatter: function(value, row, index) {
//return '<input name="elementname" value="'+value+'"/>';
return `<button type="button" class="btn-outline-edit longBtn" data-bs-toggle="modal"
data-bs-target="#Edit">Edit</button>`;
}
}
],
classes: "table table-hover table-no-bordered",
sortClass: undefined, //被排序的TD元素的類名
undefinedText: "-", //當數據為undefined時顯示的字符
striped: true, //設置為true會有隔行變色效果
sortName: "number", //定義排序列，通過URL方式獲取數據填寫字段名，否則填寫下標
sortOrder: "desc", //定義排序方式，'asc'或者'desc'
sortStable: true, //設置為true將獲得穩定的排序，並添加position屬性到行數據中
sortable: true, //設置為false將禁止所有列的排序
pagination: true, //設置為true會在表格底部顯示分頁條
paginationLoop: false, //設置為true啟用分頁條無限循環的功能
onlyInfoPagination: false, //設置為true只顯示總數據，而不顯示分頁按鈕。需要設置pagination ='true'
pageNumber: 1, //設置分頁首頁頁碼
pageSize: 10, //設置分頁頁面數據條數
pageList: [1, 3, 5, 10,
"ALL"], //設置分頁可供選擇的頁面數據條數。設置為All或者Unlimited，則顯示所有記錄
});
},
error: function(xhr, status, errorThrown) {
console.log(errorThrown + "\n" + status + "\n" + xhr.statusTex);
},
});
});
$(document).on('change', '.toggleCheckBox', function() {
if (this.checked) {
$(this).parent().parent().find(".label").addClass("greenText").removeClass("garyText").text(
"Active");
} else {
$(this).parent().parent().find(".label").text("");
}
});
</script>
</body>
</html>