easyUI 数据表格-datagrid

最新推荐文章于 2024-04-04 00:07:39 发布
最新推荐文章于 2024-04-04 00:07:39 发布
阅读量2.6k 收藏
点赞数
分类专栏： WEB 文章标签： jquery easyui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sf2gis2/article/details/49248279
版权
本文介绍了如何使用easyUI的datagrid组件实现类似网页版Excel的数据表格展示，包括直接填充table标签、使用JSON数据填充、通过JS创建及设置复杂表头。内容涵盖表格创建、属性设置、数据填充以及示例代码展示。
摘要由CSDN通过智能技术生成

easyUI 数据表格-datagrid

sf2gis@163.com

2015年9月28日

 

1 目标：数据的表格展示，网页版excel（具有所有功能）。

2 原理：table的扩展封装。

3 流程：创建table，设置为easyui-datagrid。设置属性和数据。

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css" />

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table class="easyui-datagrid"data-options="fitColumns:true,singleSelect:true"style="width:200px;">

           <thead>

                 <tr>

                      <thdata-options="field:'code'">code</th>

                      <thdata-options="field:'name'">name</th>

                      <thdata-options="field:'price'">price</th>

                 </tr>

           </thead>

           <tbody>

                 <tr>

                      <td>01</td>

                      <td>02</td>

                      <td>03</td>

                 </tr>

                 <tr>

                      <td>11</td>

                      <td>12</td>

                      <td>13</td>

                 </tr>

           </tbody>

      </table>

</body>

</html>

4 方法

4.1 创建datagrid控件：填充table标签创建或使用js创建（推荐）。

由于JS创建能够设置复杂的样式，推荐使用js创建。

4.1.1直接填充table标签，生成easyui-datagrid样式

参见：流程：创建table，设置为easyui-datagrid。设置属性和数据。

4.1.2使用table标签的thead构建样式，使用JSON文件填充数据。

示例：使用table标签构建样式。

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript"src="js/highcharts.js"></script>

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="dg" class="easyui-datagrid"

           data-options="fitColumns:true,singleSelect:true,url:'/thbd/pages/BusinessStatistics/clsxxtj_data.json'"

           style="width: 100%;">

           <thead>

                 <tr>

                      <thdata-options="field:'cph'" style="width: 100px;">车牌号</th>

                      <thdata-options="field:'cpys'" style="width: 100px;">车牌颜色</th>

                      <thdata-options="field:'ssqy'" style="width: 100px;">所属企业</th>

                      <thdata-options="field:'sxzs'" style="width: 100px;">上线总数</th>

                      <thdata-options="field:'xxzs'" style="width: 100px;">下线总数</th>

                      <thdata-options="field:'cz',formatter:czRowFormatter"

                            style="width:100px;">操作</th>

                 </tr>

           </thead>

      </table>

      <script type="text/javascript">  

           //format cell to <a> with blue color and underline

           function czRowFormatter(value, row, index) {

                 return "<a href=''style='color:blue;text-decoration:underline;'>"

                            + value + "</a>";

           }

      </script>

</body>

</html>

//clsxxtj_data.json

{"total":4,"rows":[

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"1","xxzs":"36","cz":"查看"},

      {"cph":"京APB－25415","cpys":"黄色","ssqy":"天绘北斗","sxzs":"0","xxzs":"36","cz":"查看"}

]}

 

4.1.3使用js构建样式，填充数据（推荐）。

方法：在html中构建table，使用js设置table的样式和数据。

设置样式Columns：参见复杂表头：多栏表头设计

示例：使用js创建表格。

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:sf2gis@163.com @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<scripttype="text/javascript"src="js/highcharts.js"></script>

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <table id="dg" class="easyui-datagrid"style="width: 100%;"></table>

      <script type="text/javascript">

           $(document).ready(function() {

                 $('#dg').datagrid({

                      url:'/thbd/pages/BusinessStatistics/clsxxtj_data.json',

                      fitColumns:true,

                      columns:[[

                            {field:'cph',title:'车牌号',width:100},

                            {field:'cpys',title:'车牌颜色',width:100},

                            {field:'ssqy',title:'所属企业',width:100},

                            {field:'sxzs',title:'上线总数',width:100},

                            {field:'xxzs',title:'下线总数',width:100},

                            {field:'cz',title:'车牌号',width:100,formatter:czRowFormatter}

                      ]]

                 });

           });

    

