<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Datagrid.aspx.cs" Inherits="EasyUI.Datagrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

<style type="text/css">
        #div1
        {   border:1px solid red;
            width:300px;
            height:500px;
           position:absolute;
           left:620px;
               top:50px;

}
        </style>

<link href="../themes/icon.css" rel="stylesheet" />
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../src/demo.css" rel="stylesheet" />
    <script src="../comjs/jquery-1.8.0.min.js" type="text/javascript"></script>--%>
   <script src="src/easyloader.js" type="text/javascript"></script>
    <script src="../comjs/jquery.easyui.min.js" type="text/javascript"></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="#" onclick="saverow(' + index + ')">保存</a> ';
                        var c = '<a href="#" onclick="cancelrow(' + index + ')">取消</a>';
                        return s + c;
                    } else {
                        var e = '<a href="#" onclick="editrow(' + index + ')">编辑</a> ';
                        var d = '<a href="#" onclick="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>

easyui datagrid编辑的更多相关文章

  1. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  2. easyui datagrid 编辑模式详解

       一,建立编辑器 从api得知,扩展一种新的编辑器类型,需要提供以上几个方法.项目中正好需要一个checkbox 类型编辑器,但在easyui中并没提供这样的编辑器,那我们可以通过扩展编辑器来解决 ...

  3. jquery easyui datagrid 编辑行 类型combobox

    完成编辑瞬间datagrid中显示的是combobox的value 而非text var rows=$('#tb1').datagrid('getRows'); for(var i=0;i<ro ...

  4. EasyUI DataGrid 编辑单元格

    如下图: 现改为单击某个单元格只对此单元格进行可编辑 <TABLE>标记添加 onClickCell <table id="dg" class="eas ...

  5. easyui datagrid编辑时编辑框自动获取焦点

    onDblClickCell:function(rowIndex, field, val){//双击单元格监听器 $(this).datagrid('beginEdit',rowIndex);//开启 ...

  6. EasyUI DataGrid编辑单元格时使用combogrid

    仅提供一段columns配置代码供参考: conditions对象是一个已赋值的数组对象集合.下拉框数据可直接使用conditions数据,也可以通过url获取. columns : [[ { fie ...

  7. easyui datagrid的列编辑

    [第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去   看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...

  8. EasyUI Datagrid 自定义列、Foolter及单元格编辑

    1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); he ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）

    前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...

随机推荐

  1. tornado--同步异步

    同步:指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系 现象:有一个共同的时钟,按来的顺序一个一个处理 异步:双方不需要共同的时钟,也就是接收方不知道发送方什么时候发送,所以在发送的信息中 ...

  2. 什么是 web 开发

    什么是 web 开发     这几天因为工作需要,了解了一下Web development 的技术路线,来源自     en.wikipedia.org/wiki/Web_development    ...

  3. 如何从编程的本质理解JVM内存模型

    如何从编程的本质理解JVM内存模型 一般聊JVM内存模型都是把图截出来,然后对着图,解释上面堆.栈之类的概念.这篇将分享下,如何从编程的本质上理解,JVM内存模型是什么样子,为什么是这个样子,不再死记 ...

  4. B站上的一个MATLAB与神经网络的视频，捡漏

    ▶ av15514817.这里集中了一些从视频中学到的散点. ▶ 语句 "edit + 函数名" 可以打开部分内置函数的源代码.非公开的源代码这会打开一个全是注释的文档. ▶ 函数 ...

  5. windows配置ftp服务器

    一.搭建FTP 二.解决FTP因windows防火墙拦截的方法 三.配置FTP用户 ========================================================== ...

  6. apo 简单参考

    参考: https://www.cnblogs.com/Geyoung/p/6927905.html @Aspect @Component public class TimeAspect { //通过 ...

  7. php用正则判断是否为数字

    验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数 ...

  8. 通过http方式关闭和重启Jenkins

    Jenkins关闭和重启实现方式.   1.关闭Jenkins 只需要在访问jenkins服务器的网址url地址后加上exit.例如我jenkins的地址http://localhost:8080/, ...

  9. NTP时间服务器搭建

    系统时区设置::: 查看当前时区# date -R修改系统时区# timeconfig  或# cp  /usr/share/zoneinfo/Asia/Shanghai  /etc/localtim ...

  10. ArcGIS 复制要素

    DataManagementTools.General.Copy DataManagementTools.Features.CopyFeatures ConversionTools.ToGeodata ...