自定义JeeSite组件DataGrid中的单选钮radio编辑项

继续说说JeeSite中提供的DataGrid组件。作为传统的后端生成前端使用JqGrid来显示列表数据是非常方便的，JeeSite框架将JqGrid进行了包装，简化和规范了使用值得称赞，但毕竟JqGrid作为第三方的开源JS库，其使用的灵活程度和复杂性也让人有爱有恨。用法灵活丰富易于构建UI丰富的场景，但使用繁杂的用法也让许多老手抓掉大把头发。今天要说的一个问题是在设置JeeSite组件DataGrid某列为编辑列，其显示类型是单选钮radio在使用中出现的问题。在jqGrid中可编辑列的选项中是没有radio类型的，而在JeeSite中提供的DataGrid则增加了这个类型。

在使用JeeSite的DataGrid时，列可编辑项为radio时提交数据可能是空的，另外在对radio添加校验的情况下，校验也不能正确校验。这主要是因为radio是由多个输入域来组成，这些输入域的name都是相同的，如果在正常的表单下操作它们不会发生错误，但放在DataGrid的编辑环境中就发生了上面的问题。

由于JeeSite实现的代码都不开源，因此无法分析其中产生问题的原因，尽管使用者提问官方会积极主动回应，但是实际问题解决的方法单靠JeeSite团队解决还是比较滞后或最后也不清楚其中机制，可定制和扩展十分困难。

根据上面的问题主要结合jqGrid中用法，提供了一个相对简单作法，改进思路如下：

使用DataGrid的自定义编辑方式，即列的可编辑类型定义为custom，利用回调函数custom_element来生成可编辑的UI，不直接使用radio来提交数据，使用一个隐藏输入域来保存数据，在设置各个radio时动态修改隐藏域的值。因此需要在初始化时调用data_init方法来设置每个radio的click行为。

自定义两个方法用来处理上面的行为方便程序利用，这两个方法保存在JeeSite的common.js文件中，具体代码如下所示。

 

/*
 * 自定义DataGrid行编辑单选钮radio显示，DataGrid提供的可编辑radio在加入校验后校验不正确，提交数据为空
 * val - DataGrid当前单元格的值，用于设置单选钮的选中和隐藏域的值
 * row_id - DataGrid当前行号，主要通过editOptions.id获得
 * dict_array - 生成多个单选钮的数据字典选项数组
 */
function data_grid_editable_radio_custom_elememt(val, row_id, dict_array) {
    var radio_prefix = '<input type="radio" name="edit_radio_' + row_id + '"';
    var radio_space = '&nbsp;&nbsp;';
    var len = dict_array.length;
    var html = '';
    for (var i = 0; i < len; i++) {
        html += i > 0 ? radio_space : '';
        html += radio_prefix;
        html += i === 0 ? ' class="required" ' : '' // 只在第一个单选钮添加检验，解决检验项重名错乱问题
        html += val === dict_array[i].dictValue ? ' checked="checked" ' : '';
        html += ' value="' + dict_array[i].dictValue + '"/>' + dict_array[i].dictLabel;
    }

    return '<input type="hidden" name="dataGridAutoFill" value="'+ val +'"/><div>' + html + '</div>';
}

/*
 * 自定义DataGrid行编辑单选钮radio数据初始化函数，为每个单选钮绑定click事件设置隐藏域中的值为表格提交的值，不提交radio的值防止出现空值
 */
function data_grid_editable_radio_data_init(element) {
    $(element).find('input:radio').each(function (index, radioNode) {
        $(radioNode).on("click", function() {
            var val = $(this).attr("value");
            $(this).parent().prev().attr("value", val);
        })
    });
}

　在DataGrid中可编辑列的用法示例如下：

{header:'是否合格', name:'isAccepted', width:135, align:"center", editable:true, edittype:'custom', 
        editoptions:{
            custom_element: function(val, editOptions) {
                var dict_array = $.merge([], ${@DictUtils.getDictListJson('sys_yes_no')});
                return data_grid_editable_radio_custom_elememt(val, editOptions.id, dict_array);
            },
            dataInit: function(element) {
                data_grid_editable_radio_data_init(element);
            }
        }
    },

列的编辑类型edittype设置为custom，调用common.js中自定义的两个方法。

在修改DataGrid时查询的网上资料，在此记录一下。

http://www.w3dev.cn/jqGrid-cn-API.aspx jqGrid中文API参考文章

http://free-jqgrid.github.io/index.html Free-jqGrid

https://stackoverflow.com/questions/26662327/jqgrid-view-form-datainit  jqGrid View Form DataInit

https://www.cnblogs.com/W-wang-yu/p/16808661.html jqGrid通用编辑规则 

http://www.trirand.com/jqgridwiki/doku.php?id=start jqGrid Wiki

https://www.thinbug.com/q/47877817 自定义单选按钮jqgrid编辑表单