最近进行web学习过程中,遇到了一个问题,就是使用登录界面点击登录后,跳转的用户管理界面没有显示出应该显示的表格:
正确应该出现以下内容:
但现在的界面:
经过一番检查,发现是“})”放错了位置。
错误代码:
java">$(function($) {
var $table = $("#usertab");
$table.bootstrapTable({
height:'600px',
// 设置请求的URL,向后台拉取数据
url:'getUserListController.do',
// 设置为HTTP GET方式请求
method:"GET",
columns:[
{
field:'select',
checkbox:true,
align:'center',
valign:'middle'
},
{
field:'id',
title:'编号',
align:'center',
valign:'middle'
},
{
field:'username',
title:'用户名',
align:'center',
valign:'middle'
},
{
field:'sex',
title:'性别',
align:'center',
valign:'middle',
// 格式化数据,将0 1转换为性别
formatter:function(value,row,index){
return ((typeof(value) != "undefined") && (value == 0))?"男":"女";
}
},
{
field:'age',
title:'年龄',
align:'center',
valign:'middle'
},
{
field:'mobilePhone',
title:'电话',
align:'center',
valign:'middle'
},
{
field:'address',
title:'地址',
align:'center',
valign:'middle'
}
],
onCheck:function(row){
$("#remove").removeAttr("disabled");
},
onUncheckAll:function(){
$("#remove").attr("disabled","disabled");
},
onCheckAll:function(){
$("#remove").removeAttr("disabled");
},
onUncheck:function(row){
var selects = $table.bootstrapTable('getSelections');
if(selects.length==0){
$("#remove").attr("disabled","disabled");
}
}
// 添加用户功能
function addUser(){
var userName = $("#username").val();// 获取用户名
var password = $("#password").val();// 获取密码
var sex = $("#sex").val();// 获取性别
var age = $("#age").val();// 获取年龄
var mobilePhone = $("#mobilePhone").val();// 获取电话
var address = $("#address").val();// 获取住址
// 构建请求参数
var param = {
userName:userName,
password:password,
sex:sex,
age:age,
mobilePhone:mobilePhone,
address:address
};
// Ajax请求
$.ajax({
url:'addUserController.do',
data:param,
//async: false // 轻轻方式-异步
// dataType:'JSONP',
success:function(data){
// 添加成功刷新页面
if((typeof(data)!="undefined") && (data==0)){
$table.bootstrapTable('refresh');
}
},complete:function(){
// 页面提交时隐藏表单页
$('#myModal').modal('hide');
},
context:this
});
}
}); //这个“})”不应该在这,应该放在addUser()函数前
// 为添加按钮绑定事件
$("#add").bind("click",addUser);
});
正确代码:
java">$(function($) {
var $table = $("#usertab");
$table.bootstrapTable({
height:'600px',
// 设置请求的URL,向后台拉取数据
url:'getUserListController.do',
// 设置为HTTP GET方式请求
method:"GET",
columns:[
{
field:'select',
checkbox:true,
align:'center',
valign:'middle'
},
{
field:'id',
title:'编号',
align:'center',
valign:'middle'
},
{
field:'username',
title:'用户名',
align:'center',
valign:'middle'
},
{
field:'sex',
title:'性别',
align:'center',
valign:'middle',
// 格式化数据,将0 1转换为性别
formatter:function(value,row,index){
return ((typeof(value) != "undefined") && (value == 0))?"男":"女";
}
},
{
field:'age',
title:'年龄',
align:'center',
valign:'middle'
},
{
field:'mobilePhone',
title:'电话',
align:'center',
valign:'middle'
},
{
field:'address',
title:'地址',
align:'center',
valign:'middle'
}
],
onCheck:function(row){
$("#remove").removeAttr("disabled");
},
onUncheckAll:function(){
$("#remove").attr("disabled","disabled");
},
onCheckAll:function(){
$("#remove").removeAttr("disabled");
},
onUncheck:function(row){
var selects = $table.bootstrapTable('getSelections');
if(selects.length==0){
$("#remove").attr("disabled","disabled");
}
}
});
// 添加用户功能
function addUser(){
var userName = $("#username").val();// 获取用户名
var password = $("#password").val();// 获取密码
var sex = $("#sex").val();// 获取性别
var age = $("#age").val();// 获取年龄
var mobilePhone = $("#mobilePhone").val();// 获取电话
var address = $("#address").val();// 获取住址
// 构建请求参数
var param = {
userName:userName,
password:password,
sex:sex,
age:age,
mobilePhone:mobilePhone,
address:address
};
// Ajax请求
$.ajax({
url:'addUserController.do',
data:param,
//async: false // 轻轻方式-异步
// dataType:'JSONP',
success:function(data){
// 添加成功刷新页面
if((typeof(data)!="undefined") && (data==0)){
$table.bootstrapTable('refresh');
}
},complete:function(){
// 页面提交时隐藏表单页
$('#myModal').modal('hide');
},
context:this
});
}
// 为添加按钮绑定事件
$("#add").bind("click",addUser);
});
错误总结:出现这种错误的原因极有可能是标点符号的多、少或者位置不对引起的。在我的问题中,没有出现我想要的表格,那么我猜问题就出在表格代码这一块,addUser()函数肯定是不能添加到表格中的(当时也不知道傻了还是咋地会放在里面去了)。