jsp+easyui+DataGrid 例子

来源：互联网发布：淘宝退货物流信息填错编辑：程序博客网时间：2024/05/29 04:07

导入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对象由后台传入。

1 0