editTable可编辑表格组件特性

editTable 可编辑表格

 修改时间： 2018-04-26
 当前版本： 1.2.3

分类： NC高级组件

使用场景

备注：操作列需要加入 itemtype: "customer"

表格样式

浏览态样式

编辑态样式

简单示例

/**
 * 使用说明：
 *
 * 1.引入createPage
 * 2.包装业务页面
 * 3.代码中使用表单各种 API
 *   this.props.editTable.createEditTable
 *   this.props.editTable.setTableData
 *   ......
 */
// 1.引入createPage
import { createPage } from 'nc-lightapp-front';  // 'nc-lightapp-front/src'; 可以引入到源码，用于调试
// 示例 editTable 页面
class EditTable extends Component {
    constructor(props) {
        super(props);
    }
    // 界面渲染
    render() {
        // 3.获取创建表单API
        let { createEditTable } = this.props.editTable;
        return (
            <div className="table-wrapper">
                // 根据meta信息创建简单table 
                  {createEditTable(
                        'tableDemo',                                     //表格id
                        onCloseModel: onCloseModelFn,                    // 弹窗控件点击关闭事件 
                        onAfterEvent: afterEventFn,                      // 控件的编辑后事件      
                        onSelected: onSelectedFn,                        // 左侧选择列单个选择框回调
                        onSelectedAll: onSelectedAllFn,                  // 左侧选择列全选回调
                        selectedChange: selectedChangeFn,                // 选择框有变动的钩子函数
                        params: 'test',                                  // 自定义传参
                    )}
            </div>
        );
    }
}
// 2.包装 editTable 页面
export default createPage({
   initTemplate: initTemplate
})(EditTable);

表格方法API (this.props.editTable 下面的方法)

createEditTable的config回调和自定义参数

editTable的模版里的meta和item的特定功能的设置