Ajax子表支持的JavaScript事件

• BO_XXX_beforeedit(ui, boDefName, boItemDefName, uiSetting) --编辑前事件
• BO_XXX_afteredit(rowIndx, colIndx, dataModel, data) --编辑后事件
• BO_XXX_celleditkeydown(rowIndx, colIndx, column, dataModel, data) --单元格键盘按下事件
• BO_XXX_cellclick(rowIndx, colIndx, column, dataModel, rowData, data) --单元格点击事件
• BO_XXX_refresh(dataModel, data) --刷新事件
• BO_XXX_rowselect(rowIndx, colIndx, dataModel, data) --行选择后事件
• BO_XXX_rowremoved(ids) --行记录删除后事件
• BO_XXX_rowsinserted(rowIndx, newRowData) --行插入后事件
• BO_XXX_GridReadyEvent() --子表加载后事件

Ajax子表在执行过程中提供一些常用的事件，来满足不同的需求。 事件的执行机制是用户自定义一个约定好的javascript函数名，Ajax引擎会判断这function是否存在，存在即执行。 约定方式如下：

function BO表名_事件名称(参数列表) {

}

几点建议

• 这些js函数建议定义到js文件中，引入到表单，方便维护。
• 参数列表提供的参数，建议使用console.log(参数)的形式打印到控制台查看结构
• 编写js代码时，可以在js代码中输入debugger，打开Chrome浏览器的开发者工具时，js代码执行到该行会自动暂停，相当于一个断点

为了方便描述，以下小节示例中约定BO表名为BO_XXX，正常使用中，根据真实的BO表名修改。

