继续说说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 = ' ';
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");
console.log(val);
$(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编辑表单
标签：自定义,JeeSite,DataGrid,编辑,radio,单选 From： https://www.cnblogs.com/xupeixuan/p/17035315.html