今天需要用到datagrid的子表格subgrid可编辑,于是研究了下自己记录了一下关键部分,以便后续查看。
首先,是父表格部分:
jQuery('#dg').datagrid({
title: 'Adjust Dossier fields',
//url:'data/subdatagrid.json',
//data: obDatagridData,
fitColumns: true,
height: 500,
striped: true,
view: detailview,
singleSelect: true,
columns: [
[{
field: 'dossierAttributeId',
hidden: true
}, {
field: 'mandatory',
title: 'mandatory',
width: 70,
formatter: function (value, row, index) {
return rn_getCheckboxHTML(value, 'mandatory');
}
}
]
],
detailFormatter: function (index, row) {
if (row.dossierAttributeId) {
return '<table id="ddv-' + row.dossierAttributeId + '"></table>';
} else {
return '<table id="ddv-' + (index+1) + '"></table>';
}
},
onExpandRow: function (index, row) {
rn_generate_detail_content(index, row);
}
// Load data in grid
jQuery('#dg').datagrid('loadData', obDatagridData);
});
在这段代码中最主要是两个方法,一个detailFormatter,这个是告诉渲染器如何渲染详细视图,此方法中table视图采用了动态的ID用以区分不同的subgrid。另外是onExpandRow,即父表格展开时触发的方法,这里调用了一个方法,下面看看所调用的方法:
function rn_generate_detail_content(parentIndex, parentRow) {
var strType = '',
obData,
obColumns,
strDossierAttributeId;
if (parentRow.dossierAttributeId) {
strDossierAttributeId = parentRow.dossierAttributeId;
} else {
strDossierAttributeId = parseInt(parentIndex)+1;
}
obColumns[0].push({
field: 'minValue',
title: 'min.',
width: 50,
editor: 'numberbox'
});
obColumns[0].push({
field: 'maxValue',
title: 'max.',
width: 50,
editor: 'numberbox'
});
obColumns[0].push({
field: 'defaultValue',
title: 'Default',
width: 120,
editor: 'numberbox'
});
obColumns[0].push({
field: 'action',
title: 'action',
width: 70,
align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<button class="btn btn-mini rn_btnSave" οnclick="saverow(' + strDossierAttributeId + ',this)">Save</button> ';
var c = '<button class="btn btn-mini rn_btnCancel" οnclick="cancelrow(' + strDossierAttributeId + ',this)">Cancel</button>';
return s + c;
} else {
return '<button class="btn btn-mini rn_btnEdit" οnclick="editrow(' + strDossierAttributeId + ',this)">Edit</button> ';
}
}
});
jQuery('#ddv-' + strDossierAttributeId).datagrid({
fitColumns: true,
singleSelect: true,
loadMsg: '',
height: 'auto',
columns: obColumns,
onResize: function () {
jQuery('#dg').datagrid('fixDetailRowHeight', parentIndex);
},
onLoadSuccess: function () {
setTimeout(function () {
jQuery('#dg').datagrid('fixDetailRowHeight', parentIndex);
}, 0);
},
onBeforeEdit: function (index, row) {
row.editing = true;
updateActions('#ddv-' + strDossierAttributeId, index);
},
onAfterEdit: function (index, row) {
row.editing = false;
updateActions('#ddv-' + strDossierAttributeId, index);
},
onCancelEdit: function (index, row) {
row.editing = false;
updateActions('#ddv-' + strDossierAttributeId, index);
}
});
jQuery('#ddv-' + strDossierAttributeId).datagrid('loadData', obData);
jQuery('#dg').datagrid('fixDetailRowHeight', parentIndex);
}
这段代码也很简单,就是构造出了应该有的子datagrid,都是很平常的方法,其中跟编辑有关的,主要在action列中的edit按钮,按钮点击触发
editrow方法,接下来看下这个方法内容:
function editrow(strDossierAttributeId, target) {
var rowIndex = getRowIndex(target);
jQuery('#ddv-' + strDossierAttributeId).datagrid('beginEdit', rowIndex);
}
function getRowIndex(target) {
var tr = jQuery(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
这段代码,首先会调用getRowIndex获取是点的第几行的按钮,其中closest为从此节点向上遍历到第一个符合选择器的对象,会遍历到这个td所属的tr,然后获取tr自带属性 datagrid-row-index的值来获取到行号。之后便通过选择器指定对应的行开始beginEdit。
另附取数据方法:
function saverow(strDossierAttributeId, target) {
var rowIndex = getRowIndex(target)
var obInsertedRows_ = jQuery('#ddv-' + strDossierAttributeId).datagrid('getChanges', 'inserted');
var obDeletedRows_ = jQuery('#ddv-' + strDossierAttributeId).datagrid('getChanges', 'deleted');
var obUpdatedRows_ = jQuery('#ddv-' + strDossierAttributeId).datagrid('getChanges', 'updated');
var obAllChangedRows_ = jQuery('#ddv-' + strDossierAttributeId).datagrid('getChanges');
jQuery('#ddv-' + strDossierAttributeId).datagrid('endEdit', rowIndex);
}
获取数据后即可进行相应的处理。快12点了,今天就到这了。。。