华表（cell）的使用总结

最新推荐文章于 2025-09-17 09:35:19 发布

原创最新推荐文章于 2025-09-17 09:35:19 发布 · 4.1k 阅读

7 ·

CC 4.0 BY-SA版权

项目经验汇总专栏收录该内容

36 篇文章

订阅专栏

本文档详细介绍了如何使用华表插件进行cell表和cell卡片的创建、赋值及获取数据等操作，并提供了具体的JavaScript代码示例。

公司的业务涉及的表格比较多所以使用了华表，安装了华表插件。之前并没有用过所以一开始是一脸懵逼，百度上的资料也很少，几乎都没什么用，插件上带有的说明也是其他语言，根本看不懂。踩了不少坑，为了防止自己以后忘记了，也为了方便小伙伴们使用所以记录一下：

使用cell表需要引入的js,css

kitui.min.js
ReportWebUtil.js
RpWebEngineBudget.js

cell表：

cell卡片：

1、cell表的创建：如果iscard传true;则显示卡片，默认显示表格

Tools.initReportInfo = function(obj){
    menuid = obj.menuid;
    reportId = obj.reportId;
    id = obj.id;
    _isCard=obj.iscard;
    var currRpEngineObj = {};
    $.ajax({
        url:****,
        type:'GET',
        async:false,
        success:function(data){
            if(data){
                rpAll=data.data;
                currRpEngineObj    =  CreateRpWebEngine(rpAll,id,_isCard,0);
            };
        },
        error:function(err){
            console.log(err)
        }
    })
    return currRpEngineObj;//返回创建的cell对象，这个很重要，以后操作cell表都会用到
};

2、cell表的操作方法

2.1 cell表赋值，使用cell新增赋值时需声明：

var tempData = new HashMap(); //渲染数据用

//result为请求返回的对象，result.data.data是一个数组对象[{},{},{}...]

tempData.entry = result.data.data;
initReportInfo.SetData(tempData.entry);//给cell表格设置值
initReportInfo.SetModify(false);//设置cell表不可编辑

2.2 获取选中行的cell数据

var selRowData = initReportInfo.GetFocusData();

selRowData.entry是行数据对象。

3、cell卡片的操作方法

3.1 cell卡片赋值：

tempData.entry = cellData;//cellData是一个对象 {}
initReportInfo.SetCardData(tempData);//给cell卡片赋值
initReportInfo.SetModify(false);//设置卡片不可编辑

3.2 cell卡片取值：

initReportInfo.GetCardData().entry;//是一个对象{}

3.3 用cell卡片新增一个数据，比如单位编码是新增时必须要传的，用如下方法写入cell报表

tempData.put("agency_code", window.parent.agency_code);//设置默认单位编码
tempData.put("agency_name", window.parent.agency_name);//设置默认单位名称
tempData.put("xh", manIndex);//后台自动生成的序号赋值，manIndex是变量
tempData.put("id", 0);//新增默认id为0
tempData.put("bill_id", 0);//同上
initReportInfo.SetCardData(tempData);//给cell卡片赋值