easyui-datagrid crud 表格

最新推荐文章于 2024-09-23 22:21:08 发布
最新推荐文章于 2024-09-23 22:21:08 发布
阅读量132 收藏
点赞数
分类专栏： easyUI 文章标签： easyui datagrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44002250/article/details/118054191
版权
本文展示了如何使用jquery.edatagrid.js插件来简化网页中表格的数据编辑、新增、删除和保存操作。通过配置edatagrid，可以实现对学生信息的便捷管理，包括班级选择、性别选项等，大大提高了开发效率。
摘要由CSDN通过智能技术生成

方法1

<%--
  Created by IntelliJ IDEA.
  User: 22531
  Date: 2021/6/2
  Time: 15:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script src="/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript" src="/js/tt.js"></script>
<table id="dg"></table>
<script type="text/javascript">
    $(function () {
        $('#dg').datagrid({
            url: '/admin/getAllStuInfo',
            saveUrl: 'save_user.php',
            updateUrl: 'update_user.php',
            destroyUrl: 'destroy_user.php',
            columns:[[
                {field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}},
                {field:"id",align:"center",title:'学生ID'},
                {field:"sno",align:"center",title:'学号',editor:{type:'textbox',options:{required:true}}},
                {field:"name",align:"center" ,title:'姓名',editor:{type:'textbox',options:{required:true}}},
                {field:"password", align:"center",title:"密码",editor:{type:'textbox',options:{required:true}}},
                {field:"clazzName" ,align:"center",title:"班级",editor:{type:'combobox',
                        options: {
                            valueField:'name',
                            textField:'name',
                            method:'get',
                            url:'/admin/getAllClazz',
                            required:true,
                            editable:false,
                        }
                    }},
                {field:"dept", align:"center",title:'学院'},
                {field:"sex", align:"center",title:'性别',editor:{type:'combobox',
                        options:{
                            valueField: 'label',
                            textField: 'value',
                            data: [{
                                label: '男',
                                value: '男'
                            },{
                                label: '女',
                                value: '女'
                            }],
                            required:true,
                            editable:false,
                        }
                    }},
                {field:"address" ,align:"center",title:'地址',editor:{type:'textbox',options:{required:true}}},
                {field:"age", align:"center",title:'年龄',editor:{type:'numberbox',options:{required:true}}},
                {field:"phone" ,align:"center",title:'电话',editor:{type:'textbox',options:{required:true}}},
                {field:"dormitory", align:"center",title:'宿舍',editor:{type:'textbox',options:{required:true}}},
                {field:"native_place" ,align:"center",title:'籍贯',editor:{type:'textbox',options:{required:true}}}
            ]],
            iconCls: 'icon-edit',
            title:'增删改学生信息',
            singleSelect: true,
            method: 'get',
            rownumbers:true,
            pagination: true,
            pageSize:10,
            pageList:[10,20,30,40,50],
            idField:'id',
            toolbar: [{
                iconCls: 'icon-reload',
                text:'刷新',
                handler: function(){
                    $('#dg').datagrid('reload');
                }
            },'-',{
                iconCls: 'icon-add',
                text: '新增学生',
                handler: append,
            },'-',{
                iconCls: 'icon-remove',
                text: '删除学生',
                handler: removeIt,
            },'-',{
                iconCls: 'icon-save',
                text: '保存修改或新增操作',
                handler: accept,
            }
            ],
             onClickCell:onClickCell,

        })
    })
</script>

<script type="text/javascript">
    var editIndex = undefined;
    function endEditing(){//判断是否所有列符合要求
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                if (ed){
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
                editIndex = index;
            }else {
                setTimeout(function(){
                    $('#dg').datagrid('selectRow', editIndex);
                },0);
            }
        }
    }

    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{status:'P'});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
        }
    }
    function removeIt(){
        if (editIndex == undefined){return}
        var row = $('#dg').datagrid('getSelected');
        $.messager.confirm('是否删除', '确定删除?', function(r){
            if (r){
                $.get("/admin/adDelStu",{
                    "id":row.id,
                },function (data){
                    if(data.msg==true){
                        $('#dg').datagrid('cancelEdit', editIndex)
                            .datagrid('deleteRow', editIndex);
                        alert("success");
                    }else {
                        alert("删除失败"+data.error);
                    }
                    editIndex = undefined;
                    $('#dg').datagrid('reload');
                })
            }
        });

    }
    function add(){

    }

    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
            var row =  $('#dg').datagrid('getSelected');
            if(row!=null){
                if(row.id== undefined){
                    $.get("/admin/adAddStu",{
                            "password":row.password,
                            "sno":row.sno,
                            "name":row.name,
                            "clazzName":row.clazzName,
                            "sex":row.sex,
                            "age":row.age,
                            "address":row.address,
                            "phone":row.phone,
                            "dormitory" :row.dormitory,
                            "native_place":row.native_place,
                            /*"row":JSON.stringify(row),*///证明可用
                        },
                        function (msg){
                            if(msg.msg==true){
                                alert("更新成功");
                            }else {
                                alert("失败"+msg.error);
                            }
                            editIndex = undefined;
                            $('#dg').datagrid('reload');
                        })
                }else {
                    $.get("/admin/adUpStu",{
                        "id":row.id,
                        "password":row.password,
                        "sno":row.sno,
                        "clazz_id":row.clazz_id,
                        "name":row.name,
                        "clazzName":row.clazzName,
                        "sex":row.sex,
                        "age":row.age,
                        "address":row.address,
                        "phone":row.phone,
                        "dormitory" :row.dormitory,
                        "native_place":row.native_place,
                    }, function (msg){
                        if(msg.msg==true){
                            $('#dg').datagrid('acceptChanges');
                            alert("更新成功");
                        }else {
                            alert("失败"+msg.error);
                        }
                        $('#dg').datagrid('reload');
                    })
                }
            }
        }
    }
