SSH--------------easyui-datagrid的使用(1、列表初步使用)

最新推荐文章于 2023-03-01 13:59:50 发布
最新推荐文章于 2023-03-01 13:59:50 发布
阅读量103 收藏
点赞数
分类专栏： SSH jQuery EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32659773/article/details/105975030
版权

1、在页面中获取

<%--
  Created by IntelliJ IDEA.
  User: Dong
  Date: 2020/4/27
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree3.5/zTreeStyle.css" type="text/css">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/ztree3.5/jquery.ztree.all-3.5.js"></script>
</head>
<body>

<table class="easyui-datagrid">
    <thead>
    <tr>
        <th data-options="field:'itemid',width:80">编号</th>
        <th data-options="field:'productid',width:100">姓名</th>
        <th data-options="field:'listprice',width:80,align:'right'">手机号</th>

    </tr>
    </thead>
    <tr>
    <td>A01</td>
    <td>李三</td>
    <td>110</td>
</tr>
    <tr>
        <td>A01</td>
        <td>李三</td>
        <td>110</td>
    </tr>
</table>
</body>
</html>

 2、在JSON文件中获取

<%--
  Created by IntelliJ IDEA.
  User: Dong
  Date: 2020/4/27
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree3.5/zTreeStyle.css" type="text/css">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/ztree3.5/jquery.ztree.all-3.5.js"></script>
</head>
<body>


<table class="easyui-datagrid" data-options="url:'${pageContext.request.contextPath}/demo/stafftest.json'">
    <thead>
    <tr>
        <th data-options="field:'id',width:80">编号</th>
        <th data-options="field:'name',width:100">姓名</th>
        <th data-options="field:'age',width:80,align:'right'">手机号</th>

    </tr>
    </thead>

</table>
</body>
</html>

stafftest.json：
[
  {"id":"001","name":"李大","age":"13912345678","haspda":"1","deltag":"0","standard":"10-20公斤","station":"杭州分部"},
  {"id":"002","name":"李二","age":"13912345678","haspda":"1","deltag":"0","standard":"10-20公斤","station":"杭州分部"},
  {"id":"003","name":"李二","age":"13912345678","haspda":"1","deltag":"0","standard":"10-20公斤","station":"杭州分部"},
  {"id":"004","name":"李二","age":"13912345678","haspda":"1","deltag":"0","standard":"10-20公斤","station":"杭州分部"}
]

 

3、通过JS动态创建datagrid

  1. 代码：

<script type="text/javascript">

    $(function () {

       $('#grid').datagrid({   

           url:'/Bos/json/stafftest.json',   

           columns:[[   

               {field:'id',title:'编号',width:100,checkbox:true},   

               {field:'name',title:'名字',width:100},   

               {field:'age',title:'手机',width:100,align:'right'}   

           ]],

           toolbar: [{

              iconCls: 'icon-edit',

              text:'Edit',

              handler: function(){alert('编辑按钮')}

           },'-',{

              iconCls: 'icon-help',

              text:'Help',

              handler: function(){alert('帮助按钮')}

           },'-',{

              text:'删除',

              handler: function(){}

           },'-',{

              text:'修改',

              handler: function(){}

           }]

 

       });

    });

</script>

js的方式渲染datagrid

<table id="grid"></table>

 

