跳到主要内容
Edit Table
可直接对表格内容区进行编辑，它通常用于需要用户在界面上进行快速数据编辑的场景中。
用法
样式
可访问性

示例​

编辑表格快捷键​

  • 方向键切换单元格
  • tab/shift+tab 向前或向后切换单元格，如果当前单元格支持编辑，默认进入编辑态,对于已经进入编辑态的再次点击tab 优先退出编辑态
  • esc 退出单元格编辑态
  • 编辑态下回车,确认选中值
  • 选中状态下回车 进入编辑态

普通​

PCPhonePad

<page>
    
    <table shouldSyncEditorChanged x="table" data="{{tableData}}" height="auto" editable title="{{tableTitle}}" selectable>
        <toolbar>
            <button text="提交" bindclick="submit"></button>
        </toolbar>
        <cell label="姓名" name="name">
            {{cellData.rowData.name}}
        </cell>
        <cell label="性别" name="sex">
            <!-- <editor node="select" data="{{sex}}" value="{{cellData.rowData.sex}}" bindchanged="changeNotice"></editor> -->
            {{cellData.rowData.name}}
        </cell>
        <cell label="出生日期" name="birthDate">{{cellData.rowData.name}}
            <!-- <editor node="date-picker" format="yyyy-MM-dd" type="date" value="{{cellData.rowData.birthDate}}" bindchanged="changeNotice"></editor> -->
        </cell>
        <cell label="出生时间" name="birthTime">{{cellData.rowData.name}}
            <!-- <editor  node="time-picker" type="range" value="{{cellData.rowData.birthTime}}" bindchanged="changeNotice"></editor> -->
        </cell>
        <cell label="出生地址" name="birthAddress">{{cellData.rowData.name}}
            <!-- <editor node="input" value="{{cellData.rowData.birthAddress}}" bindchanged="changeNotice"></editor> -->
        </cell>
        <cell label="收入" name="income">
        <editor node="input" suffix="元" value="{{cellData.rowData.income}}"  type="number"></editor>
        </cell>
    </table>
    <form dm-if="submitData" type="info">
        <item label="原始数据" node="text" value="{{submitData.orgList}}" colspan="6">
            {{submitData.orgList}}
        </item>

        <item label="变化数据" node="text" value="{{submitData.edited}}" colspan="6">
            {{submitData.edited}}
        </item>

        <item label="新数据" node="text" value="{{submitData.newList}}" colspan="6">
        </item>
    </form>
</page>

export default XPage({
    data: {
        tableTitle:'',
        sex: [{
            value: '男',
            label: '男'
        }, {
            value: '女',
            label: '女' 
        }], 
        tableData: [{
            name: '王大虎',
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'], 
        }, {
            name: '王二虎',
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'],
        }, {
            name: '王三虎', 
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'],
        }, {
            name: '王四虎', 
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'], 
            income: 10  
        }],
        submitData: null
    },
    submit() {
        let tableData = this.getComponent('table').getData();
        let originData = Object.assign(tableData.data);
        let editData = Object.assign(tableData.edited || {});
        let newData = [];

        originData.forEach((v, k) => {
            let editeRowData = editData[k];
            newData.push(Object.assign(v, editeRowData));
        });

        this.setData({
            submitData: {
                orgList: tableData.data,
                edited: tableData.edited,
                newList: newData
            }
        });
    },
    changeNotice(value,more) {
        console.log(value,more);
        const {colIndex,rowIndex} = more;
        const tableData = this.getComponent('table').getData()
        const curRowData = tableData.currentData[rowIndex];
        this.setData({
            tableTitle:`第${rowIndex}行,第${colIndex}列数据被改为${JSON.stringify(value)}，新的行数据为${JSON.stringify(curRowData)}`,
            tableData:tableData.currentData
        })

    }
});


修改​

