jQuery EasyUI DataGrid 可编辑列级联操作

来源：互联网发布：淘宝店的前景编辑：程序博客网时间：2024/05/01 03:48
<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;}