jQuery EasyUI DataGrid 可编辑列级联操作

<script>$(function () {
    var lastIndex;
    var $dg = $('#dg');
    $dg.datagrid({
        width : 600,
        height : 'auto',
        title : '可编辑列级联操作',
        singleSelect : true,
        idField : 'itemid',
        url : '/uploads/rs/233/bkf2ntm7/datagrid_data2.json',
        columns : [[{
                    field : 'itemid',
                    title : 'Item ID',
                    width : 80
                }, {
                    field : 'productid',
                    title : 'Product ID',
                    width : 120,
                    formatter : productFormatter,
                    editor : {
                        type : 'combobox',
                        options : {
                            valueField : 'productid',
                            textField : 'name',
                            data : products,
                            required : true,
                            onChange : function (newValue, oldValue) {
                //重点在此处 
                //先获取到当前选中行
                //根据当前行获取,当前行的下标
                //在根据下标和要获取列的filed获取对应filed的Editor对象
                //然后在根据对应的Editor操作
                                var row = $dg.datagrid('getSelected');
                                var rindex = $dg.datagrid('getRowIndex', row);
                                var ed = $dg.datagrid('getEditor', {
                                        index : rindex,
                                        field : 'listprice'
                                    });
                                $(ed.target).numberbox('setValue', '2012');
                            }
                        }
                    }
                }, {
                    field : 'listprice',
                    title : 'List Price',
                    width : 80,
                    align : 'right',
                    editor : {
                        type : 'numberbox',
                        options : {
                            precision : 1
                        }
                    }
                }, {
                    field : 'unitcost',
                    title : 'Unit Cost',
                    width : 80,
                    align : 'right',
                    editor : 'numberbox'
                }, {
                    field : 'attr1',
                    title : 'Attribute',
                    width : 250,
                    editor : 'text'
                }, {
                    field : 'status',
                    title : 'Status',
                    width : 60,
                    align : 'center',
                    editor : {
                        type : 'checkbox',
                        options : {
                            on : 'P',
                            off : ''
                        }
                    }
                }
            ]],
        onBeforeLoad : function () {
            $(this).datagrid('rejectChanges');
        },
        onClickRow : function (rowIndex) {
            if (lastIndex != rowIndex) {
                $dg.datagrid('endEdit', lastIndex);
                $dg.datagrid('beginEdit', rowIndex);
            }
            lastIndex = rowIndex;
        }
    });
});
 
var products = [{
        productid : 'FI-SW-01',
        name : 'Koi'
    }, {
        productid : 'K9-DL-01',
        name : 'Dalmation'
    }, {
        productid : 'RP-SN-01',
        name : 'Rattlesnake'
    }, {
        productid : 'RP-LI-02',
        name : 'Iguana'
    }, {
        productid : 'FL-DSH-01',
        name : 'Manx'
    }, {
        productid : 'FL-DLH-02',
        name : 'Persian'
    }, {
        productid : 'AV-CB-01',
        name : 'Amazon Parrot'
    }
];
function productFormatter(value) {
    for (var i = 0; i < products.length; i++) {
        if (products[i].productid == value)
            return products[i].name;
    }
    return value;
}


你可能感兴趣的:(jquery,easyui,DataGr)