在jQuery EasyUI中实现对DataGrid进行编辑

最新推荐文章于 2021-02-21 10:35:14 发布
最新推荐文章于 2021-02-21 10:35:14 发布
阅读量2.8k 收藏 1
点赞数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery EasyUI</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script>
        var users = {total:6,rows:[
            {no:1,name:'用户1',addr:'山东济南',email:'user1@163.com',birthday:'1/1/1980'},
            {no:2,name:'用户2',addr:'山东济南',email:'user2@163.com',birthday:'1/1/1980'},
            {no:3,name:'用户3',addr:'山东济南',email:'user3@163.com',birthday:'1/1/1980'},
            {no:4,name:'用户4',addr:'山东济南',email:'user4@163.com',birthday:'1/1/1980'},
            {no:5,name:'用户5',addr:'山东济南',email:'user5@163.com',birthday:'1/1/1980'},
            {no:6,name:'用户6',addr:'山东济南',email:'user6@163.com',birthday:'1/1/1980'}
        ]};
        $(function(){
            $('#tt').datagrid({
                title:'Editable DataGrid',
                iconCls:'icon-edit',
                width:530,
                height:250,
                singleSelect:true,
                columns:[[
                    {field:'no',title:'编号',width:50,editor:'numberbox'},
                    {field:'name',title:'名称',width:60,editor:'text'},
                    {field:'addr',title:'地址',width:100,editor:'text'},
                    {field:'email',title:'电子邮件',width:100,
                        editor:{
                            type:'validatebox',
                            options:{
                                validType:'email'
                            }
                        }
                    },
                    {field:'birthday',title:'生日',width:80,editor:'datebox'},
                    {field:'action',title:'操作',width:70,align:'center',
                        formatter:function(value,row,index){
                            if (row.editing){
                                var s = '<a href="#" οnclick="saverow('+index+')">保存</a> ';
                                var c = '<a href="#" οnclick="cancelrow('+index+')">取消</a>';
                                return s+c;
                            } else {
                                var e = '<a href="#" οnclick="editrow('+index+')">编辑</a> ';
                                var d = '<a href="#" οnclick="deleterow('+index+')">删除</a>';
                                return e+d;
                            }
                        }
                    }
                ]],
                toolbar:[{
                    text:'增加',
                    iconCls:'icon-add',
                    handler:addrow
                },{
                    text:'保存',
                    iconCls:'icon-save',
                    handler:saveall
                },{
                    text:'取消',
                    iconCls:'icon-cancel',
                    handler:cancelall
                }],
                onBeforeEdit:function(index,row){
                    row.editing = true;
                    $('#tt').datagrid('refreshRow', index);
                    editcount++;
                },
                onAfterEdit:function(index,row){
                    row.editing = false;
                    $('#tt').datagrid('refreshRow', index);
                    editcount--;
                },
                onCancelEdit:function(index,row){
                    row.editing = false;
                    $('#tt').datagrid('refreshRow', index);
                    editcount--;
                }
            }).datagrid('loadData',users).datagrid('acceptChanges');
        });
        var editcount = 0;
        function editrow(index){
            $('#tt').datagrid('beginEdit', index);
        }
        function deleterow(index){
            $.messager.confirm('确认','是否真的删除?',function(r){
                if (r){
                    $('#tt').datagrid('deleteRow', index);
                }
            });
        }
        function saverow(index){
            $('#tt').datagrid('endEdit', index);
        }
        function cancelrow(index){
            $('#tt').datagrid('cancelEdit', index);
        }
        function addrow(){
            if (editcount > 0){
                $.messager.alert('警告','当前还有'+editcount+'记录正在编辑，不能增加记录。');
                return;
            }
            $('#tt').datagrid('appendRow',{
                no:'',
                name:'',
                addr:'',
                email:'',
                birthday:''
            });
        }
        function saveall(){
            $('#tt').datagrid('acceptChanges');
        }
        function cancelall(){
            $('#tt').datagrid('rejectChanges');
        }
    </script>
