转自:https://blog.csdn.net/l3922768721/article/details/51597977
导入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>