jQuery +easyUI 实现双击编辑

简介: jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.

jQuery +easyUI 实现双击编辑

DataGrid 数据表里面需要加属性 editor:’text’ 才能实现

$(function(){
    $('#dg').datagrid({    
        url:'../listServlet', //路径   
        rownumbers : true,
        pagination : true,
        fitColumns:true,
        pageList : [ 5, 10, 15, 20 ],
        columns:[[    
            {field:'book_id',checkbox:true,width:100},  
            {field:'book_name',title:'书本名称',width:100,editor:'text',},    
            {field:'book_author',title:'作者',width:100,editor:'text',},
            {field:'publishing',title:'出版社',width:100,editor:'text',},
            {field:'book_price',title:'价格',width:100,editor:'text',},
            {field:'sales_volume',title:'销售量',width:100,editor:'text',}
        ]],

        onDblClickCell:function (index, field,value) {
            if (endEditing()) {
                $('#dg').datagrid('selectRow', index).datagrid('editCell', {
                    index : index,
                    field : field
                });
                editIndex = index;
            }
        },onAfterEdit:function (index, row, changes) {
            $.ajax({
                url : '../updatServlet?rowtt='+row.book_id,//路径
                data:{"book_name":row.book_name,"book_author":row.book_author,
                      "publishing":row.publishing,"book_price":row.book_price,
                      "sales_volume":row.sales_volume}, //额外的参数
                dataType: "text",//响应结果为文本
                success:function (data) {
                    $.messager.alert('消息','修改成功');
                     query()//修改成功后掉用查询方法

                }
            });
        },
      //单击触发事件       
        onClickCell:function(index, field, value){
             endEditing();
        },

        fitColumns:true,   
        pagination:true,

    });  

});   

$.extend($.fn.datagrid.methods, {
    editCell : function(jq, param) {
        return jq.each(function() {
            var opts = $(this).datagrid('options');
            var fields = $(this).datagrid('getColumnFields', true).concat(
                $(this).datagrid('getColumnFields'));
            for ( var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    col.editor = null;
                }
            }
            $(this).datagrid('beginEdit', param.index);
            for ( var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor = col.editor1;
            }
        });
    }
});


var editIndex = undefined;
//结束编辑
function endEditing() {
    if (editIndex == undefined) {
        return true
    }
    if ($('#dg').datagrid('validateRow', editIndex)) {
        $('#dg').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}

//查询全部数据并绑定
 function query(){
    $('#dg').datagrid({
        url:'../listServlet', 
    });
 } 
原文地址https://blog.csdn.net/qq_42360077/article/details/82145465
相关文章
|
5月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
5月前
easyUI datagarid 编辑状态下的combobox动态赋值
easyUI datagarid 编辑状态下的combobox动态赋值
|
6月前
|
前端开发 容器
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
27 0
|
12月前
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
346 0
|
12月前
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
79 0
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
112 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
239 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
499 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript 安全 Windows
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
227 0
|
JavaScript
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
108 0

相关课程

更多