Please enable JavaScript.

Coggle requires JavaScript to display documents.

TabulatorPro - Coggle Diagram

TabulatorPro

列数据

普通列数据

const buildTableOptions = ()=>{
    const paginationCallback = (current, pageSize)=>{
        toLoadingFormData({current, pageSize});
    }

    const addTabulatorOptions = {
        // selectable: 1,
        selectableRangeMode: "click",
    };

    const buildOptions = [
        paginationCallback, "InquirySheet", formData,
        {}, addTabulatorOptions, []
    ];
    const {tabulatorOptions, paginationOptions} = TableOption.buildTabulator(...buildOptions);
    console.log('formData')
    console.log(formData)
    console.log('tabulatorOptions')
    console.log(tabulatorOptions)
    // 更新表单数据, 重新渲染
    setTabulatorOptions(tabulatorOptions);
    setPaginationOptions(paginationOptions);
    // 表单操作时的临时数据, 置空
    setTableParams({
        table: null, selectRowList: [], copyNumber: 0, partNumber: "",
    });
}

表单状态管理

const columns = ConstConfig.getFormStructure_Columns(formName).slice(2);//!需要剔除列数组中的序号和勾选框
const [formData,setFormData] = useState([])
const [tabulatorOptions, setTabulatorOptions] = useState({});
const [paginationOptions, setPaginationOptions] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [tableParams, setTableParams] = useState({
    table: null, selectRowList: [], copyNumber: 0, partNumber: "",
});
const [columnFields, setColumnFields] = useState([]);//列字段

主表副作用管理

// 初始化
useEffect(()=>{
    componentCreate();
    return ()=>{
        componentDestroy();
    }
}, []);

// 处理更新后的表单数据
useEffect(()=>{
    table && handleUpdateFormData(formData);
}, [formData]);



// 监听查询选项更新
useEffect(()=>{
    toSetSearchOptions(localFormSearchOptions);//! 这里就是一个设置状态为什么不直接用 状态监听 而是要用useEffect 来监听他自己
}, [localFormSearchOptions]);

// 监听表单数据更新
useEffect(()=>{
    toSetFormData(localFormData);
}, [localFormData]);

状态设置函数

//搜索选项
const toSetSearchOptions = (options)=>{
    setSearchOptions(options);
}
//搜索字段
const toSetSearchFieldValue = (fieldValue)=>{
    setSearchFieldValue(fieldValue);
}
//【正在加载】状态
const toSetIsLoading = (isLoading)=>{
    setIsLoading(isLoading);
}
//设置表格源数据
const toSetFormData = (data)=>{
    setFormData(data);
    toSetIsLoading(false);
}
//设置表格选项
const toSetTabulatorOptions = (options)=>{
    setTabulatorOptions(options);
}

const toSetPaginationOptions = (options)=>{
    setPaginationOptions(options);
}

const toSetTable = (table)=>{
    setTable(table);
}

const toSetExpandTitle = (expandTitle)=>{
    setExpandTitle(expandTitle);
}

事件处理函数

 const componentCreate = ()=>{
    toLoadFormSearchOptions();// 加载表单查询选项
       toLoadFormData();   // 加载表单数据
         buildTableOptions();   // 初始化构建表单的选项
}
  const paginationCallback = (current, pageSize)=>{
    toLoadFormData({current, pageSize});
}

const buildPaginationOptions = (formData)=>{
    const buildParams = [paginationCallback, formData || [], []];
    const paginationOptions = TableOption.buildTabulator_PaginationOptions(...buildParams);
    toSetPaginationOptions(paginationOptions);
}

const buildTableOptions = ()=>{
    const paginationCallback = (current, pageSize)=>{
        // toLoadingFormData({current, pageSize});
    }
    const addTabulatorOptions = {
        // selectable: 1,
        selectableRangeMode: "click",
    };

    const buildOptions = [
        paginationCallback, "CustomerManagementSheet", formData,
        {}, addTabulatorOptions, []
    ];
    const {tabulatorOptions, paginationOptions} = TableOption.buildTabulator(...buildOptions);
    console.log('formData')
    console.log(formData)
    console.log('tabulatorOptions')
    console.log(tabulatorOptions)
    // 更新表单数据, 重新渲染
    setTabulatorOptions(tabulatorOptions);
    setPaginationOptions(paginationOptions);
    // 表单操作时的临时数据, 置空
    // setTableParams({
    //     table: null, selectRowList: [], copyNumber: 0, partNumber: "",
    // });
}
const setTableData = (formData)=>{
    table.setData(formData?.data || []);
}
const renderTable = (formData)=>{
    buildPaginationOptions(formData);
    setTableData(formData);
}
const handleUpdateFormData = (formData)=>{
    renderTable(formData);
}