</head>
<body>
<h1>Editable DataGrid</h1>
<table id="tt"></table>
</body>
</html>
lenovouser
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui(datagrid数据新增)
weixin_66202611的博客
05-07 287
增加数据嘛~，主要在于sql语句，以及方法，方法写好了调用一波 为了界面的美观我们可以在Easyui文档里找到合适的样式，这样不仅节省了时间，还能有个好看点的界面。 以下是本人使用的对话框窗口样式 <div style="margin-top:20px;"> <label for="name">书籍名称</label> <input class="easyui-textbox" type="text" na.
easyUI 在datagrid中进行单元格编辑，并在单元格加入自定义combobox下拉框
我只是代码搬运工的博客
11-11 3375
最近项目中需要使用easyUI的datagrid表格来展示数据，并允许用户对部分列单元格进行编辑、保存。单元格格式为文本（text）或者下拉框（combobox）。 （1）datagrid的创建使用可以参考easyUI官网。https://www.jeasyui.net/plugins/183.html （2）datagrid默认是不允许编辑里面的单元格的，需要一些配置才可以进行编辑操作。官网也有例子。https://www.jeasyui.net/demo/332.html 注意：只要你写的代码和官
Easy-ui Datagrid表格数据的编辑与提交
weixin_33962621的博客
02-11 461
前言 jQuery EasyUI是一组基于jQuery的UI 插件集合体，而jQuery EasyUI可以打造出功能更加丰富且美观的UI界面。开发者不需要了解复杂的javascript和css样式，只需要了解html标签。 一、 easy-ui基本知识 1、 easy-ui引用js顺序详解 引用Jquery的js文件： <script src="jque...
EasyUI 之 DataGrid的两种赋值方法
书写人生
09-28 1万+
方法一：使用ViewData赋值         首先，我们创建一个User的实体类 [csharp] view plain copy print? public class User      {          public string UserID;              public string UserName;          
JqueryEasyUI datagrid editor
weixin_30675247的博客
06-07 108
Combobox: { field: 'FieldType', title: '@ViewBag.FieldType', width: 40, align: 'center', editor: {//设置其为可编辑 type: 'combobox', //设置编辑格式 ...
jQuery EasyUI编辑DataGrid用combobox实现多级联动
10-21
在jQuery EasyUI中，DataGrid是一种常用的表格展示控件，它可以与各种编辑器结合使用，如combobox（下拉框）来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
jquery Easyui Datagrid实现批量操作（编辑，删除，添加）
10-20
本篇文章主要介绍了jquery Easyui Datagrid实现批量操作（编辑，删除，添加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery EasyUI中对表格进行编辑的实现代码
12-09
在jQuery EasyUI中，我们可以利用其丰富的组件功能来创建具有编辑功能的数据表格。这个示例展示了如何实现一个可编辑的DataGrid，用户可以修改表格中的数据，并通过点击按钮进行保存或取消操作。以下是对实现这一...
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
10-22
在jQuery EasyUI中，Datagrid组件是一个核心组件，用于展示和管理表格数据，常用于数据展示、编辑和操作。本文将深入解析jQuery EasyUI Datagrid数据表格组件的结构。 首先，Datagrid组件的基础DOM结构至关重要，它...
jQuery EasyUI datagrid实现本地分页的方法
01-19
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
easyUI拓展：获取当前datagrid正在编辑状态的行编号
08-16
easyUI拓展：获取当前datagrid中在编辑状态的行编号列表，直接使用即可
easyui DataGrid动态编辑
04-10
NULL 博文链接：https://168zsj.iteye.com/blog/1659609
easyui datagrid编辑行设置某个字段不可编辑
u010033827的博客
06-26 1万+
function exeBatchPickInfo(wmbpId){ $('#receiptInfo').datagrid({ fit: true, //全屏 title:'入库单', striped: true, //显示斑马线 pagination:false, singleSelect:true, fitColumns:true,//自动缩进 columns: [[
easyui datagrid editor 编辑器的简单活用以及自定义校验
热门推荐
张小竟
05-17 2万+
本文介绍easyui的datagrid如何使用编辑器的功能并且完成自定义的校验 1、定义dategrid列表，这里editor主要是设置该字段可以编辑，并且指定自定义编辑类型 editor="{type:'Wdate',options:{required:true}}" <e:datagrid url='' id="order_...
jQuery EasyUI自定义DataGrid的Editor
xiaoshang的专栏
03-17 1176
如果我们要自定义一个editor，需要实现四个方法（init，getValue,setValue,resize)。 下面是我自己扩展的一个datetimebox类型 $.extend($.fn.datagrid.defaults.editors, { datetimebox: {//datetimebox就是你要自定义editor的名称 init: funct
java jquery easyui_java中用jquery-easyui插件做可编辑datagird列表
weixin_31659795的博客
02-21 232
jquery-easyui插件中datagrid列表(可编辑)在某一天,我静静的花了些时间写了自认为一套还不错的可编辑的datagrid列表完整版,于是乎,想做个笔记,望各位指教哦!下面是我的小成果~~案例功能演示图 (个别图稍微压缩或拉长,望不影响阅读)除单机编辑按钮外,双击行也可开启编辑一旦存在开启编辑后,未点击完成,则其他任何操作均不能操作,易操作就有提示无论是单行删除还是批量删除,提醒必不...
jQuery easyuI datagrid 多行编辑
dd84393295的博客
06-01 360
在easyUI动态绑定部分数据后，需要有部分列可以修改，研究了一天终于搞定。这是小弟的做法，望各位有好招的大侠指点。 1.添加jQuery 和jQuery easyuI的引用。 2.添加id为tt的table和获取行数据测试按钮getChangeValue <div id="setRoleDiv" style=" display:none;"> ...
jquery easyui列表添加select事件datagrid
最新发布
06-13
您可以使用jQuery EasyUI中的datagrid组件为列表添加select事件。具体步骤如下： 1. 在datagrid中定义onSelect事件，如下所示： ``` $('#datagrid').datagrid({ onSelect: function(index,row){ //处理select...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值