jquery easyui 结合jsp简单展现table数据示例

下面详细讲解“jquery easyui 结合jsp简单展现table数据示例”的完整攻略。

什么是 jQuery EasyUI？

jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合，它包含了一些常用的 UI 组件，如：datagrid、tree、panel、window 等，使 Web 开发更加简单和快速。

使用 jQuery EasyUI 展现 Table 数据的基本步骤

1. 引入必要的文件

在 HTML 中引入必要的文件，如：jQuery 库、jQuery EasyUI 库、CSS 样式文件。

<head>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-easyui/1.8.8/jquery.easyui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery-easyui/1.8.8/themes/default/easyui.css">
</head>

2. 编写 HTML 代码

在 HTML 中编写基本的 Table 结构，并添加一个 id，以便在 JavaScript 中引用。

<body>
  <table id="table"></table>
</body>

3. 编写 JavaScript 代码

在 JavaScript 中使用 jQuery EasyUI 的 datagrid 组件，以及 ajax 方法获取数据，最后将数据渲染到表格中。

$(function() {
  $('#table').datagrid({
    url:'data.jsp',
    columns:[[
      {field:'id',title:'ID',width:100},
      {field:'name',title:'Name',width:100},
      {field:'age',title:'Age',width:100}
    ]]
  });
});

其中，data.jsp 是获取数据的 JSP 页面，返回的数据格式为 JSON 格式，例如：

[{"id":"1","name":"Jack","age":"20"},{"id":"2","name":"Tom","age":"22"}]

示例一：使用静态数据展示表格

在 JavaScript 中定义一个静态的 JSON 数据，直接使用该数据展示表格。

<body>
  <table id="table"></table>

  <script>
    var data = [{"id":"1","name":"Jack","age":"20"},{"id":"2","name":"Tom","age":"22"}];
    $(function() {
      $('#table').datagrid({
        data: data,
        columns:[[
          {field:'id',title:'ID',width:100},
          {field:'name',title:'Name',width:100},
          {field:'age',title:'Age',width:100}
        ]]
      });
    });
  </script>
</body>

示例二：使用动态数据展示表格

在 data.jsp 页面中，使用 java 代码动态生成 JSON 数据，然后返回给前端页面。

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%
  List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
  Map<String, Object> map1 = new HashMap<String, Object>();
  map1.put("id", "1");
  map1.put("name", "Jack");
  map1.put("age", "20");
  Map<String, Object> map2 = new HashMap<String, Object>();
  map2.put("id", "2");
  map2.put("name", "Tom");
  map2.put("age", "22");
  list.add(map1);
  list.add(map2);
  String json = com.alibaba.fastjson.JSON.toJSONString(list);
  out.print(json);
%>

在前端页面中，使用 ajax 方法获取数据，然后展示表格。

<body>
  <table id="table"></table>

  <script>
    $(function() {
      $.ajax({
        url: 'data.jsp',
        type: 'post',
        success: function(data) {
          $('#table').datagrid({
            data: JSON.parse(data),
            columns:[[
              {field:'id',title:'ID',width:100},
              {field:'name',title:'Name',width:100},
              {field:'age',title:'Age',width:100}
            ]]
          });
        }
      });
    });
  </script>
</body>

希望这个攻略可以帮助你更好地学习和使用 jQuery EasyUI 在 JSP 页面中展现表格数据。

阅读剩余 62%

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery easyui 结合jsp简单展现table数据示例 - Python技术站