PCPhonePad
<page>
    <table x="table" data="{{tableData}}" height="auto" editable>
        <toolbar>
            <button text="提交" bindclick="submit"></button>
        </toolbar>
        <cell label="姓名" name="name">
            <editor node="input" value={{cellData.rowData.name}} bindchanged="handleNameChanged"></editor>
        </cell>
        <cell label="性别" name="sex">
            <editor node="select" data="{{sex}}" value={{cellData.rowData.sex}}</editor>
        </cell>
        <cell label="出生日期" name="birthDate">
            <editor node="date-picker" type="date" value={{cellData.rowData.birthDate}}></editor>
        </cell>
        <cell label="出生时间" name="birthTime">
            <editor node="time-picker" type="timerange" value={{cellData.rowData.birthTime}}></editor>
        </cell>
        <cell label="爱好">
            <cell label="类型" name="favType">
                <editor node="select" data="{{favTypeList}}" value="{{cellData.rowData.favType}}" bindchanged="(a,b)=>favTypeChange(a,b)"></editor>
            </cell>
            <cell label="项目" name="favTypeItem">
                <editor node="select" data="{{cellData.rowData.favTypeItemList}}" value="{{cellData.rowData.favTypeItem}}"></editor>
            </cell>
        </cell>
        <cell label="操作">
            <button text="保存" bindclick="handleRowDataSave(cellData.rowIndex)"></button>
        </cell>
    </table>

    <form dm-if="submitData" type="info">
        <item label="原始数据" name="orgList" node="text" value="{{submitData.orgList}}" colspan="6">
            {{submitData.orgList}}
        </item>

        <item label="变化数据" name="edited" node="text" value="{{submitData.edited}}" colspan="6">
            {{submitData.edited}}
        </item>

        <item label="新数据" name="new" node="text" value="{{submitData.newList}}" colspan="6">
        </item>
    </form>
</page>

import moment from 'moment';
export default XPage({
    data: {
        sex: [
            {
                value: '男',
                label: '男',
            },
            {
                value: '女',
                label: '女',
            },
        ],
        tableData: [
            {
                name: '王大虎',
                sex: '男',
                age: '0',
                birthDate: moment('1990-1-1').toDate(),
                birthTime: moment('1990-1-1 12:13:00').toDate(),
            },
            {
                name: '王二虎',
                sex: '男',
                age: '0',
                birthDate: moment('1990-1-1').toDate(),
                birthTime: moment('1999-1-1 01:13:00').toDate(),
            },
            {
                name: '王三虎',
                sex: '男',
                age: 0,
                birthDate: moment('1980-1-1').toDate(),
                birthTime: moment('1980-1-1 18:13:00').toDate(),
            },
            {
                name: '王四虎',
                sex: '男',
                age: 0,
                birthDate: moment('1994-1-1').toDate(),
                birthTime: moment('1994-1-1 20:13:00').toDate(),
            },
        ],
        favTypeList: [
            {
                label: '文艺',
                value: 1,
                items: [
                    {
                        label: '唱歌',
                        value: '2.1',
                    },
                    {
                        label: '画画',
                        value: '2.2',
                    },
                ],
            },
            {
                label: '体育',
                value: 2,
                items: [
                    {
                        label: '网球',
                        value: '1.1',
                    },
                    {
                        label: '羽毛球',
                        value: '1.2',
                    },
                ],
            },
        ],
        submitData: null,
    },

    submit() {
        let tableData = this.getComponent('table').getData();
        let originData = Object.assign(tableData.data);
        let editData = Object.assign(tableData.edited || {});

        let newData = [];
        originData.forEach((v, k) => {
            let editeRowData = editData[k];
            newData.push(Object.assign(v, editeRowData));
        }); // return;

        this.setData({
            submitData: {
                orgList: tableData.data,
                edited: tableData.edited,
                newList: newData,
            },
        });
    },

    favTypeChange(value, more) {
        console.log(value, more);
        const { extraValue, rowIndex } = more;
        const { cur_option } = extraValue; // 获取选项配置
        const { items } = cur_option[0]; // 获取子类型
        const tableData = this.getComponent('table').getData().currentData;
        tableData[rowIndex].favTypeItemList = items;
        this.setData({ tableData });
    },

    handleNameChanged(editedData, column) {
        const { rowIndex } = column;
        const { data } = this.getComponent('table').getData();
        const rowData = {
            ...data[rowIndex], //原来的数据
            ...editedData, // 编辑后的数据
        };

        console.log('newRowData', rowData);
    },

    handleRowDataSave(rowIndex) {
        const { data, edited } = this.getComponent('table').getData();
        const rowData = {
            ...data[rowIndex],
            ...edited[rowIndex],
        };

        console.log('newRowData', rowData);
    },
});


确认模式​

确认模式以及beforeUpdateEditorData和editor-focus的使用。

PCPhonePad

