insertEditTable可编辑嵌套组件API

insertEditTable 可编辑嵌套表格

 修改时间： 2018-05-14
 当前版本： 1.0.0

分类： NC高级组件

使用场景

特别注意：

1、操作列属性说明

        label: '操作',              显示的列名称       *必须
        attrcode: 'opr',            列字段（键值）     非必须
        itemtype: 'customer',       列所属类别         *必须
        className: 'table-opr',     列样式类名         *必须 可补充追加 'table-opr my-class-name'
        fixed: 'right',             列是否右侧固定     选用  
        visible: true,              控制列的显隐性     *必须
        width: '160px',             控制宽度出滚动条   选用

2、控制字段在列表里显示 visible：true
3、想显示   **序号**   或者   **多选框** ，可以试试showIndex和showCheck

表格样式

浏览态样式 （待补充）

编辑态样式 （待补充）

简单示例

/**
 * 使用说明：
 *
 * 1.引入createPage
 * 2.包装业务页面
 * 3.代码中使用表单各种 API
 *   this.props.insertEditTable.createInsertEditTable
 *   ......
 */

// 1.引入createPage
import { createPage } from 'nc-lightapp-front';  // 'nc-lightapp-front/src'; 可以引入到源码，用于调试

// 示例 InsertEditTable 页面
class InsertEditTable extends Component {
    constructor(props) {
        super(props);
    }

    // 界面渲染
    render() {
        // 3.获取创建表单API
        let { createInsertEditTable } = this.props.insertEditTable;
        return (
            <div className="table-wrapper">
                // 根据meta信息创建简单table 

                {createInsertEditTable(
                    'revecont_b', //父表ID
                    'bodyTable', //子表ID
                    {
                        onAfterEvent: afterEvent, // 控件的编辑后事件  
                        onCloseModel: this.onCloseModel, // 弹窗控件点击关闭事件 
                        onSelected: this.onSelected,  // 父表单个选择框回调
                        onSelectedAll: this.onSelectedAll, // 父表全选回调
                        selectedChange: this.selectedChange,  // 父表选择框有变动的钩子函数
                        showCheck: true,    //是否显示父表的复选框
                        showChildCheck: true,   //是否显示子表的复选框
                        showIndex: true,     // 是否显示父表的索引
                        setChildTableData: setChildTableData.bind(this) // 设置子表数据
                    })}
            </div>
        );
    }
}

// 2.包装 cardTable 页面
export default createPage({
   initTemplate: initTemplate
})(InsertEditTable);

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

createInsertEditTable的config回调和自定义参数