</script>
</body>
</html>

当我辛辛苦苦写完这，闲逛发现官方有写好的。啊啊啊啊无语

方法2：
需要jquery.edatagrid.js

<table id="dg"></table>
<script type="text/javascript">
    $(function () {
        $('#dg').edatagrid({
            url: '/admin/getAllStuInfo',
            saveUrl: '/admin/adAddStu',
            updateUrl: '/admin/adUpStu',
            destroyUrl: '/admin/adDelStu',
            columns:[[
                {field:"id",align:"center",title:'学生ID'},
                {field:"sno",align:"center",title:'学号',editor:{type:'textbox',options:{required:true}}},
                {field:"name",align:"center" ,title:'姓名',editor:{type:'textbox',options:{required:true}}},
                {field:"password", align:"center",title:"密码",editor:{type:'textbox',options:{required:true}}},
                {field:"clazzName" ,align:"center",title:"班级",editor:{type:'combobox',
                        options: {
                            valueField:'name',
                            textField:'name',
                            method:'get',
                            url:'/admin/getAllClazz',
                            required:true,
                            editable:false,
                        }
                    }},
                {field:"dept", align:"center",title:'学院'},
                {field:"sex", align:"center",title:'性别',editor:{type:'combobox',
                        options:{
                            valueField: 'label',
                            textField: 'value',
                            data: [{
                                label: '男',
                                value: '男'
                            },{
                                label: '女',
                                value: '女'
                            }],
                            required:true,
                            editable:false,
                        }
                    }},
                {field:"address" ,align:"center",title:'地址',editor:{type:'textbox',options:{required:true}}},
                {field:"age", align:"center",title:'年龄',editor:{type:'numberbox',options:{required:true}}},
                {field:"phone" ,align:"center",title:'电话',editor:{type:'textbox',options:{required:true}}},
                {field:"dormitory", align:"center",title:'宿舍',editor:{type:'textbox',options:{required:true}}},
                {field:"native_place" ,align:"center",title:'籍贯',editor:{type:'textbox',options:{required:true}}}
            ]],
            iconCls: 'icon-edit',
            title:'增删改学生信息',
            singleSelect: true,
            method: 'get',
            rownumbers:true,
            pagination: true,
            pageSize:10,
            pageList:[10,20,30,40,50],
            idField:'id',
            toolbar: [{
                iconCls: 'icon-reload',
                text:'刷新',
                handler: function(){
                    $('#dg').edatagrid('reload');
                }
            },'-',{
                iconCls: 'icon-add',
                text: '新增学生',
                handler: function () {
                    $('#dg').edatagrid('addRow');
                },
            },'-',{
                iconCls: 'icon-remove',
                text: '删除学生',
                handler: function (){
                    $('#dg').edatagrid('destroyRow');
                },
            },'-',{
                iconCls: 'icon-save',
                text: '保存修改或新增操作',
                handler: function () {
                    $('#dg').edatagrid('saveRow');
                },
            },'-',{
                iconCls: 'icon-undo',
                text: '取消',
                handler: function () {
                    $('#dg').edatagrid('cancelRow');
                },
            }],
        })
    })
