61,112
社区成员
发帖
与我相关
我的任务
分享easyui页面只显示json串，不显示样式和jquery效果
引入easyui相关js和css之后，由后台获取数据在前台显示，页面只显示json串，不显示样式和jquery效果，代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored ="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pagination - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/icon.css">
<!-- link rel="stylesheet" type="text/css" href="../css/themes/demo.css"-->
<script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#mydatagrid').datagrid({
title : 'datagrid实例',
iconCls : 'icon-ok',
width : 600,
pageSize : 5,//默认选择的分页是每页5行数据
pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合
nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
striped : true,//设置为true将交替显示行背景。
collapsible : true,//显示可折叠按钮
toolbar:"#tb",//在添加 增添、删除、修改操作的按钮要用到这个
url:'UserInfoAction.action',//url调用Action方法
loadMsg : '数据装载中......',
singleSelect:true,//为true时只能选择单行
fitColumns:true,//允许表格自动缩放，以适应父容器
//sortName : 'xh',//当数据表格初始化时以哪一列来排序
//sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
remoteSort : false,
frozenColumns : [ [ {
field : 'ck',
checkbox : true
} ] ],
pagination : true,//分页
rownumbers : true//行数
});
});
</script>
</head>
<body>
<h2>
<b>easyui的DataGrid实例</b>
</h2>
<table id="mydatagrid">
<thead>
<tr>
<th data-options="field:'userid',width:100,align:'center'">学生学号</th>
<th data-options="field:'username',width:100,align:'center'">姓名</th>
<th data-options="field:'gender',width:100,align:'center'">性别</th>
<th data-options="field:'password',width:100,align:'center'">年龄</th>
</tr>
</thead>
</table>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored ="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pagination - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/icon.css">
<!-- link rel="stylesheet" type="text/css" href="../css/themes/demo.css"-->
<script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#mydatagrid').datagrid({
title : 'datagrid实例',
iconCls : 'icon-ok',
width : 600,
pageSize : 5,//默认选择的分页是每页5行数据
pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合
nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
striped : true,//设置为true将交替显示行背景。
collapsible : true,//显示可折叠按钮
toolbar:"#tb",//在添加 增添、删除、修改操作的按钮要用到这个
url:'UserInfoAction.action',//url调用Action方法
loadMsg : '数据装载中......',
singleSelect:true,//为true时只能选择单行
fitColumns:true,//允许表格自动缩放，以适应父容器
//sortName : 'xh',//当数据表格初始化时以哪一列来排序
//sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
remoteSort : false,
frozenColumns : [ [ {
field : 'ck',
checkbox : true
} ] ],
pagination : true,//分页
rownumbers : true//行数
});
});
</script>
</head>
<body>
<h2>
<b>easyui的DataGrid实例</b>
</h2>
<table id="mydatagrid">
<thead>
<tr>
<th data-options="field:'userid',width:100,align:'center'">学生学号</th>
<th data-options="field:'username',width:100,align:'center'">姓名</th>
<th data-options="field:'gender',width:100,align:'center'">性别</th>
<th data-options="field:'password',width:100,align:'center'">年龄</th>
</tr>
</thead>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
qq_36171029 2016-12-12
- 打赏
- 举报
路径有什么错误啊
whataboutnow-NEU 2015-10-09
- 打赏
- 举报
多谢版主，找到错误了，是url路径错误，谢谢版主
街头小贩 2015-10-08
- 打赏
- 举报
打开浏览器的控制台没有什么错误吗。没用过easyui，看不出有什么语法错误
whataboutnow-NEU 2015-10-08
- 打赏
- 举报
