easy ui datagrid 下拉框級聯綁定

function loadDataList() {
var lastIndex;
var $dg = $('#data_list');
$dg.datagrid({
height: 'auto',
singleSelect: true,
idField: 'DeliveryDetailID',
columns: [[
{
field: 'DeliveryDetailID',
title: 'ID',
width: 10,
hidden: true
},
{
field: 'DataSourceID',
title: '來源單據ID',
width: 10,
hidden: true
},
{
field: 'DataSourceType',
title: '數據來源',
width: 10,
hidden: true
},
{
field: 'DataSourceTypeName',
title: '數據來源',
width: 80
},
{
field: 'DataSourceNo',
title: '系統單號',
width: 100
},
{
field: 'SystemNo',
title: '手工單號',
width: 100
},
{
field: 'DepotID',
title: 'DepotID',
width: 10,
hidden: true
},
{
field: 'DepotName',
title: '倉庫',
width: 80
},
{
field: 'ClientID',
title: '客戶ID',
width: 10,
hidden: true
},
{
field: 'ClientNo',
title: '客戶No',
width: 10,
hidden: true
},
{
field: 'ClientName',
title: '客戶名稱',
width: 100
},
{
field: 'TransitContactType',
title: '收貨人類別',
width: 80,
formatter: function (value) {
for (var i = 0; i < gTransitContactType.length; i++) {
if (gTransitContactType[i].id == value) return gTransitContactType[i].text;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: gTransitContactType,
required: true
}
}
},
{
field: 'DeliveryType',
title: '發運方式',
width: 80,
formatter: function (value) {
for (var i = 0; i < gDeliveryType.length; i++) {
if (gDeliveryType[i].id == value) return gDeliveryType[i].text;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: gDeliveryType
}
}
},
{
field: 'TransitProvinceID',
title: '省',
width: 80,
formatter: function (value) {
for (var i = 0; i < gTransitProvince.length; i++) {
if (gTransitProvince[i].id == value) return gTransitProvince[i].text;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: gTransitProvince,
required: true,
onChange: function (newValue, oldValue) {
//重點在此處
//先獲取到當前選中行
//根據當前行獲取，當前行的下標
//在根據下標和要獲取列的filed獲取對應filed的Editor對象
//而後在根據對應的Editor操做
var cityData = '[';
for (var i = 0; i < gTransitCity.length; i++) {

if (gTransitCity[i].ProvinceID == newValue) {

cityData += '{\"id\":\"' + gTransitCity[i].id + '\",\"text\":\"' + gTransitCity[i].text + '\"},';
}
}
cityData = cityData.substr(0, cityData.length - 1);
cityData += "]";

var row = $dg.datagrid('getSelected');
var rindex = $dg.datagrid('getRowIndex', row);
var ed = $dg.datagrid('getEditor', {
index: rindex,
field: 'TransitCityID'

});

var data = $.parseJSON(cityData);

$(ed.target).combobox('loadData', data);

$(ed.target).combobox('setValue', data[0].text);
}
}
}
},
{
field: 'TransitCityID',
title: '市',
width: 80,
formatter: function (value) {
for (var i = 0; i < gTransitCity.length; i++) {
if (gTransitCity[i].id == value) return gTransitCity[i].text;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
required: true
}
}
},
{
field: 'TransitAddress',
title: '地址',
width: 250,
editor: {
type: 'textbox',
}
},
{
field: 'DeliveryArea',
title: '所屬區域',
width: 50,
formatter: function (value) {
for (var i = 0; i < gDeliveryArea.length; i++) {
if (gDeliveryArea[i].id == value) return gDeliveryArea[i].text;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: gDeliveryArea,
required: true
}
}
},
{
field: 'TransitContactName',
title: '聯繫人',
width: 80
},
{
field: 'TransitContactTel',
title: '聯繫電話',
width: 80
},
{
field: 'TotalAddress',
title: '收貨地址',
width: 10,
hidden: true
},
{
field: 'ConDealerID',
title: '委託單位',
width: 10,
hidden: true
},
{
field: 'ConDealerName',
title: '委託單位',
width: 80
},
{
field: 'BalanceDealerID',
title: '結算單位',
width: 10,
hidden: true
},
{
field: 'BalanceDealerName',
title: '結算單位',
width: 80,
required: true
},
{
field: 'TotalQty',
title: '商品總數量',
width: 80
},
{
field: 'TotalVolume',
title: '整體積',
width: 80
},
{
field: 'Remark',
title: '備註',
width: 200
}

]],
onBeforeLoad: function () {
$(this).datagrid('rejectChanges');
},
onClickRow: onClickRow
});
}