本文共 4009 字，大约阅读时间需要 13 分钟。

今天需要用到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 '
   ';      } else {        return '
   ';      }    },    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 = 'Save ';        var c = 'Cancel';        return s + c;      } else {        return 'Edit ';      }    }  });  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点了，今天就到这了。。。

转载地址：http://ghsni.baihongyu.com/