<x-page>
 {{focusMessage}}
 <module>
     <main>
        <x-form >
            <item
                required
                label="输入框"
                node="input"
                name="a"
                colspan="{{ span: 6}}"
                type="password"
            />
            <x-item label="新数据" node="input" type="password"></x-item>
        </x-form>
         <x-table x="table" data="{{tableData}}" editable bindeditor-focus="editorFocus" height="auto">
             <x-toolbar>
                 <x-button text="提交" bindclick="submit"></x-button>
             </x-toolbar>
             <x-cell label="姓名" name="name">
                 {{cellData.rowData.name}}
             </x-cell>
             <x-cell label="性别" name="sex">
                 <x-editor node="select" data="{{sex}}" mode="confirm" value="{{cellData.rowData.sex}}"></x-editor>
             </x-cell>
             <x-cell label="出生日期" name="birthDate">
                 <x-editor node="date-picker" type="date" mode="confirm" value="{{cellData.rowData.birthDate}}"></x-editor>
             </x-cell>
             <x-cell label="出生时间" name="birthTime">
                 <x-editor node="time-picker" type="range" value="{{cellData.rowData.birthTime}}" mode="confirm"></x-editor>
             </x-cell>
             <x-cell label="出生地址3333" name="birthAddress">
                 <x-editor node="input" mode="confirm" value="{{cellData.rowData.birthAddress}}"></x-editor>
             </x-cell>
             <x-cell label="收入" name="income">
             <x-editor  node="input" type="number" mode="confirm" suffix="元" value="{{cellData.rowData.income}}" beforeUpdateEditorData="{{beforeUpdateEditorData}}"></x-editor>
             </x-cell>
         </x-table>
     </main>
 </module>
  <x-form dm-if="submitData" type="info">
      <x-item label="原始数据" node="text" value="{{submitData.orgList}}" colspan="6">
          {{submitData.orgList}}
      </x-item>

      <x-item label="变化数据" node="text" value="{{submitData.edited}}" colspan="6">
          {{submitData.edited}}
      </x-item>

      <x-item label="新数据" node="text" value="{{submitData.newList}}" colspan="6">
      </x-item>


      
  </x-form>
</x-page>


export default XPage({ 
  data: {
      sex: [{
          value: '男',
          label: '男'
      }, {
          value: '女',
          label: '女' 
      }], 
      tableData: [{
          name: '王大虎',
          birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'], 
      }],
      submitData: null,
      focusMessage: null,
  },
  editorFocus(data){
    const {colIndex, rowIndex, columnInfo} = data;
    const tableData = this.getComponent('table').getData().currentData;
    const focusMessage = `选中了 第${rowIndex}行的第${colIndex}列:${tableData[rowIndex][columnInfo.name]}`;
    this.setData({
        tableData,
        focusMessage
    })
  },
  beforeUpdateEditorData(value,option){
    const {colIndex,rowIndex,colName} = option
    return new Promise((resolve,reject)=>{
        CabinX.loading();
        setTimeout(()=>{// 这里可以做异步的校验或者与数据库同步， 
            CabinX.hideLoading();
            if(value>10){
                resolve(true);// 调用reoslev，意味表格组件将保存该值并更新试图
            }else {
                reject({msg:`收入不能小于10元, ${colIndex},${rowIndex},${colName}`});// 调用reject，意味该值不应该被保存，并将改string作为错误信息显示界面上
            }
        },1500)
    });
  },
  submit() {
      let tableData = this.getComponent('table').getData();
      let originData = Object.assign(tableData.data);
      let editData = Object.assign(tableData.edited || {});
      let newData = [];

      originData.forEach((v, k) => {
          let editeRowData = editData[k];
          newData.push(Object.assign(v, editeRowData));
      });

      this.setData({
          submitData: {
              orgList: tableData.data,
              edited: tableData.edited,
              newList: newData
          }
      });
  }
});


增删改查​

PCPhonePad
<page>
  <main>
    <table title="" x="table" data="{{tableData}}" height="300px" editable>
      <toolbar>
        <button text="尾部添加" bindclick="addPersion"></button>
        <button text="头部删除" bindclick="removePersion"></button>
        <button text="增加收入" bindclick="addIncome"></button>
        <button text="减少收入" bindclick="reduceIncome"></button>
    </toolbar>
      <cell label="姓名" name="name">
          {{cellData.rowData.name}}
      </cell>
      <cell label="性别" name="sex">
          <editor node="select" data="{{sex}}" value="{{cellData.rowData.sex}}" ></editor>
      </cell>
      <cell label="出生日期" name="birthDate">
          <editor node="date-picker" type="date" value="{{cellData.rowData.birthDate}}" ></editor>
      </cell>
      <cell label="出生时间" name="birthTime">
          <editor node="time-picker" type="range" value="{{cellData.rowData.birthTime}}" ></editor>
      </cell>
      <cell label="出生地址" name="birthAddress">
          <editor node="input" value="{{cellData.rowData.birthAddress}}" ></editor>
      </cell>
      <cell label="收入" name="income">
      <editor node="input" suffix="元" value="{{cellData.rowData.income}}"  type="number"></editor>
      </cell>
    </table>
  </main>
