<%@ 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. jap -文档 https://www.tutorialspoint.com/jpa/jpa_jpql.htm

    参考网址:https://www.tutorialspoint.com/jpa/jpa_jpql.htm

  2. J2SE 8的集合

    List ArrayList查询效率高LinkedList插入删除效率高 ArrayList ArrayList<String> arrayList = new ArrayList< ...

  3. gevent 实现单线程下的socket链接

    通过gevent实现socket的多并发 server 端: import geventfrom gevent import socket, monkey monkey.patch_all() #进行 ...

  4. fb bin_debug下的swf不见了

    fb清理了所选的项目,如果代码有错误,会自动删除bin_debug目录下的swf.这种情况,构建项目是无法自动生成swf的,只有将代码报错的地方修改正错了.选构建项目才会在bin_debug目录下生成 ...

  5. 基于OpenGL编写一个简易的2D渲染框架-09 重构渲染器-Shader

    Shader 只是进行一些简单的封装,主要功能: 1.编译着色程序 2.绑定 Uniform 数据 3.根据着色程序的顶点属性传递顶点数据到 GPU 着色程序的编译 GLuint Shader::cr ...

  6. Java中3种代理总结（示例代码见之前文章）

    1.JDK静态代理 业务接口 接口的实现类 代理类,实现接口,并扩展实现类的功能 ### 2.JDK动态代理 业务接口 实现了业务接口的业务类 实现了InvocationHandler接口的handl ...

  7. 程序员教程-11章-Java程序设计

    自己是学java的,先看第十一章java吧. 列出章节目录,便于自己回忆内容. 11.1 Java语言概述 1 Java语言的特点 2 Java开发环境 11.2 Java语言基础 11.2.1 基本 ...

  8. Gearman简介

    gearman,从名字上看叫做“齿轮工”,就是通过齿轮把不同的组件组合在一起.通常,多语言多系统之间的集成是项目开发中一个比较头疼的问题.一般会采用RPC风格或者是REST风格的WebService. ...

  9. linux中与Oracle有关的内核参数详解

    工作当中遇到oracle运行时CPU占用率达到90%以上,调小以下参数值后恢复正常. fs.file-max = 65536 net.core.rmem_default=262144 net.core ...

  10. VC中使用ADO操作数据库的方法

    源地址:http://blog.csdn.net/xiaobai1593/article/details/7459862 准备工作: (1).引入ADO类 #import "c:\progr ...