jQuery +easyUI 实现双击编辑

  1. 云栖社区>
  2. 博客>
  3. 正文

jQuery +easyUI 实现双击编辑

优惠券发放 2018-08-30 05:24:02 浏览1009

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