您的位置：首页 > 产品设计 > UI/UE

jsp+easyui+DataGrid 例子

2016-06-06 20:17 369 查看
导入js和css

<%@ page language="java" contentType="text/html;  charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<meta charset="UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="${ctx}/css/dtree.css">
<script type="text/javascript" src="${ctx}/js/easyui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="${ctx}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/easyui/jquery.edatagrid.js"></script>
<link rel="stylesheet" href="${ctx}/css/easyui/demo.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/easyui/easyui.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/easyui/icon.css" type="text/css">
<script src="${ctx}/js/dtree.js" type="text/javascript"></script>


jsp代码

<html>
<head>
<base href="${ctx}">
<title>用户信息</title>
<script type="text/javascript">
var jsondata='{"total":1,"rows":[{"username":"001","password":"001"},{"username":"002","password":"002"},{"username":"002","password":"002"}]}';
var data = $.parseJSON(jsondata); //json格式化
$(document).ready(function(){
$("#dg").datagrid({
title: "用户信息列表",
width: 700,
height: 'auto',
striped: true,
rownumbers: true,
singleSelect: true,
nowrap: true,
pagination: true,
columns:[[
{field:"username",title:"用户名",width:100},
{field:"password",title:"密码",width:100}
]]
})
$("#dg").datagrid('loadData', data);//加载数据，不加表格数据不会显示

});
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>


对于初学者很有用，后面可以将json对象由后台传入。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航