jquery easyui datagrid subgrid edit

今天需要用到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点了，今天就到这了。。。