<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 DataGrid 可编辑列级联操作
最新推荐文章于 2022-04-09 20:11:05 发布