</script>
</body>
@LitterFisher
关注
专栏目录
jQueryEasyUI应用 – datagrid之CRUD应用
09-26 183
本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一、前言准备 1、我们将使用下面的插件： datagrid：向用户展示列表数据。 dialog：创建或编辑一条单一的用户信息。 form：用于提交表单数据。 messager：显示一些操作信息。 2、数据库准备 CREATE TABLE `users...
使用easyUI创建一个CRUD DataGrid
YHC
08-08 4137
@author YHC 在以前的示例中我们创建crud应用使用对话框(dialog)组件创建和编辑用户信息,这个教程将告诉你如何创建一个crud datagrid,我们将使用可编辑的datagrid插件做这些crud操作动作. 查看DEMO 步骤1:在HTML标记中定义一个DataGrid <table id="dg" title="My Users" style="w
雷林鹏分享：jQuery EasyUI 应用 - 创建 CRUD 数据网格
weixin_30267697的博客
05-16 139
　　jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid) 　　在上一章节中，我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息。本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid)。 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作。 　　步骤 1：在 HTML 标签中定义数据网格...
struts2 easyui实现datagrid的crud
程序员小董的专栏
03-12 2781
最近两天因为项目需要,接触了easyui,要用它的datagrid实现crud。第一次做,花了一天时间才完成所有功能,昨天做另外一个模块,同样的功能只用了两个小时。 现在把第一次做datagrid时遇到的问题记录下来,帮助自己记忆。同时也帮助其他第一次接触easyui的朋友。 问题 json到底有多少种? 当时项目里json的jar包是我直接从别的项目里拷过来的。结果在下面的语句里报错
easyui的crud（datagrid、dialog、form）
qq_43226989的博客
10-08 263
基本操作（如果需要详细了解请去jQuery EasyUI API 里了解） 1、datagrid（数据表格） 数据表格是基于table标签的 $(’#dg’).datagrid({ url:‘datagrid_data.json’, columns:[[ {field:‘code’,title:‘代码’,width:100}, {field:‘name’,title:‘名称’,width:1...
EasyUI-CRUD-DataGrid
12-27
在"EasyUI-CRUD-DataGrid"这个主题中，我们将深入探讨如何使用 EasyUI 的 DataGrid 实现CRUD（Create、Read、Update、Delete）操作。CRUD是数据库管理的基本操作，对于任何数据驱动的应用程序来说都是至关重要的。 ...
初识通用数据库操作类——前端easyui-datagrid，form（php）
10-23
easyui-datagrid是基于jQuery EasyUI框架的一个组件，它可以用来在前端页面上展示表格形式的数据。其特点包括支持分页、排序、远程数据加载等功能。文件描述中提到的easyui-datagrid组件能够左侧显示简略信息，右侧...
easyui-crud-demo
07-21
"easyui-crud-demo" 是一个使用 jQuery EasyUI 实现的CRUD（创建、读取、更新、删除）操作的示例项目。这个项目涵盖了从数据获取、展示到用户交互的核心功能，下面我们将详细解析其关键知识点。 1. **jQuery EasyUI...
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
10-23
EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的组件，如对话框（dialog）、表格（datagrid）、表单（form）等，使得开发者能够快速构建界面美观、功能丰富的 web 应用。在本教程中，我们将关注如何使用 ...
mvc4.0+easyui-CRUD
05-26
4. **视图创建**：为每个操作创建视图，使用EasyUI组件构建用户界面，如使用`datagrid`展示数据，`dialog`进行编辑和删除操作。 5. **绑定数据**：控制器将模型数据传递给视图，使用`@model`指令和`@Html`辅助方法...
easyui crud java_jquery easyui利用DataGrid实现CRUD操作
weixin_34902464的博客
02-23 159
在easyui中，DataGrid可以通过detailview实现行的展开和收缩，利用这个特性可以实现基本的CRUD操作。如下图：展开行时，动态加载表单并装载数据，保存或取消表单操作时再收缩行。首先，建立表格基本框架：复制代码 代码示例:First NameLast NamePhoneEmailNewDestroy以上代码把DataGrid和工具栏都建好了，不用再编写JS代码。2，接着，应用det...
jQuery EasyUI 框架实现一个 CRUD DataGrid
ancientear的博客
09-18 318
创建CRUD应用（ jQuery EasyUI 框架实现一个 CRUD DataGrid） crud是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。crud主要被用在描述软件系统中数据库或者持久层的基本操作功能。 在这里需要四个插件： • datagrid：向用户展示列表数据。 • dialog：创建或编辑一条...
jQuery EasyUI使用教程之构建CRUD DataGrid
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-22 734
在本教程中，我们将为大家展示如何创建一个CRUD DataGrid。在这期间将使用到可编辑的datagrid插件来同这些crud操作一起工作。 Step 1：在HTML标记中定义DataGrid 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
【第十五篇】easyui datagrid的列编辑，同时插入两张表的数据进去
agjblloc94239的博客
10-09 197
看图说话。 需求：插入两张表，上面的表单是第一张表的内容，下面的两个表格是第二张详情表的内容，跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的。 国际惯例，上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> ...
使用easyui的DataGrid实现即时编辑(CRUD)
smwhotjay的专栏
05-10 609
首先来个Basic DataGrid，只显示列表。如图tag_cloud.sql /* Navicat MySQL Data Transfer Source Server         : code Source Server Version : 50538 Source Host           : localhost:3306 Source Database       : blog...
【EasyUI篇】SSM+MySQL+DataGrid实现CRUD
ouYang的博客
08-07 1145
使用SSM实现删除，增加，更新操作，至此，前后台实现了增删改查。 使用SSM框架+EasyUI DataGrid数据表格实现了基本的增删改查，以及对数据分页，排序功能的实现。 项目的目录结构： 数据库设计： ​ 数据库设计请查看第二节 PoJo类： package com.ooyhao.pojo; import java.io.Serializable; import java...
自然语言处理实战项目
最新发布
隔窗听雨眠的博客
09-23 1190
自然语言处理是计算机科学和人工智能（artificial intelligence，AI）的一个研究领域，它关注自然语言（如英语或汉语普通话）的处理。这种处理通常包括将自然语言转换成计算机能够用于理解这个世界的数据（数字）。同时，这种对世界的理解有时被用于生成能够体现这种理解的自然语言文本（即自然语言生成）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值