最低0.47元/天 解锁文章
弗里曼的小伙伴
关注
专栏目录
easyUI之datagrid（数据表格）使用
03-18 915
‘">’,**在界面中添加数据表格添加相关依赖每个表都需要建立相应的js建立book.js将demo文件中的datagrid.data1.json复制到WebContent目录下book.js代码如下：/*** 注意：js文件中不支持el表达式*/columns:[[{field:‘productname’,title:‘名称’,width:100},{field:‘unitcost’,title:‘价格’,width:100,align:‘right’}]]});})
jQuery EasyUI数据表格之一
weixin_30591551的博客
07-13 92
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":...
easyUI数据表格
chiyangj的博客
06-27 1883
easyUI数据表格（DataGrid）DataGrid的使用二级目录三级目录 DataGrid的使用 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 通过js来创建 二级目录 三级目录 ...
easyui的数据表格
T_Prometheus的博客
10-14 434
$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'代码',width:100}, {field:'name',title:'名称',width:100}, {field:'price',t...
easyui-datagrid之间拖拽效果demo
03-18
首先，Datagrid 是 EasyUI 提供的一种表格控件，它可以展示大量结构化的数据，并支持排序、分页、过滤等多种功能。在拖拽效果中，用户可以直观地将一行或多行数据从一个 Datagrid 拖动到另一个 Datagrid，实现数据的...
EasyUI 数据表格datagrid列自适应内容宽度的实现
10-16
总的来说，实现EasyUI数据表格列宽自适应内容宽度的过程涉及到对数据表格的遍历、对文本内容的长度计算、列宽的动态设置以及对列宽调整功能的冻结。通过这些步骤，我们可以确保数据表格的列宽能够恰当地展示内容，...
EasyUI可扩展Editable DataGrid（可编辑数据表格）
08-10
标题 "EasyUI可扩展Editable DataGrid（可编辑数据表格）" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架，它提供了一系列预定义的CSS样式和...
EasyUI-CRUD-DataGrid
12-27
DataGrid 是 EasyUI 中的一个核心组件，它是一个数据表格，可以展示大量结构化的数据，并支持多种操作，如排序、分页、筛选以及增删改查等。 在"EasyUI-CRUD-DataGrid"这个主题中，我们将深入探讨如何使用 EasyUI ...
easyui-（三）table
u010895694的博客
05-13 684
1.table了 要转换为json格式的数据 自动往后台提交了page和pagesize 后台接收$page = $_POST['page']; $pageSize = $_POST['rows']; $first = $pageSize * ($page - 1); limit $first,$pageSize 返回数据格式total,rows $(function(){
easyUI之datagrid（数据表格）使用，前端高级工程师面试实战
m0_v648374的博客
03-18 1055
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。
EasyUI 数据表格（DataGrid）——第一节
ouYang的博客
07-31 335
接下来我们来看看，EasyUI中的最常用的组件DataGrid的用法，后面会陆续更新。 之前没有学习过EasyUI，但是现在由于工作的需要，所以先挑一些重点学习一下，后面会补充其他的。 JS文件 $(function () { $("#box").datagrid({ //设置请求路径 url:"#", //设置表格...
Easyui table分页
shalyniu的博客
08-05 1054
easyui table 分页
easyUI table
baidu_35975930的博客
03-07 821
需要的包 easyui.css icon.css demo.css jquery.min.js jquery.easyui.min.js HTML代码 333 222222 1111
jQuery 1，web前端自学
最新发布
2301_79055083的博客
04-04 626
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取资料领取方式：点击这里前往免费获取。
easyui datagrid数据表格(一)
前端小白
12-02 569
easyui 中的数据表格，功能齐全，强大。对于表格数据操作提供了很多方法。具体全部属性可参考easyui官网。这里直说一些我在项目中使用到的属性，方法与事件。 数据表格的创建很简单。也有两种方法。 （1）html创建方法：<table class='easyui-datagrid'></table>(2)js创建方法<!--html部分--> <table id='dg'></
EasyUI 表格制作
435956的博客
12-09 1782
jquery EasyUI ●easyui是一种基于jQuery的用户界面插件集合。 ●easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能 ●使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 ● easyui是个完美支持HTML5网页的完整框架。 ● easyui节省您网页开发的时间和规模。 ●easyui很简单但功能强...
EasyUi 数据表格使用
chidi3832的博客
05-31 172
引入CSS ： <link rel="stylesheet" href="__ADMIN__/easy/themes/gray/easyui.css"> 引入JS： <script src="__ADMIN__/easy/jquery.min.js"></s...
个性化定制easyui-datagrid开发实践与技巧
1. **数据加载**：作者通过POST请求的方式，使用`datagrid`组件的`url`属性向后端获取数据，同时设置了各种参数，如`title`、`loadMsg`、`toolbar`等，确保了表格的显示和交互功能，如单选模式、分页等。 2. **参数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

弗里曼的小伙伴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值