</page>
import moment from 'moment';
const personList = [{
  name: '王大虎',
  sex: '男',
  age: "0",
  birthDate: moment('1990-1-1').toDate(),
  birthTime: moment('1990-1-1 12:13:00').toDate()
}, {
  name: '王二虎',
  sex: '男',
  age: "0",
  birthDate: moment('1990-1-1').toDate(),
  birthTime: moment('1999-1-1 01:13:00').toDate()
}, {
  name: '王三虎',
  sex: '男',
  age: 0,
  birthDate: moment('1980-1-1').toDate(),
  birthTime: moment('1980-1-1 18:13:00').toDate()
}, {
  name: '王四虎',
  sex: '男',
  age: 0,
  birthDate: moment('1994-1-1').toDate(),
  birthTime: moment('1994-1-1 20:13:00').toDate()
}];

export default XPage({
  data:{
    tableData:[],
    sex: [{
      value: '男',
      label: '男'
    }, {
        value: '女',
        label: '女'
    }],
  },
  show(){
    this.index = 0;
  },
  addPersion(){
    const curPersonList = this.getComponent('table').getData().currentData||[];
    if(curPersonList.length>=4){
      return CabinX.alert('最多添加四个人');
    }
    this.index = this.index >= curPersonList.length ? 0 : this.index + 1;
    curPersonList.push(Object.assign({},personList[this.index]));
    this.setData({
      tableData: curPersonList
    });
  },
  removePersion(){
    const curPersonList = this.getComponent('table').getData().currentData||[];
    if(!curPersonList || curPersonList.length<=0){
      return CabinX.alert('没有可删除的人');
    }
    curPersonList.splice(0 ,1);
    this.setData({
      tableData: curPersonList
    });
  },
  addIncome(){
    let curPersonList = this.getComponent('table').getData().currentData||[];
    if(curPersonList.length<=0){
      return;
    }
    curPersonList = curPersonList.map((v,k)=>{
      v.income = v.income || 0;
      v.income ++;
      return v;
    });
    this.setData({
      tableData: curPersonList
    })
  },
  reduceIncome(){
    let curPersonList = this.getComponent('table').getData().currentData||[];
    if(curPersonList.length<=0){
      return;
    }
    curPersonList = curPersonList.map((v,k)=>{
      v.income = v.income || 0;
      v.income --
      return v;
    });
    this.setData({
      tableData: curPersonList
    })
  },
});

合同模式快捷键​

PCPhonePad

<page>
    <module title="编辑表格">
        <table x="table" data="{{tableData}}" height="auto" editable title="{{tableTitle}}">
            <toolbar>
                <button text="提交11111" bind-click="submitEditedData"></button>
            </toolbar>
            <cell label="姓名" name="name">
                {{cellData.rowData.name}}
            </cell>
            <cell label="供应商编码" name="supplierInfoByCode">
              <editor 
                node="supplier"
                placeholder="请输入供应商编码" 
                default-category="supplierCode"
                bind-changed="({supplierInfoByCode}) => handleSupplier(supplierInfoByCode, cellData.rowIndex)"
                value="{{cellData.rowData.supplierInfo}}"
              >
              </editor>
            </cell>
            <cell label="供应商名称" name="supplierInfoByName">
              <editor 
                node="supplier"
                placeholder="请输入供应商名称" 
                default-category="supplierName"
                bind-changed="({supplierInfoByName}) => handleSupplier(supplierInfoByName, cellData.rowIndex)"
                value="{{cellData.rowData.supplierInfo}}"
              >
              </editor>
            </cell>
            <cell label="select" >
              <editor
                node="select"
                ajax= "{{remotedAjax}}"
              >
              </editor>
            </cell>
        </table>
    </module>
</page>


import SupplierSelect from 'cabinxbuscomps/components/supplier-select/supplier-select';

