Many times using inline editing will bring the operator a more refreshing experience
Implement bootstrapTable inline editing:
First import the relevant dependencies:
<!--Reference BootStrap's JavaScript plugin--> <script src="#(basePath)/page/js/jquery.min.js"></script> <script src="#(basePath)/page/js/bootstrap.min.js"></script> <script src="#(basePath)/page/js/bootstrap-table.js"></script> <script src="#(basePath)/page/js/bootstrap-table-zh-CN.js"></script> <!-- Inline editing --> <script src="#(basePath)/page/js/bootstrap-editable.js"></script> <script src="#(basePath)/page/js/bootstrap-table-editable.js"></script>
HTML part:
<table class="table table-hover table-bordered" id="tb_user"> </table>
js part:
//initialize the form
function initTable() {
// first destroy the form
$('#tb_user').bootstrapTable('destroy');
//Initialize the table, dynamically load data from the server
$("#tb_user").bootstrapTable({
url : '#(basePath)/admin/manageUser', //Request the URL of the background (*)
method : 'post', //Request method (*)
contentType: "application/x-www-form-urlencoded",//An encoding. It seems to be used when post request. The get request used here, comment out this sentence to get the data
striped : true, //whether to display line interval color
dataField: "rows",//This is the key of the returned json array. The default seems to be "rows". Here only the front and back ends are agreed
cache : true, //whether to use the cache, the default is true, so in general, you need to set this property (*)
pagination : true, //whether to display pagination (*)
sortable : true, //whether to enable sorting
sidePagination : "server", //Pagination method: client client paging, server server paging (*)
pageNumber : 1, //initially load the first page, the default first page
pageSize : 50, //Number of record rows per page (*)
pageList : [ 50, 100 ], //Number of rows per page that can be selected (*)
search : false, //Whether to display the form search, this search is a client-side search and will not enter the server, so I personally feel that it is of little significance
strictSearch : false,
paginationPreText: 'Previous page',
paginationNextText:'Next page',
//showColumns : true, //whether to show all columns
//showRefresh : true, //whether to show the refresh button
minimumCountColumns : 2, //minimum allowed number of columns
clickToSelect : true, //Whether to enable click to select rows
uniqueId : "user_id", //The unique identifier of each row, generally the primary key column
//showToggle : true, //whether to show the toggle button of the detail view and the list view
cardView : false, //whether to display the detail view
detailView : false, //whether to display the parent and child table
queryParams:queryParams,//parameters passed when requesting the server
responseHandler:responseHandler,//After the request data is successful, the method before rendering the table
rowStyle: function (row, index) {
//There are 5 values here to represent 5 colors ['active', 'success', 'info', 'warning', 'danger'];
var strclass;
if (row.integral_num < 150) {
strclass = 'danger';
}else if (row.integral_num > 400) {
strclass = 'info';
}
else {
strclass = '';
}
return { classes: strclass }
},
onEditableSave: function (field, row, oldValue, $el) {
layer.msg(row.integral_num);
$.ajax({
type: "post",
url: "#(basePath)/admin/giftIntegral",
data: {
userId:row.user_id,
integral:row.integral_num
},
success: function (data, status) {
if (status == "success") {
layer.msg("Edited successfully");
}
},
error: function () {
layer.msg("Error");
},
complete: function () {
layer.msg("完成")
}
});
},
columns : [
{
field : 'user_id',
align : 'center',
title : 'Number',
valign: 'middle'
},{
field : 'tel',
align : 'center',
title : 'phone',
valign: 'middle'
},
{
field : 'user_name',
align : 'center',
title : 'username',
valign: 'middle'
},{
field : 'integral_num',
align : 'center',
title : 'Points',
valign: 'middle',
editable: {
type: 'text',
title: 'age',
validate: function (v) {
if (isNaN(v)) return 'Age must be a number';
var age = parseInt (v);
if (age <= 0) return 'age must be a positive integer';
}
}
},{
field : 'register_time',
align : 'center',
title : 'Registration time',
valign: 'middle'
},{
title : 'Operation',
field : 'user_id',
align : 'center',
formatter : function(value, row, index) {
var e = '<button class="btn btn-default" onclick="edit(\''+ index + '\')">reward points</button>';
return e ;
},
valign: 'middle'
} ],
formatLoadingMessage: function () {
return "Please wait, loading...";
},
formatNoMatches: function () { //No matching results
return '<img style="width:100px" src="#(basePath)/page/img/noContent.png">';
},
onLoadError: function (data) {
$('#tb_user').bootstrapTable('removeAll');
},
});
}
//Parameters passed when requesting service data
function queryParams(params){
return {
pageSize : params.limit, //The number of data rows per page, the default is 10 (pageSize) set above
pageIndex : params.offset/params.limit+1, //The current page, the default is 1 (pageNumber) set above
condition : $("#condition").val(),//Condition of condition input box
//param : "Your Param" //Here are other parameters, defined according to your own needs, there can be multiple
}
}
// request success method
function responseHandler(result){
//If there is no error, return the data and render the table
return {
total : result.totalRow, //Total number of pages, the previous key must be "total"
rows : result.list //Row data, the previous key should be consistent with the value of the previously set dataField.
};
}