今天需要用到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" onclick="saverow(' + strDossierAttributeId + ',this)">Save</button> '; var c = '<button class="btn btn-mini rn_btnCancel" onclick="cancelrow(' + strDossierAttributeId + ',this)">Cancel</button>'; return s + c; } else { return '<button class="btn btn-mini rn_btnEdit" onclick="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')); }
另附取数据方法:
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点了,今天就到这了。。。