export default XPage({
    components: {
        'supplier-select': SupplierSelect,
    },
    data: {
        backFillMultipleData: [
            {
                supplierCode: "110000",
                supplierFullName: "浙江贝因美科工贸股份有限公司天津分",
                supplierStatus: 4,
            },
            {
                supplierCode: "110007",
                supplierFullName: "天津朝批商贸有限公司",
                supplierStatus: 6,
            },
            {
                supplierCode: "22021",
                supplierFullName: "嵊州蓝田内衣服饰厂22021",
                supplierStatus: 1,
            },
            {
                supplierCode: "22028",
                supplierFullName: "上虞市龙珠雨具服饰22028",
                supplierStatus: 1,
            },
        ],
        backFillSingleData: {
            supplierCode: "110007",
            supplierFullName: "天津朝批商贸有限公司",
            supplierStatus: 6,
        },
        tableTitle:'',
        sex: [{
            value: '男',
            label: '男'
        }, {
            value: '女',
            label: '女' 
        }], 
        tableData: [{
            name: '王大虎',
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'], 
            supplierInfo: {
                "supplierCode": "330006",
                "supplierFullName": "上海小绵羊实业有限公司",
                "supplierStatus": 6
            },
        }, {
            name: '王二虎',
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'],
        }, {
            name: '王三虎', 
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'],
        }, {
            name: '王四虎', 
            birthTime: ['2014-1-1 12:00:00', '2014-1-1 14:00:00'], 
            income: 10  
        }],
        submitData: null,
        remotedAjax:{
            url: '//testapi-nodedmallos.dmall.com/cabinx/pcapi/select/options'
        }
    },
    show() {
        console.log('show');
    },
    handleCategoryChange() {

    },
    handleSearchConfirm(data) {
        // const data = this.getComponent('search-form').getData();
        console.info('handleSearchConfirm', data);
    },
    handleBaseConfirm(data) {
        // const data = this.getComponent('search-form').getData();
        console.info('handleBaseConfirm', data);
    },
    handleChanged() {
        console.log('handleChanged');
    },
    hide() {
        console.log('hide');
    },

    submitEditedData() {
        const tableData = this.getComponent('table').getData();
        const originData = Object.assign(tableData.data);
        const editData = Object.assign(tableData.edited || {});
        const newData = [];

        originData.forEach((v, k) => {
            const editeRowData = editData[k];
            newData.push(Object.assign(v, editeRowData));
        });
        const submitData = {
            orgList: tableData.data,
            edited: tableData.edited,
            newList: newData,
        };
        console.log('submitData', submitData);
        this.setData({
            submitData
        });
    },
    handleSupplier(value, rowIndex) {
        console.log('handleSupplier', value, rowIndex);

        const tableData = this.getComponent('table').getData().currentData;
        tableData[rowIndex].supplierInfo = value || null;
        // debugger;
        this.setData({ tableData });
    }
});


editable 表格编辑器​

原则上，除了input 以外，其他的与cabinx form 中的属性对齐.(input 使用了原生的方式开发，如有特殊需求请联系开发者)

信息

选用表格编辑器，x-table上必须要加editable属性

<editor>组件​

Attributs​

参数说明类型可选值默认值
node指定使用的组建类型stringinput/select/data-picker/time-pickerinput
placeholder在没有指定value时显示的数据string
beforeUpdateEditorData在组件数据变化后，同步到表格之前触发，可用于异步校验或者异步保存数据到后端，具体例子可参照确认模式Promisenull

Events​

名称说明参数
changed当数据修改后触发，value:{key/index:value}//触发editor修改后的值，more:{rowIndex:行号,colIndex:列号,extraValue:更多值,如select组建的option}
key-move-editor在合同模式快捷键上会触发,当移动类快捷键点击后，将触发from:// 移动前单元格信息 to:// 移动后单元格信息 operationType:// 操作类型(ArrowLeft,ArrowDown,ArrowUp,ArrowRight,NextEditor)

支持组件​

<editor>支持的node组件对应的属性说明

input​

参数说明类型可选值默认值
value值string
suffix后缀string

select​

参数说明类型可选值默认值
value值string

date-picker​

参数说明类型可选值默认值
value值Date/[Date,Date]
type时间选择的类型stringdate/week/year/month/datetime/daterange/datetimerangedate

time-picker​

参数说明类型可选值默认值
value值Date/[Date,Date]
type时间选择的类型stringbase/rangebase