jsp+easyui+DataGrid 例子

转自: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>

 

posted @ 2018-06-11 21:39  习惯沉淀  阅读(1359)  评论(0)  编辑  收藏  举报