console 命令行工具 X clear

console

$(function(){
    var data={"total":28,"rows":[
	{"productid":"FI-SW-01","date":"03/07/2019"},
	{"productid":"K9-DL-01","date":"03/07/2019"},
	{"productid":"RP-SN-01","date":"03/07/2019"},
	{"productid":"RP-SN-01","date":"03/07/2019"},
	{"productid":"RP-LI-02","date":"03/07/2019"},
	{"productid":"FL-DSH-01","date":"03/07/2019"}
]};
    $('#dg').datagrid('loadData',data);
  
    $.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;
var editField = undefined; // 记录当前编辑字段
function endEditing(){
    if (editIndex == undefined){return true}
    if ($('#dg').datagrid('validateRow', editIndex)){
        $('#dg').datagrid('endEdit', editIndex);
        editIndex = undefined;
        editField = undefined;
        return true;
    } else {
        return false;
    }
}

//判断提交修改还是取消编辑
function cancelEditOrCommitChange() {
    //如果当前正在编辑
    if (editIndex != undefined) {
        //获取正在编辑的输入框
        var editor = $('#dg').datagrid('getEditor', {index:editIndex,field:editField})
        //获取当前编辑框的原始值
        var oldValue = editor.oldHtml
        //获取当前编辑框的内容
        var newValue = editor.target[editor.type]('getValue')
        //如果原始值和当前值不同,提示丢失改动
        //如果原始值和当前值相同,不进行操作
        if (oldValue != newValue) {
            var confirmToCommit = confirm('will lose current editor content, please commit you change?')
            if (confirmToCommit) {
                //如果确定的话执行ajax提交

                //获取原始行数据
                var oldData = $('#dg').datagrid('getRows')[editIndex]
                // ***
                // $.ajax()
                alert('ajax success')
                // ***
            } else {
                //如果取消的话,放弃当前编辑框更改
                $('#dg').datagrid('cancelEdit', editIndex)
            }
        }
    }
    //结束编辑
    endEditing()
}

function onClickCell(index, field, value){
    cancelEditOrCommitChange()

    var editable = index > 2; //行号>2可编辑
    if (!editable) { return }

    //结束当前编辑框的编辑操作，并跳转到鼠标点击的单元格
    if (endEditing()){
      $('#dg').datagrid('selectRow', index)
        .datagrid('editCell', {index:index,field:field});
      editIndex = index;
      editField = field
    }
}

<body>
    <h2>Cell Editing in DataGrid</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click a cell to start editing.</div>
    </div>
    <div style="margin:10px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto"
            data-options="
                iconCls: 'icon-edit',
                singleSelect: true,
                method:'get',
                onClickCell: onClickCell
            ">
        <thead>
            <tr>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'date',width:250,editor:'datebox'">Date</th>
            </tr>
        </thead>
    </table>

</body>

SOURCE

本项目引用的自定义外部资源