BO_XXX_beforeedit((ui, boDefName, boItemDefName, uiSetting)

编辑前事件

• 可以阻止单元格的编辑
• 可以控制UI组件的展示

示例代码

function BO_XXX_beforeedit(ui, boDefName, boItemDefName, uiSetting) {
    //示例功能
    //1.如果不是新建的数据不允许编辑
    //2.如果NAME字段为2，则重新设定NAME4日期组件的范围（uiSetting对象包含该字段UI组件的所有信息）
    var rowData = ui.rowData;
    var param = rowData.FORM_EDITGRID_DATA_ATTR_COLUMN;
    param = typeof param == "string" ? JSON.parse(param) : param;
    if(uiSetting.isEditState){
        //进行允许编辑判断(对应功能1)
        return param.isCreate; //只有新建的记录才可以编辑
    }else{
        //进行组件重定义(对应功能2)
        if (boItemDefName == "NAME4") { //NAME4 是日期字段，如果其他字段则不做此日期规则
            //在此处写上自己的逻辑
            var isRule = rowData["NAME"] == "2";
            if (isRule) {
                //如果isRule 为true 则规定一个时间范围，范围值也是需要自己写逻辑
                uiSetting.minDate = "2016-10-11";
                uiSetting.maxDate = "2016-10-16";
                return uiSetting;
            }
        }
    }
}

BO_XXX_afteredit(rowIndx, colIndx, dataModel, data)

编辑后事件

示例代码

function BO_XXX_afteredit(rowIndx, colIndx, dataModel, data){
    console.log('编辑后事件');
    console.log(rowIndx, colIndx, dataModel, data);

    var row = data[rowIndx];//row是每行数据
    var newVal = row["AF4"] * row["AF12"];//计算两个的乘积
    AWSGrid.getGridAPI('BO_XXX').setFieldValue(rowIndx,"AF13",newVal);//赋值给另一个字段
}

BO_XXX_celleditkeydown(rowIndx, colIndx, column, dataModel, data)

单元格键盘按下事件

示例代码

function BO_XXX_celleditkeydown(rowIndx, colIndx, column, dataModel, data){
    console.log('单元格键盘按下事件');
    console.log(rowIndx, colIndx, column, dataModel, data);
}

BO_XXX_cellclick(rowIndx, colIndx, column, dataModel, rowData, data)

单元格点击事件

示例代码

function BO_XXX_cellclick(rowIndx, colIndx, column, dataModel, rowData, data){
    console.log('单元格点击事件');
    console.log(rowIndx);
}

BO_XXX_refresh(dataModel, data)

示例代码

function BO_XXX_refresh(dataModel, data){
    console.log('刷新事件');
    console.log(dataModel, data);
}

BO_XXX_rowselect(rowIndx, colIndx, dataModel, data)

示例代码

function BO_XXX_rowselect(rowIndx, colIndx, dataModel, data){
    console.log('选择后事件');
    console.log(rowIndx, colIndx, dataModel, data);
}

BO_XXX_rowremoved(ids)

行记录删除后事件，服务器端删除数据成功后调用

示例代码

function BO_XXX_rowremoved(ids){
    console.log('删除后事件');
    console.log(ids);
}

BO_XXX_rowsinserted(rowIndx, newRowData)

记录插入后事件，通常是新建按钮触发的

示例代码

function BO_XXX_rowsinserted(rowIndx, newRowData){
    console.log('插入后事件');
    console.log(rowIndx, newRowData);
}

BO_XXX_GridReadyEvent()

Ajax子表渲染后的事件，通常在Ajax子表渲染后触发。

示例代码

function BO_XXX_GridReadyEvent(){

    //该示例代码是给Ajax子表增加一个自定义按钮
    //自定义按钮的行为可以
    var option = AWSGrid.getGrid('BO_XXX').awsGrid('option');
    //console.log(option)
    var button = {
        id:"abc",
        type:"button",
        cls:"red",
        label:"自定义按钮",
        group:"abc",
        render:function() {
            //AWSGrid.getGridAPI("BO_XXX").setStyleByRow();
            var data = AWSGrid.getGrid('BO_XXX').awsGrid("getData");
            console.log(data)
            for(var i=0;i<data.length;i++) {
                var row = data[i];//row是每行数据
                console.log(row)
                row["AF4"] = "新的值";//AF3是字段名
                AWSGrid.getGrid('BO_XXX').awsGrid( "setEditData", row);
            }
            //注意，需要手动刷新一下
            //console.log("ddd",a);
            AWSGrid.getGrid('BO_XXX').awsGrid('refreshDataAndViewLocal');
        }
    };
    var toolbar = option.toolbar;
    toolbar.items.push(button);
    AWSGrid.getGrid('BO_XXX').awsGrid('option', {toolbar : option.toolbar});
}

几种场景示例

Ajax子表控制列显示隐藏

function setColumnDisplay(){
    //通过下面代码获取子表的配置信息
    var option = AWSGrid.getGrid('BO_XXX').awsGrid('option');
    //根据条件，定位到一列上，示例中是定位到第二列上，设置hidden属性
    option.colModel[2].hidden = true;//true为隐藏，false为显示
    //option.colModel是一个数组
    //通过下面代码，重新给子表设置选项，使选项生效
    AWSGrid.getGrid('BO_XXX').awsGrid('option', {option : option});
}

Ajax子表增加自定义按钮

该场景应用了BO_XXX_GridReadyEvent事件

function BO_XXX_GridReadyEvent(){

    //该示例代码是给Ajax子表增加一个自定义按钮
    //自定义按钮的行为可以根据需求自定义，该模拟场景是给所有数据的一个字段设置一个新的值
    var option = AWSGrid.getGrid('BO_XXX').awsGrid('option');
    //console.log(option)
    var button = {
        id:"abc",
        type:"button",
        cls:"red",
        label:"自定义按钮",
        group:"abc",//如果添加多个按钮在一个组中，要保持该值一致
        render:function() {
            //AWSGrid.getGridAPI("BO_XXX").setStyleByRow();
            var data = AWSGrid.getGrid('BO_XXX').awsGrid("getData");
            console.log(data)
            for(var i=0;i<data.length;i++) {
                var row = data[i];//row是每行数据
                console.log(row)
                row["AF4"] = "新的值";//AF3是字段名
                AWSGrid.getGrid('BO_XXX').awsGrid( "setEditData", row);
            }
            //注意，需要手动刷新一下
            //console.log("ddd",a);
            AWSGrid.getGrid('BO_XXX').awsGrid('refreshDataAndViewLocal');
        }
    };
    var toolbar = option.toolbar;
    toolbar.items.push(button);
    AWSGrid.getGrid('BO_XXX').awsGrid('option', {toolbar : option.toolbar});
}

Ajax子表编辑实时计算

上文中已经有示例代码代码介绍，但是该示例可以做到实时计算，即在键盘输入的过程中触发

function BO_XXX_celleditkeydown(rowIndx, colIndx, column, dataModel, data){
    var row = data[rowIndx];//row是每行数据
    var newVal = row["AF4"] * row["AF12"];//计算两个的乘积
    AWSGrid.getGridAPI('BO_XXX').setFieldValue(rowIndx,"AF13",newVal);//赋值给另一个字段
}

延伸阅读

• AWS Ajax子表相关的API