Jquery easyui开启行编辑模式增删改操作

来源:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html

Jquery easyui开启行编辑模式增删改操作先上图

Html代码:

  <table id="dd">
  </table>

引入JS文件和CSS样式

<script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery.easyui.min.js" type="text/javascript"></script>
    <link href="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/default/easyui.css" rel="stylesheet"
        type="text/css" />
    <link href="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/icon.css" rel="stylesheet"
        type="text/css" />
    <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {
            var datagrid; //定义全局变量datagrid
            var editRow = undefined; //定义全局变量:当前编辑的行
            datagrid = $("#dd").datagrid({
                url: ‘UserCenter.aspx‘, //请求的数据源
                iconCls: ‘icon-save‘, //图标
                pagination: true, //显示分页
                pageSize: 15, //页大小
                pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
                fit: true, //datagrid自适应宽度
                fitColumn: false, //列自适应宽度
                striped: true, //行背景交换
                nowap: true, //列内容多时自动折至第二行
                border: false,
                idField: ‘ID‘, //主键
                columns: [[//显示的列
                {field: ‘ID‘, title: ‘编号‘, width: 100, sortable: true, checkbox: true },
                 { field: ‘UserName‘, title: ‘用户名‘, width: 100, sortable: true,
                     editor: { type: ‘validatebox‘, options: { required: true} }
                 },
                  { field: ‘RealName‘, title: ‘真实名称‘, width: 100,
                      editor: { type: ‘validatebox‘, options: { required: true} }
                  },
                   { field: ‘Email‘, title: ‘邮箱‘, width: 100,
                       editor: { type: ‘validatebox‘, options: { required: true} }
                   }
                   ]],
                queryParams: { action: ‘query‘ }, //查询参数
                toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () {//添加列表的操作按钮添加,修改,删除等
                    //添加时先判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑
                    if (editRow != undefined) {
                        datagrid.datagrid("endEdit", editRow);
                    }
                    //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行
                    if (editRow == undefined) {
                        datagrid.datagrid("insertRow", {
                            index: 0, // index start with 0
                            row: {

                            }
                        });
                        //将新插入的那一行开户编辑状态
                        datagrid.datagrid("beginEdit", 0);
                        //给当前编辑的行赋值
                        editRow = 0;
                    }

                }
                }, ‘-‘,
                 { text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function () {
                     //删除时先获取选择行
                     var rows = datagrid.datagrid("getSelections");
                     //选择要删除的行
                     if (rows.length > 0) {
                         $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                             if (r) {
                                 var ids = [];
                                 for (var i = 0; i < rows.length; i++) {
                                     ids.push(rows[i].ID);
                                 }
                                 //将选择到的行存入数组并用,分隔转换成字符串,
                                 //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                                 alert(ids.join(‘,‘));
                             }
                         });
                     }
                     else {
                         $.messager.alert("提示", "请选择要删除的行", "error");
                     }
                 }
                 }, ‘-‘,
                 { text: ‘修改‘, iconCls: ‘icon-edit‘, handler: function () {
                     //修改时要获取选择到的行
                     var rows = datagrid.datagrid("getSelections");
                     //如果只选择了一行则可以进行修改,否则不操作
                     if (rows.length == 1) {
                         //修改之前先关闭已经开启的编辑行,当调用endEdit该方法时会触发onAfterEdit事件
                         if (editRow != undefined) {
                             datagrid.datagrid("endEdit", editRow);
                         }
                         //当无编辑行时
                         if (editRow == undefined) {
                             //获取到当前选择行的下标
                             var index = datagrid.datagrid("getRowIndex", rows[0]);
                             //开启编辑
                             datagrid.datagrid("beginEdit", index);
                             //把当前开启编辑的行赋值给全局变量editRow
                             editRow = index;
                             //当开启了当前选择行的编辑状态之后,
                             //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑
                             datagrid.datagrid("unselectAll");
                         }
                     }
                 }
                 }, ‘-‘,
                 { text: ‘保存‘, iconCls: ‘icon-save‘, handler: function () {
                     //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                     datagrid.datagrid("endEdit", editRow);
                 }
                 }, ‘-‘,
                 { text: ‘取消编辑‘, iconCls: ‘icon-redo‘, handler: function () {
                     //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                     editRow = undefined;
                     datagrid.datagrid("rejectChanges");
                     datagrid.datagrid("unselectAll");
                 }
                 }, ‘-‘],
                onAfterEdit: function (rowIndex, rowData, changes) {
                    //endEdit该方法触发此事件
                    console.info(rowData);
                    editRow = undefined;
                },
                onDblClickRow: function (rowIndex, rowData) {
                //双击开启编辑行
                    if (editRow != undefined) {
                        datagrid.datagrid("endEdit", editRow);
                    }
                    if (editRow == undefined) {
                        datagrid.datagrid("beginEdit", rowIndex);
                        editRow = rowIndex;
                    }
                }
            });
        });
    </script>
时间: 2024-10-28 06:07:52

Jquery easyui开启行编辑模式增删改操作的相关文章

[转]Jquery easyui开启行编辑模式增删改操作

本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.

Jquery easyui开启行编辑_增删改操作及新增就能编辑

下面这个是一个单独的js文件,可以直接在页面引入他就可以用了 主要有三种方式实现编辑模式增删改操作 1.直接双击选中编辑 2.选中行点击修改按钮编辑 3.右键选择相关的操作 可能中间有部分功能没有实现 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!-- 引入自定义的js文件 --> <script type="t

Jquery EasyUI简介和数据的增删改查

一.最大特点1.在Jquery的技术基础上2.封装程度高,只对外暴露需要交互的属性.用户友好! 二.使用 (一)显示数据比如,指定一个表格的类名.url,就可以从后台获取数据.不用写任何JS代码. 界面效果 (二)添加或编辑 创建一个表单对话框,来创建或编辑用户,同样不需要写JS代码 界面效果 定义添加按钮和编辑按钮触发的函数 "保存"按钮,将新增数据或更新数据提交到后台 (三)删除数据 删除选中的数据 function destroyUser(){ var row = $('#dg'

简单的模拟jQuery easyUI的行编辑

核心思想: 主要是为td增加点击事件,如果点击了,把原来的纯HTML文本,变成可编辑的input表格,并且需要记录原始文本的值,当鼠标失去焦点的时候,把input标签里面的值,替换文td里面的文本的值 核心代码如下: <script type="text/javascript"> $(function () { //找到所有名字的单元格 var name = $("tbody td:even"); //给这些单元格注册鼠标点击事件 name.click(

EasyUI----DataGrid行明细增删改操作

http://blog.csdn.net/huchiwei/article/details/7787947 本文实现的是EasyUI-DataGrid行明细的增删改操作.具体参考来自以下文章: 官方DEMO---- DataGrid ---- Master Detail 在easyui中利用DataGrid的行明细区域实现CRUD操作---- 作者:stworthy BuildCRUD Application with edit form in expanded row details jQue

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

easyui学习笔记2—在行内进行表格的增删改操作【转载】

第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo

easyui学习笔记1—增删改操作【转载】

最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现这个奇怪的mysql语法,如下 alter table student change id id int auto_increment; 这句是在student表已经建好的情况下来修改字段id为自增列,奇怪的是为嘛change id id,并且后面还要带上id的类型int? 2.html5标记 如何

Bash命令行编辑模式

Linux下Bash命令行编辑的默认模式是交互式emacs模式.切换模式: set -o emacs #设置emacs模式 set -o vi #设置vi模式 Bash命令行编辑模式