easyUi使用$("dataGridUser").datagrid出错jquery.min.js 'nodeName' 为空或不是对象
easyUi使用$("#dataGridUser").datagrid报错jquery.min.js 'nodeName' 为空或不是对象
html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/test1/easyUi/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/test1/easyUi/themes/icon.css">
<script type="text/javascript" src="/test1/easyUi/jquery.min.js"></script>
<script type="text/javascript" src="/test1/easyUi/jquery.easyui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户显示列表</title>
<script type="text/javascript">
$("#dataGridUser").datagrid({
rownumbers:true,
title:'用户显示列表',
pagination : true,//分页控件
url : 'http://localhost:8080/test1/user/getUserList',
loadMsg : '数据装载中......',
singleSelect : true,
queryParams : {
"userName" : $("#userName").val(),
"phoneNumber" : $("#phoneNumber").val(),
"address" : $("#address").val()
},
columns:[ [
{
field : 'ck',
checkbox : true },
{
field : 'id',
title : '主键',
width : 200,
align : 'center',
hidden : true,
editor : {
type : 'text'
}
},
{
field : 'userName',
title : '用户名',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'address',
title : '地址',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'phoneNumber',
title : '电话',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'age',
title : '年龄',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'status',
title : '身份',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
},
formatter : function(value, row,index) {
if ("" != value)
return "0" == value ? "普通用户" : "管理员";
}
}
] ]
});
//分页控件
var p = $('#dataGridUser').datagrid('getPager');
$(p).pagination({
pageSize : 10,//每页显示的记录条数，默认为10
pageList : [ 5, 10, 15 ],//可以设置每页记录条数的列表
beforePageText : '第',//页数文本框前显示的汉字
afterPageText : '页 共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
function searchList() {
alert("start");
var queryParams = $('#dataGridUser').datagrid('options').queryParams;
alert(queryParams);
queryParams.userName = $("#userName").val();
queryParams.phoneNumber = $("#phoneNumber").val();
queryParams.address = $("#address").val();
$('#dataGridUser').datagrid('load');
}
</script>
</head>
<body>
<div align="center" data-options="closable:true">
<table cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add();">增加</a></td>
<td>
<div class="datagrid-btn-separator"></div>
</td>
<td><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit();">编辑</a></td>
<td>
<div class="datagrid-btn-separator"></div>
</td>
<td><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroy();">删除</a></td>
</tr>
</table>
<div >
用户名: <input class="easyui-input" style="width: 80px" id="userName" name="userName">
联系电话: <input class="easyui-input" style="width: 80px" id="phoneNumber" name="phoneNumber">
地址: <input class="easyui-input" style="width: 80px" id="address" name="address">
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" onclick="searchList();">查询</a>
<input type="button" value="点击" onclick="clickButton()">
</div>
<table id="dataGridUser" type="dataGrid" data-options="toolbar:'#toolBar'">
html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/test1/easyUi/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/test1/easyUi/themes/icon.css">
<script type="text/javascript" src="/test1/easyUi/jquery.min.js"></script>
<script type="text/javascript" src="/test1/easyUi/jquery.easyui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户显示列表</title>
<script type="text/javascript">
$("#dataGridUser").datagrid({
rownumbers:true,
title:'用户显示列表',
pagination : true,//分页控件
url : 'http://localhost:8080/test1/user/getUserList',
loadMsg : '数据装载中......',
singleSelect : true,
queryParams : {
"userName" : $("#userName").val(),
"phoneNumber" : $("#phoneNumber").val(),
"address" : $("#address").val()
},
columns:[ [
{
field : 'ck',
checkbox : true },
{
field : 'id',
title : '主键',
width : 200,
align : 'center',
hidden : true,
editor : {
type : 'text'
}
},
{
field : 'userName',
title : '用户名',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'address',
title : '地址',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'phoneNumber',
title : '电话',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'age',
title : '年龄',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
}
},
{
field : 'status',
title : '身份',
fitColumns : true,
align : 'center',
editor : {
type : 'text'
},
formatter : function(value, row,index) {
if ("" != value)
return "0" == value ? "普通用户" : "管理员";
}
}
] ]
});
//分页控件
var p = $('#dataGridUser').datagrid('getPager');
$(p).pagination({
pageSize : 10,//每页显示的记录条数，默认为10
pageList : [ 5, 10, 15 ],//可以设置每页记录条数的列表
beforePageText : '第',//页数文本框前显示的汉字
afterPageText : '页 共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
function searchList() {
alert("start");
var queryParams = $('#dataGridUser').datagrid('options').queryParams;
alert(queryParams);
queryParams.userName = $("#userName").val();
queryParams.phoneNumber = $("#phoneNumber").val();
queryParams.address = $("#address").val();
$('#dataGridUser').datagrid('load');
}
</script>
</head>
<body>
<div align="center" data-options="closable:true">
<table cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add();">增加</a></td>
<td>
<div class="datagrid-btn-separator"></div>
</td>
<td><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit();">编辑</a></td>
<td>
<div class="datagrid-btn-separator"></div>
</td>
<td><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroy();">删除</a></td>
</tr>
</table>
<div >
用户名: <input class="easyui-input" style="width: 80px" id="userName" name="userName">
联系电话: <input class="easyui-input" style="width: 80px" id="phoneNumber" name="phoneNumber">
地址: <input class="easyui-input" style="width: 80px" id="address" name="address">
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" onclick="searchList();">查询</a>
<input type="button" value="点击" onclick="clickButton()">
</div>
<table id="dataGridUser" type="dataGrid" data-options="toolbar:'#toolBar'">