H5
//Initialize the number of pages
$('#userListTable')
.bootstrapTable(
{
url : 'sys/user-list.json',
method : 'post', //Request method ( )
dataType : 'json',
contentType : "application /x-www-form-urlencoded",
showExport : true, //whether to display the export button
exportDataType : "all", //basic'export the current page, 'all'export all, 'selected'export selected items.
toolbar : ' #toolbar', //Which container is used for the tool button
undefinedText : "-",//The character displayed when the data is undefined
striped : true, //Whether to display the line interval color
cache : false, //Whether to use the cache, the default is true, so in general, you need to set this property ( )
pagination : true, //whether to display paging ( )
pageSize : 5, // the number of records displayed on each page
pageNumber : 1, // the current number of pages
pageList : [5 ,10, 15, 20, 25 ],//Record count optional list
sortable: false, //Whether to enable sorting
sortOrder : "asc", //sort method
sidePagination : "server", //pagination method: client client paging, server server paging ( )
////Query parameters, this parameter will be brought with each call, you can Custom
queryParams : queryParams,
search : false, //Whether to display the table search, this search is a client-side search and will not enter the server, so personally, it doesn't make much sense.
strictSearch : true,
showColumns : true, //Whether to display all The column
showRefresh : true, //whether to display the refresh button
minimumCountColumns : 4, //minimum allowed number of columns
responseHandler : responseHandler,
//clickToSelect: true, //whether to enable click to select rows
//height: 600, //row height , if the height attribute is not set, the table will automatically feel the height of the table according to the number of records.
UniqueId: "id", //The unique identifier of each row, generally the primary key column
showToggle: true, //Whether to display the toggle button of the detailed view and the list view
cardView : false, //whether to display the detail view
detailView : false, //whether to display the parent and child table
columns : [
{
checkbox : true,
formatter: function (i,row) { // Every time the checkbox is loaded, determine whether the id of the current row already exists in the global Set()
if($.inArray(row.id,overAllIds)!=-1){// Because Determine if there is this id in the array
return {
checked : true // If it exists, check it
}
}
}
},
{
field : 'id',
title : 'ID',
visible : false
},
{
field: 'avatar',
title: ' Avatar',
align: 'center',
formatter: function(value,row,index){
var imgUrl='files/'+row.avatar;
if(row.avatar==''||row.avatar==null) {imgUrl="/images/default.jpg";}
return '<img src='+imgUrl+' class="img-rounded" style="width:50px;height:50px;" >';
}
},
{
field : 'loginName',
title : 'login name'
},
{
field : 'userName',
title : 'real name'
},
{
field : 'email',
title : '邮箱'
},
{
field : 'phoneNum',
title : '电话'
},
{
title : '操 作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {
var id = row.id;
var e;
e = '<a href ="#" title="编辑"><span class="fa fa-wrench" onclick="editUser(\''
+ id
+ '\')"> </span></a> '
+ '<a href ="#" title="注销"><span class="fa fa-lock" aria-hidden="true" onclick="disableUser(\''
+ id
+ '\')"> </span></a> '
+ '<a href ="#" title="删除"><span class="fa fa-times" onclick="deleteUser(\''
+ id
+ '\')"> </span></a> '
+ '<a href ="#" title="修改密码"><span class="fa fa-key" onclick="modifyPassword(\''
+ id
+ '\')"> </span></a> '
+ '<a href ="#" alt="" title="上传头像"><span class="fa fa-user" onclick="uploadAvatar(\''
+ id+'\')"> </span></a>';
return e;
},
events : 'operateEvents'
} ]
});
//为翻页保留checkbox选中准备
$('#userListTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
var datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行
examine(e.type,datas); // 保存到全局 Array() 里
});
//访问成功回调函数
function responseHandler(res) {
//console.log(res);
if (res) {
return {
"rows" : res.list,
"total" : res.total
};
} else {
return {
"rows" : [],
"total" : 0
};
}
};