<%@ 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. os模块和sys模块，以及random模块

    os模块 os模块是与操作系统交互的一个接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工 ...

  2. python学习中的第一个例子

    搭建python 先学习下当小白鼠 1 看下自己的python版本 python -v 2 然后,用pip安装开发Web App需要的第三方库: 异步框架aiohttp: pip3 install a ...

  3. elt区间分布

    select DATE_FORMAT(CURDATE(),'%Y%m%d') DateId,elt(interval(curnum,0, 10000,20000,30000,40000,50000, ...

  4. jmeter随机函数

    有些接口的字段,入参须唯一. 高并发压测的时候,这个比较棘手,可以用多个随机函数组合 如:两个__RandomString中间,夹个__Random ${__RandomString(2,qwerty ...

  5. Spring Boot学习--项目启动时执行特定方法

    Springboot给我们提供了两种"开机启动"某些方法的方式:ApplicationRunner和CommandLineRunner. 这两种方法提供的目的是为了满足,在项目启动 ...

  6. 边框（border）宽度样式颜色 和基本属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. OTS parsing error: invalid version tag woff和ttf文件被Filter拦截

    从服务器下载的字体文件放在本地,执行无法展示iconfont,浏览器控制台报出 Failed to decode downloaded font: http://127.0.0.1:8080/mhr/ ...

  8. Nginx_status显示结果详解

    打开:http://aabb.com/nginx_status会有如下显示Active   connections: 2872server   accepts  handled requests294 ...

  9. New Document (2)

    #Markdown 语法说明 (简体中文版) / (点击查看快速入门) ##概述 ###宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 代码区块 分隔线 区段元素 ...

  10. nat 类型及打洞原理

    nat 类型分4种 1.全锥形 full cone A 与 主机B交互,nat转换 A的内部地址及端口为  ip1 port1,ip1和port1为对外地址,任何机器能访问. 2.ip 受限制(对B而 ...