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

define(function (require) {
  return function () {
    var $grid;

    return {
      center: {
        border: false,
        items: {
          xtype: 'yvgrid',
          onRender: function () {
            $grid = $(this);
          },
          filter: true,
          sortable: true,
          pagination: true,
          border: false,
          checkbox: true,
          pageList: [2, 5, 20, 40, 50],
          toolbar: {
            xtype: 'toolbar',
            height: '38',
            title: '工具条',
            items: [
              {
                text: '本地数据', iconCls: 'fa fa-plus-circle',
                onClick: function () {
                  $grid.yvgrid('showLoading');
                  $.yvan.ajax({
                    url: demoApi('/queryUserNoPage'),
                    success: function (root) {
                      $grid.yvgrid('reload', {
                        data: root.data
                      });
                      $grid.yvgrid('hideLoading');
                    }
                  });
                }
              },
              {
                text: '远程查询', iconCls: 'fa fa-plus-circle',
                onClick: function () {
                  $grid.yvgrid('reload', {
                    url: demoApi('/queryUser'),
                    queryParams: {
                      'a': 1,
                      'b': 2
                    }
                  });
                }
              },
              {
                text: '空刷新', iconCls: 'fa fa fa-pencil-square-o',
                onClick: function () {
                  $grid.yvgrid('reload');
                }
              },
              {
                text: '清空筛选', iconCls: 'fa fa-filter',
                onClick: function () {
                  $grid.yvgrid('clearfilters');
                }
              }, '|',
              {
                text: '选择一行', iconCls: 'fa fa fa-pencil-square-o',
                onClick: function () {
                  $grid.yvgrid('selectRow', 1);
                }
              }, '|',
              {
                text: '获取勾选', iconCls: 'fa fa-checked', onClick: function () {
                  var data = $grid.yvgrid('getChecked');
                  $.yvan.alert('<pre>' +
                    JSON.stringify(data, null, '  ') +
                    '</pre>');
                }
              },
              {
                text: '设置勾选', iconCls: 'fa fa-check', onClick: function () {
                  $grid.yvgrid('setChecked', ['ADMIN_1', 'USER0000006', 'USER0000025']);
                }
              },
              {
                text: '清空勾选', iconCls: 'fa fa-checked', onClick: function () {
                  $grid.yvgrid('checkedClear');
                }
              },
              {
                text: '全勾选', iconCls: 'fa fa-checked', onClick: function () {
                  $grid.yvgrid('checkedAll');
                }
              },
              {
                text: '获取行', iconCls: 'fa fa-save', onClick: function () {
                  var data = $grid.yvgrid('rowData');
                  $.yvan.alert('<pre>' +
                    JSON.stringify(data, null, '  ') +
                    '</pre>');
                }
              }, {
                text: 'rowIndex', iconCls: 'fa fa-times', onClick: function () {
                  var rowIndex = $grid.yvgrid('rowIndex');
                  $.yvan.msg('rowIndex:' + rowIndex);
                }
              }, {
                text: 'boundIndex', iconCls: 'fa fa-times', onClick: function () {
                  var rowBoundIndex = $grid.yvgrid('rowBoundIndex');
                  $.yvan.msg('rowBoundIndex:' + rowBoundIndex);
                }
              }, {
                text: 'showError', iconCls: 'fa fa-times', onClick: function () {
                  var rowBoundIndex = $grid.yvgrid('rowBoundIndex');
                  $grid.yvgrid('showError', rowBoundIndex, "idName", "这里显示一个单元格异常,这里显示一个单元格异常！<br />内部用BR换行！内容不要过长!");
                }
              }, {
                text: 'getData', iconCls: 'fa fa-times', onClick: function () {
                  var datas = $grid.yvgrid('getData');
                  console.log(datas);
                }
              }, '|', {
                text: '关闭', iconCls: 'fa fa-times-circle fa-lg', onClick: function () {
                  App.closeMe(this);
                }
              }
            ]
          },
          idField: 'userId',
          autoSizeColumns: true,
          onBeforeSelect: function (newIndex, oldIndex, event) {
            //return (newIndex % 2 === 1);
          },
          onSelect: function (rowid, row) {
            console.log('onSelect rowid:' + rowid + ", row:", row);
          },
          onCheckedChange: function (rowid, value, row) {
            console.log('onCheckedChange rowid:' + rowid + ", value:" + value + ", row:", row);
          },
          columns: [[
            { field: 'userId', hidden: true },
            { field: 'loginName', title: '登录名', sortable: false, minwidth: 100 },
            { field: 'staffName', title: '职员姓名', minwidth: 100 },
            { field: 'userType', title: '用户类型', minwidth: 100, formatter: [{ id: 'A', text: '系统管理员' }, { id: 'E', text: '企业用户' }, { id: 'N', text: '仓库用户' }] },
            { field: 'gender', title: '性别', minwidth: 100, formatter: [{ id: 'M', text: '男' }, { id: 'F', text: '女' }] },
            { field: 'duty', title: '职务', minwidth: 100 },
            { field: 'mobile', title: '手机', minwidth: 100 },
            { field: 'uiStyle', title: '界面风格', minwidth: 100, formatter: [{ id: 'light', text: '浅色风格' }, { id: 'dark', text: '暗色风格' }] },
            { field: 'loginCount', title: '登录次数', minwidth: 100, type: 'number' },
            { field: 'lastLoginTime', title: '最后登录时间', minwidth: 100, type: 'date', formatter: fmtDate },
            { field: 'userState', title: '是否锁定', minwidth: 100, formatter: [{ id: '0', text: '锁定' }, { id: '1', text: '正常' }] },
            { field: 'beActive', title: '启用状态', minwidth: 100, type: 'bool', on: 'Y', off: 'N' },
            { field: 'createAt', title: '创建时间', minwidth: 100, type: 'date', formatter: fmtDate },
            { field: 'updateAt', title: '最后更新时间', minwidth: 100, type: 'date', formatter: fmtDate }
          ]]
        }
      }
    };
  };
});