simpleTable简单弹窗表格组件特性

SimpleTable 简单弹窗型表格

 修改时间： 2018-04-11
 当前版本： 1.1.50

分类： NC高级组件

表格样式

简单示例

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

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

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

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

                {createSimpleTable('tableDemo'), {
                    handlePageInfoChange: handlePageInfoChangeFn,    // 分页器操作的回调函数
                    tableModelConfirm: tableModelConfirmFn,          // 弹窗确认事件回调
                    onAfterEvent: afterEventFn,                      // 弹窗控件的编辑后事件      
                    onSelected: onSelectedFn,                        // 左侧选择列单个选择框回调
                    onSelectedAll: onSelectedAllFn,                  // 左侧选择列全选回调
                    selectedChange: selectedChangeFn,                // 选择框有变动的钩子函数
                    params: 'test',                                  // 自定义传参
                }}
            </div>
        );
    }
}

// 2.包装 SimpleTable页面

export default createPage({
    initTemplate: initTemPlateFn,   // initTemPlateFn为初始化模板的方法
    // **操作列和其他自定义列 要记得加 itemtype: customer**
})(SimpleTable);

模板结构

模版结构实例

{ moduletype: “table”, pagination: true, items: [ { itemtype: “refer”, maxlength: “20”, visible: true, label: “财务组织最新版本”, width: “200px”, disabled: true, attrcode: “pk_org”, color: “red” } ] }

父级模版字段说明

子级模版字段详细说明

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

createSimpleTable的config回调和自定义参数

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