保温杯有枸杞
关注
专栏目录
EasyUI之datagrid的复选框使用
El Psy Congroo
07-09 1万+
EasyUI 添加复选框 复选框是什么：放置一个复选框列到数据网格（DataGrid），用户将可以选择 选中/取消选中 网格行数据。 如何放置一个复选框：为了添加一个复选框列，只需添加一个列的 checkbox 属性，并设置它为 true。代码如下所示： &lt;table id="tt" title="Checkbox Select" class="easyui-datagrid" s...
【UI集锦】EasyUI-datagrid分页查询前端显示
IT Girl
09-02 2521
数据表格对于做项目来说尤其是后台，是经常遇到的。便于人们对数据的分析和操作。EasyUIdatagrid数据表格，有两种方式可以实现，一种是用JSP写，另一种是用JS拼表格。     第一种：JSP代码  <table class="easyui-datagrid" id="dg" " data-options="rownumbers:true,singleSelect:false,p
SSH——基于datagrid实现分页查询
weixin_34220963的博客
06-17 95
1. 修改页面中datagrid的URL地址，访问action // 取派员信息表格 $('#grid').datagrid( { iconCls : 'icon-forward', fit : true, border : false, rownumbers :...
DataGrip通过ssh连接远程数据库(服务器部署数据库)
最新发布
都是自己踩过的坑的博客
03-01 3678
DataGrip通过ssh连接远程数据库(服务器部署数据库)
SSh结合Easyui实现Datagrid的分页显示
崔向阳@李晓的博客
04-28 1955
近日学习Easyui，发现非常好用，界面很美观。将学习的心得在此写下，这篇博客写SSh结合Easyui实现Datagrid的分页显示，其他的例如添加、修改、删除、批量删除等功能将在后面的博客一一写来。     首先看一下要实现的效果：当每页显示5行数据：            当每页显示10行数据，效果如下：具体步骤：1、下载Easyui，并搭建环境。可参照博客http://blog.csdn.n
SSH-Easyui Datagrid 实现批量删除功能
qq_37950416的博客
08-26 355
jsp页面 按钮 列表显示 把批量删除的数据id传输到后端 创建String 【】idb 接收id servserImpl
SSH-BOS项目：工作单快速录入
Bbb的博客
04-17 270
WorkordermanageAction：package com.xushuai.bos.web.action; import java.io.IOException; import java.util.List; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory....
SSH-BOS项目：角色管理模块
Bbb的博客
04-19 397
RoleAction：package com.xushuai.bos.web.action; import java.io.IOException; import java.util.Set; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.A...
SSH-BOS项目：业务通知单模块
Bbb的博客
04-13 351
NoticebillAction：package com.xushuai.bos.web.action; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Qualifier; import org.springfra...
easyui datagrid+SSH集成项目问题
08-04
这里讨论的是如何在使用EasyUI的DataGrid组件与SSH（Struts2、Spring、Hibernate）框架集成时解决可能出现的问题。EasyUI的DataGrid是一个强大的表格展示组件，而SSH是一种常见的Java Web开发框架组合。 1. **...
SSh结合Easyui实现Datagrid的分页显示（多个实例）
01-12
【SSh结合Easyui实现Datagrid的分页显示】是一个典型的Web开发应用场景，涉及到Spring、Struts2和Hibernate（SSh）三大框架与EasyUI前端组件的整合。在这个实例中，我们将探讨如何利用这些技术来实现一个具备分页...
SSH结合EasyUI的分页操作（数据的增删改查）
ColeSteve的博客
07-31 4339
SSH结合EasyUI的分页操作（数据的增删改查）一.效果展示图如下： 注：1.可以根据条件进行检索，结果直接显示在列表当中。 2.可以双击当前行，进入编辑模式，点击保存则修改确认，点击撤销则取消编辑。 3.点击添加，会在第一行新增编辑行，点击保存，会在列表的结尾新增一条记录。二.前端代码分析 Body部分代码 <body>
DataGrip通过ssh连接远程主机mysql，mac、windows通用
热门推荐
YTREE_BJ的博客
01-01 1万+
需求 1.想通过datagrip直接连接远程主机上的mysql。 困难 1.出于安全考虑，远程主机上的mysql 3306端口并没有对外开放，因此不能像本地连接数据库那么方便。 解决过程 1.在windows下通过xshell建立隧道，即可将远程主机上的mysql端口进行映射到本地指定端口，这样与需要连接数据库时，都需要进行使用xshell登陆远程主机，否则数据库是连接不上的。 通过xshell ...
SSH-----------请假流程图及把流程图保存到数据库
qq_32659773的博客
06-09 793
设计一个请假流程图 在Eclipse中，利用activiti插件创建一个请假流程图 在每一个任务中，找到Main config的Assignee中，先固定每个任务的受理人 部署流程定义 就是把流程存入数据库,写个单元测试代码 流程定义部署完后，会在act_re_deployment和act_re_procdef两张表存储数据， deployment的ID每次增加100 同一个流程的procdef表的version是递增的 @Test ...
SSH--------net.sf.json.JSONException: java.lang.reflect.InvocationTargetException 报错解决办法
qq_32659773的博客
05-14 591
HTTP Status 500 - Unable to show problem report: freemarker.core._TemplateModelException: Java method "org.apache.commons.lang.exception.NestableRuntimeException.getMessage(int)" threw an exception when invoked on net.sf.json.JSONException object "net.sf.j
SSH---------mysql远程连接问题（连接超时）
qq_32659773的博客
04-28 513
默认情况下，使用 IP地址和root进行登录是访问不了数据库 默认情况下root不能远程访问 关键是把mysql里的user表的，把root的host改成%号，代表任何主机都能访问 User mysql; Update user set Host=’%’ where User=’root’ 注意：重启mysql: ...
SSH--------创建数据库（MySQL）并授予权限
qq_32659773的博客
04-28 501
步骤： 创建一个数据库，打开命令行，先使用root用户登录系统MySQL mysql> create database bos; 创建一个数据库用户 mysql> create user 111identified by '123456'; ...
基于jquery-easyui的主题开发机电设备管理系统
知识点1：jquery-easyui的介绍 jquery-easyui是一个基于jQuery的前端UI框架，它提供了一套完整的组件和插件，使得开发者能够轻松构建出美观、功能强大的Web界面。jquery-easyui的主要特点包括轻量级、易于学习、易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值