EasyUI之datagrid展示数据列表

最新推荐文章于 2024-07-25 09:32:15 发布

「已注销」

最新推荐文章于 2024-07-25 09:32:15 发布

阅读量4.4w

点赞数 35

分类专栏： jQuery实战文章标签： easyui datagrid hellowrod

本文链接：https://blog.csdn.net/zhang5476499/article/details/80189395

版权

这篇博客介绍了如何使用EasyUI的datagrid展示数据列表，包括如何引入EasyUI的必要文件，通过json数据动态渲染表格，以及使用JavaScript生成datagrid。通过实例展示了datagrid的基本配置和属性，如url、columns，帮助读者掌握EasyUI的使用。

摘要由CSDN通过智能技术生成

写在最前：

如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统，第一次接触到EasyUI的时候，往往会有一个大大的疑问，这EasyUI是如何做跳转的啊？增删改查都不知道如何下手了！但是当你知道有RestFul编程的时候。你会恍然大悟：我靠，RestFul+EasyUI简直就是绝配呀！博主就是如此：在写完一个增删改查之后，才发现EasyUI越学越有意思，页面都是靠局部刷新来动态展示数据，这比页面跳转要快的多。不用考虑跳转到哪个视图，也不用重定向和转发，纯静态的html据说能让你的网页快速相应！博主是边做项目边学习同时，貌似摸到了学习的乐趣与门路，于是乎下定决心写这一系列EasyUI文章，以供后来者当作学习案例，同时也供其他Coder/Pragrammer提供解决方案。博主不敢说写出来的文章是最好的，技术总结最权威的，文笔最流畅的，但绝对保证实验是运行通过的，文章是一字一句码出来的！拒绝做Copy党。如果你觉得本系列博客技术含量不高，不够逼格，请一谂而视之，毕竟每个人都是从菜鸟阶段过来的。如果你觉得文章对你有帮助，无需通知笔者直接转载，转载时请著名出处。

每当学习一门新的技术之初，第一个程序都应当从HelloWorld开始写起，但是EasyUI应该不是属于新的技术，只是把UI界面紧密的结合jQuery绑定的事件做了封装。如果你拥有Html、Css、JavaScript、jQuery基础，那么我觉得从下面这个案例当作EasyUI的HelloWorld程序也没什么问题：


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo1</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/jquery-1.7.2.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery-easyui-1.3.0/themes/icon.css" type="text/css"/>
</head>
<body>
<table id="userList" class="easyui-datagrid" style="width:600px;height:250px"
            title="用户列表" iconCls="icon-save">
        <thead>
            <tr>
                <th field="productid" width="80" align="center">学号</th>
                <