`
只是随手瞎打
  • 浏览: 28094 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

easyui 可编辑的数据网格简单的尝试

 
阅读更多
jquery.edatagrid.js下载:http://www.jeasyui.net/extension/190.html在这里的实例里
直接贴代码,看看上面那个网站其实挺容易的
<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2017/2/11
  Time: 12:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/demo/demo.css">
    <script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.edatagrid.js"></script>


</head>
<body>
<table id="dg" title="My Users" style="width:700px;height:250px"
       toolbar="#toolbar"  idField="id_"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="id_" width="50" editor="{type:'validatebox',options:{required:true}}">id_</th>
        <th field="name_" width="50" editor="{type:'validatebox',options:{required:true}}">姓名</th>
        <th field="age_" width="50" editor="text">年龄_</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
    $(function () {
        $('#dg').edatagrid({
            url: 'e_query.do',
            saveUrl: 'e_insert.do',
            updateUrl: 'e_update.do',
            destroyUrl: 'e_delete.do'   //移除一行时会传id过去,而不是id_
        });
    });
</script>
</body>
</html>
分享到:
评论

相关推荐

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    在描述中提到的"Editable DataGrid",指的是DataGrid组件的一个增强功能,允许用户直接在表格内进行数据编辑。 DataGrid是EasyUI中的核心组件之一,用于展示和管理大量结构化的数据。在默认情况下,DataGrid只是...

    easyUI行内可编辑

    在“easyUI行内可编辑”的场景下,我们主要关注的是 EasyUI 表格(grid)组件的可编辑功能。这种功能允许用户在表格的行内直接编辑数据,无需跳转到单独的编辑页面或者弹窗,极大地提升了用户体验。 在 EasyUI 中,...

    EasyUI-1.Datagrid 数据网格

    Datagrid 是 EasyUI 的一个重要组件,它是一个数据表格控件,可以用来展示大量结构化的数据,并提供排序、分页、筛选、编辑等功能,极大地提高了用户体验。 在 `...

    easyui从一个treegrid树形网格往另一个树形网格拖放数据

    下载easyui后使用其中的css和js,从一个treegrid树形网格资源 往另一个空的树形网格拖放数据,支持添加子节点、删除、编辑、保存、取消编辑、刷新、更新数据等功能

    基于easyui的通用导出

    【基于EasyUI的通用导出】是一个功能模块,主要用于在使用EasyUI数据网格时实现数据的便捷导出。EasyUI是一个基于jQuery的UI框架,它提供了丰富的组件和样式,简化了Web开发中的界面构建工作。在这个场景下,我们...

    使用easyui表格数据动态生成饼图

    "使用easyui表格数据动态生成饼图"的主题涉及到前端开发中的几个关键点:EasyUI框架、数据处理以及JavaScript图表库ECharts。下面我们将深入探讨这些知识点。 首先,EasyUI是一个基于jQuery的UI库,它提供了一系列...

    easyui 创建数据网格(DataGrid)

    ### easyui 创建数据网格(DataGrid) 在web开发中,数据展示是非常重要的环节之一,而数据网格(DataGrid)作为常见的数据展示方式被广泛应用。EasyUI作为一种基于jQuery的用户界面插件集合,提供了丰富的组件来...

    easyui 可编辑datagrid完整例子,支持filebox

    在“可编辑 datagrid 完整例子”中,EasyUI 的 datagrid 组件被用作数据展示和编辑的核心。此例子特别强调了对 filebox 的支持,filebox 是 EasyUI 的一个扩展,用于处理文件上传功能。 在标题和描述中提到的“可...

    EasyUI:基本布局&tree菜单数据的绑定&DataGrid数据查询&数据绑定&分页

    在处理大量数据时,分页是必不可少的功能。EasyUI 的 DataGrid 支持分页,只需在初始化时设置 `pagination: true` 即可启用分页。开发者还可以自定义每页显示的条目数,以及分页信息的显示方式。通过 `onLoadSuccess...

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui行编辑实例(仅前台Html代码,无后台代码)

    这个实例主要涉及EasyUI框架中的数据网格(datagrid)组件,它提供了便捷的数据展示和编辑功能。下面将详细解释相关知识点。 1. EasyUI框架:EasyUI是一款基于jQuery的UI库,它简化了网页界面的设计和开发,提供了...

    easyui的datagrid的数据渲染

    easyui的datagrid的数据渲染

    easyui+数据导出为Excel

    本文将详细介绍如何在基于EasyUI的前端框架下实现数据导出为Excel的功能。 EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的组件和样式,帮助开发者快速构建用户界面。然而,EasyUI本身并不直接支持数据...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    EasyUI分页,编辑

    EasyUI 的表格组件(datagrid)提供了多种编辑模式,如行内编辑、弹出窗口编辑等,方便用户对数据进行操作。 #### 2.2 行内编辑 - `editable`:设置为 `true` 启用行内编辑。 - `onDblClickRow`:双击行时触发的...

    easyui-combobox、combotree后台数据数据组装与前台绑定实例

    总结来说,"easyui-combobox、combotree后台数据数据组装与前台绑定实例" 主要涉及两个部分:后端 C# 数据组装成 JSON 格式,以及前端使用 EasyUI 的 Combobox 和 Combotree 组件进行数据绑定。通过这样的方式,我们...

    easyui的combotree控件绑定json数据的例子

    这个简单的例子展示了如何在C#后台生成JSON数据,并在前端页面上利用EasyUI的Combotree进行展示和交互。在实际应用中,可以根据需求调整JSON数据的结构和Combotree的配置,以满足各种场景的需求。

    easyUI行编辑comobox多选显示

    easyUI行编辑comobox 下拉多选显示

    easyui datagrid在编辑状态下更新列的值

    在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地修改列的值,以及确保在编辑结束后,保存的数据反映这些变更。以下将详细介绍这一过程。 首先,EasyUI的...

    easyui-datagrid可编辑可过滤的DEMO

    总的来说,“easyui-datagrid可编辑可过滤的DEMO”是一个实用的教学案例,它展示了EasyUI DataGrid组件的强大功能,以及如何在项目中实现数据的编辑和过滤。对于正在学习或使用EasyUI的开发者来说,这个DEMO提供了...

Global site tag (gtag.js) - Google Analytics