<%@ 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. java开发-问题清单

    本人是做Java开发的,这是我参加58,搜狐,搜狗,新浪微博,百度,腾讯文学,网易以及其他一些小的创业型公司的面试常被问的问题,当然有重复,弄清楚这些 1. junit用法,before,before ...

  2. PyQt5系列教程(八)定时器QTimer的使用

    软硬件环境 OS X EI Capitan Python 3.5.1 PyQt 5.5.1 前言 如果需要在程序中周期性地进行某项操作,比如检测某种设备的状态,就会用到定时器.本文就来看看PyQT5中 ...

  3. 解决问题E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)

    在用sudo apt-get install 安装软件时,结果终端提示: “E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/ ...

  4. centos上自动执行脚本执行php文件

    1 先编写执行PHP文件的脚本 vi php.sh #!/bin/sh /usr/bin/php /etc/1.php 2把php.sh添加到自动执行任务中 cd /etc/ vi crontab * ...

  5. Win10交换Ctrl和大写键

    打开注册表 [HKEY_LOCAL_MacHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout] "Scancode Map" ...

  6. PCI Simple Communications Controller

    PCI Simple Communications Controller Intel Management Engine Interface (MEI)

  7. Delegate 改变指向

    import mx.utils.Delegate; nowWordSound.onSoundComplete =Delegate.create(this, playOver); function pl ...

  8. 前端开发-5-HTML-总结

    1.总体 资源:https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c html head标签 title 显示网站的标题 meta ...

  9. sqlserver分布式 用触发器插入数据

    这个月总公司收购了一家小公司,这家小公司的数据库用的是32位的 Sql2000 ,已经使用很长一段时间了,系统也比较稳定.本着节约成本的原则,总公司保留原公司的一套管理系统,但要求重要数据每天上传到总 ...

  10. 趣味编程：FizzBuzz（Kotlin版）

    fun toFizzBuzzIf(n: Int) = if (n % 3 == 0 && n % 5 == 0) "FizzBuzz" else if (n % 3 ...