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點了，今天就到這了。。。