easyUI datagrid可编辑行JS代码片段总结

最新推荐文章于 2021-11-01 09:06:03 发布

长方体混凝土移动大师

最新推荐文章于 2021-11-01 09:06:03 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： datagrid easyui javascript

本文链接：https://blog.csdn.net/captian_900331/article/details/51594149

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

关于easyUI datagrid可编辑行在官方的demo中有具体的demo，可以参看。我这里是独立出来的JS代码片段，仅供参考。

function loadGrid() {
    var toolbar = $('#datagrid')
            .datagrid(
                    {
                        iconCls : 'icon-list',
                        title : '提交结果',
                        url : 
                            '/action!getmentJsonList.jspa?',
                        loadMsg : '数据远程载入中,请等待...',
                        singleSelect : false,
                        pagination : true,
                        nowrap : true,
                        height : height,
                        striped : true,
                        columns : [ [
                                {
                                    field : 'applyYear',
                                    title : '年',
                                    width : setColumnWidth(0.05),
                                    align : 'center',
                                    editor: {
                                        type:'numberbox', 
                                        options:{
                                            required : true
                                        }
                                    }
                                },
                                {
                                    field : 'applyMonth',
                                    title : '月',
                                    width : setColumnWidth(0.05),
                                    align : 'center',
                                    editor: {
                                        type:'numberbox', 
                                        options:{
                                            required : true
                                        }
                                    }
                                },
                                {
                                    field : 'target',
                                    title : '目标量',
                                    width : setColumnWidth(0.12),
                                    align : 'center',
                                    editor: {
                                        type:'text', 
                                        options:{
                                            min:0,   
                                            precision:0,
                                            required : true
                                        }
                                    }
                                }
                                 ] ],
                        toolbar : [
                                "-",
                                {
                                    text : '删除选择行',
                                    iconCls : 'icon-remove',
                                    handler : function() {
                                        removeit();
                                    }
                                },
                                "-",
                                {
                                    text : '保存修改',
                                    iconCls : 'icon-save',
                                    handler : function() {
                                        accept();
                                    }
                                },
                                "-",
                    /**将以下所需要的函数依次的添加到此处即可**/],
                    onClickRow: onClickRow
                    });
    // 分页控件
    /*var p = $('#datagrid').datagrid('getPager');
    $(p).pagination({
        pageSize : 10,
        pageList : [ 10, 50, 100 ],
        beforePageText : '第',
        afterPageText : '页    共 {pages} 页',
        displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录'
    });*/
}

var editIndex = undefined;
function endEditing(){
    if (editIndex == undefined){return true}
    if ($('#datagrid').datagrid('validateRow', editIndex)){
        $('#datagrid').datagrid('getRows')[editIndex]['applyYear'] = applyYear;
        $('#datagrid').datagrid('getRows')[editIndex]['applyMonth'] = applyMonth;
        $('#datagrid').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickRow(index){
            if (editIndex != index){
                if (endEditing()){
                    $('#dg').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                    editIndex = index;
                } else {
                    $('#dg').datagrid('selectRow', editIndex);
                }
            }
        }
function append(){
            if (endEditing()){
                $('#dg').datagrid('appendRow',{status:'P'});
                editIndex = $('#dg').datagrid('getRows').length-1;
                $('#dg').datagrid('selectRow', editIndex)
                        .datagrid('beginEdit', editIndex);
            }
        }
function removeit(){
            if (editIndex == undefined){return}
            $('#dg').datagrid('cancelEdit', editIndex)
                    .datagrid('deleteRow', editIndex);
            editIndex = undefined;
        }
function accept(){
            if (endEditing()){
                $('#dg').datagrid('acceptChanges');
            }
        }
function reject(){
            $('#dg').datagrid('rejectChanges');
            editIndex = undefined;
        }
function getChanges(){
            var rows = $('#dg').datagrid('getChanges');
            alert(rows.length+' rows are changed!');
        }