jsp+easyui+DataGrid 例子

最新推荐文章于 2024-06-15 03:21:37 发布

技术无国界

最新推荐文章于 2024-06-15 03:21:37 发布

阅读量6.9k

点赞数 1

分类专栏： easyui 文章标签： datagrid easyui jsp 例子

本文链接：https://blog.csdn.net/l3922768721/article/details/51597977

版权

easyui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

导入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
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jsp+easyui+DataGrid 例子

导入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.
复制链接

扫一扫

专栏目录