普通用户管理系统 - 前端代码 - 常规

普通用户管理系统 - 前端代码

本代码展示了使用 BootstrapTable 插件实现普通用户管理功能，包括查询、添加、修改、删除等操作。

// 初始化参数
var id;
var email;
var nickName;
var userState;
var createDate;

// 初始化表格的列
userNormal_initColumn = function () {
    var columns = [
    	{field: 'selectItem', radio: true, visible: true},
    	{title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle'},
        {title: '邮箱地址', field: 'email', visible: true, align: 'center', valign: 'middle', sortable: true},
		{title: '昵称', field: 'nickName', visible: true, align: 'center', valign: 'middle', sortable: true},
        {title: '用户状态', field: 'userState', align: 'center', valign: 'middle', sortable: true,
        	formatter: function (value, row, index) {
        		if(value == 0){
        			return '启用';
        		}
        		else{
        			return '禁用';
        		}
			}},        {title: '创建日期', field: 'createDate', align: 'center', valign: 'middle', sortable: true},

    ];
    return columns;
};

/**
 * 检查是否选中
 */
userNormal_check = function () {
	// 获得row数组
    var rows = $('#userNormalTable').bootstrapTable('getSelections');
    if (rows.length == 0) {
        return false;
    } else {
        return true;
    }
};

// 删除
userNormal_delete = function () {
	if(userNormal_check()){
		// 获得当前选中行对象
		var rows = $('#userNormalTable').bootstrapTable('getSelections');
		// 获得选中id
		var id = rows[0].id;
		// 发送ajax执行删除
		$.ajax({
    		url: '/user/remove',
    		type: 'POST',
    		data: {'id': id},
    		success: function(data){
    			// 成功操作
    			if(data == true){
    				layer.msg('删除成功');
    				$('#userNormalTable').bootstrapTable('refresh');
    			}
    			// 失败操作
    			else{
    				layer.msg('删除失败');
    			}
    		},
    		dataType: 'json'
    	});
		
	}
	else{
		layer.msg('请先选中至少一条记录！');
	}
};

// 添加
userNormal_add = function(){
	var index = layer.open({
		type: 2,
		title: '添加用户',
		area: ['500px', '460px'], // 宽高
		fix: false, // 不固定
		maxmin: true,
		content:  '/static/page/main/userMgr/normalUser_add.jsp'
	});
	this.layerIndex = index;
}

// 修改
userNormal_edit = function(){
	if(userNormal_check()){
		// 获得当前选中行对象
		var rows = $('#userNormalTable').bootstrapTable('getSelections');
		// 获得参数
		var id = rows[0].id;
		var nickName = rows[0].nickName;
		var userState = rows[0].userState;
		var createDate = rows[0].createDate;
		var index = layer.open({
			type: 2,
			title: '修改用户',
			area: ['500px', '490px'], // 宽高
			fix: false, // 不固定
			maxmin: true,
			content:  '/static/page/main/userMgr/normalUser_edit.jsp',
			data: {
				id: id,
				nickName: nickName,
				userState: userState,
				createDate: createDate
            },
		});
		this.layerIndex = index;
	}
	else{
		layer.msg('请先选中至少一条记录！');
		
	}
}

// 收集参数
function collectParam(){
	email = $('#email').val();
	nickName = $('#nickName').val();
	createDate = $('#createDate').val();
	userState = $('#userState').val();
}

// BootStrap查询
function userNormal_search() {
	// 收集参数
	collectParam();
	var opt = {
			url: '/user/queryCondition',
			silent: true,
			query: {
				email: email,
				nickName: nickName,
				createDate: createDate,
				userState: userState
			}
	};
	$('#userNormalTable').bootstrapTable('refresh', opt);
};

$(function(){
	var column =  userNormal_initColumn();
	$('#userNormalTable').bootstrapTable({
        contentType: 'application/x-www-form-urlencoded',
        url: '/user/queryList',
        method: 'post',				// ajax方式, post还是get
        //toolbar: '#toolbar',		// 顶部工具条
        striped: true,     			// 是否显示行间隔色
        cache: false,      			// 是否使用缓存, 默认为true
        sortable: true,      		// 是否启用排序
        sortOrder: 'desc',     		// 排序方式
        pagination: true,			// 启用分页
        pageNumber: 1,      			// 初始化加载第一页，默认第一页
        pageSize: 5,      			// 每页的记录行数（*）
        pageList: [5, 10, 15, 'All'],  	// 可供选择的每页的行数（*）
        queryParamsType: 'limit', 	// 默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
        queryParams: {'param': 'testData'},  	// 向后台传递的自定义参数
        sidePagination: 'client',   // 分页方式：client客户端分页，server服务端分页（*）
        search: false,      		// 是否显示表格搜索，此搜索是客户端搜索，不会进服务端
        strictSearch: true,			// 设置为 true启用 全匹配搜索，否则为模糊搜索
        showColumns: false,     		// 是否显示所有的列
        showRefresh: false,     		// 是否显示刷新按钮
        minimumCountColumns: 2,    	// 最少允许的列数
        clickToSelect: true,    	// 是否启用点击选中行
        searchOnEnterKey: true,		// 设置为 true时，按回车触发搜索方法，否则自动触发搜索方法//pagination: true,			// 是否显示分页条
        height: 365,				// 底部栏高
        icons: {
            refresh: 'glyphicon-repeat',
            toggle: 'glyphicon-list-alt',
            columns: 'glyphicon-list'
        },
        iconSize: 'outline',
        
        columns: column, // 列数组
    });
});

后端代码

1. 查询所有普通用户列表

接口地址：/user/queryList 请求方式：POST 请求参数：无响应数据：普通用户列表，格式为JSON数组

2. 根据条件查询普通用户列表

接口地址：/user/queryCondition 请求方式：POST 请求参数：email、nickName、createDate、userState，根据需要传递响应数据：普通用户列表，格式为JSON数组

3. 删除普通用户

接口地址：/user/remove 请求方式：POST 请求参数：id，普通用户ID 响应数据：true表示删除成功，false表示删除失败

4. 添加普通用户

接口地址：具体地址需要根据实际情况定义 请求方式：具体方式需要根据实际情况定义 请求参数：具体参数需要根据实际情况定义 响应数据：具体数据需要根据实际情况定义

5. 修改普通用户

**注意：**以上后端代码示例仅供参考，具体实现方式需要根据实际项目需求进行调整。