hust-epi/admin-ui/yvanui/example/tablegrid-edit-ajax.js

define(function (require) {
  return function (context) {

    var $grid1, $grid2, dictId, dictCode;

    function refreshGrid2(rowid) {
      var row = $grid1.yvgrid('rowData', rowid);
      if (!row) {
        $.yvan.msg('请先选择一行数据');
        return;
      }

      //如果是可编辑表格，不能直接用 dataAdapter 读取(会有bug)
      //这里是自己用 ajax 方法读取数据的
      $grid2.yvgrid('showLoading');
      $.yvan.ajax({
        url: demoApi('/sysDict/queryList'),
        data: {dictCode: row.dictCode},
        success: function (root) {
          dictId = row.dictId;
          dictCode = row.dictCode;
          $grid2.yvgrid('reload', {data: root.data});
        },
        complete: function () {
          $grid2.yvgrid('hideLoading');
        }
      });
    }

    return {
      west: {
        border: false,
        width: 450,
        split: true,
        items: {
          xtype: 'yvgrid',
          url: demoApi('/sysDict/query'),
          mtype: 'post',
          onRender: function () {
            $grid1 = $(this);
          },
          toolbar: {
            xtype: 'toolbar', title: '字典列表'
          },
          idField: 'dictId',
          columns: [[
            {field: 'dictId', title: 'dictId'},
            {
              field: 'dictType', title: '字典类别',
              formatter: [{id: '0', text: '用户字典'}, {id: '1', text: '系统字典'}]
            },
            {field: 'dictCode', title: '字典编号'},
            {field: 'dictDesc', title: '字典描述'}
          ]],
          onSelectRow: function (rowid) {
            refreshGrid2(rowid);
          }
        }
      },
      center: {
        border: false,
        items: {
          xtype: 'yvgrid',
          onRender: function () {
            $grid2 = $(this);
          },
          editable: true,
          autoSizeColumns: false,
          editOnSelected: true,
          idField: 'dictList',
          toolbar: {
            xtype: 'toolbar', title: '系统字典详情'
          },
          onRowAppend: function (rowid, rowdata, commit) {
            var data = $.extend({
              dictId: dictId,
              dictCode: dictCode,
            }, rowdata);
            delete data.createAt;
            delete data.updateAt;

            $.yvan.postJson({
              url: demoApi('/sysDict/insertList'),
              data: data,
              success: function () {
                commit(true);
                $.yvan.msg('操作成功');
              },
              error: function () {
                $.yvan.msg('操作失败');
              }
            });
          },
          onRowUpdate: function (rowid, rowdata, commit) {
            delete rowdata.createAt;
            delete rowdata.updateAt;

            rowdata.dictId = dictId;
            rowdata.dictCode = dictCode;

            $.yvan.postJson({
              url: demoApi('/sysDict/updateList'),
              data: {
                dictId: dictId,
                dictList: rowid,
                data: rowdata
              },
              success: function () {
                commit(true);
                $.yvan.msg('更新成功');
              },
              error: function () {
                $.yvan.msg('更新失败');
              }
            });
            commit(true);
          },
          onRowDelete: function (rowid, commit) {
            $.yvan.postJson({
              url: demoApi('/sysDict/deleteList'),
              data: {dictId: dictId, dictCode: dictCode, dictList: rowid},
              success: function () {
                commit(true);
                $.yvan.msg('操作成功');
              },
              error: function () {
                $.yvan.msg('操作失败');
              }
            });
          },
          columns: [[
            {field: 'dictId', hidden: true},
            {field: 'dictCode', hidden: true},
            {
              field: 'dictList', title: '字典内容', width: 100,
              editor: {
                xtype: 'textbox',
                validType: 'length[1,255]', required: true
              }
            },
            {
              field: 'dictValue', title: '字典值', width: 100,
              editor: {
                xtype: 'textbox',
                validType: 'length[1,50]', required: true
              }
            },
            {
              field: 'udf1', title: '自定义1', width: 100,
              editor: {
                xtype: 'textbox'
              }
            },
            {
              field: 'udf2', title: '自定义2', width: 100,
              editor: {
                xtype: 'textbox'
              }
            },
            {
              field: 'udf3', title: '自定义3', width: 100,
              editor: {
                xtype: 'textbox'
              }
            },
          ]]
        }
      }
    };

  };
});