EasyUI弹出框行编辑，通过下拉框实现内容联动
需求
实现用户支付方式配置，当弹出框加载出来的时候，显示用户现有的支付方式，datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充；
点击新增：新增一个空白行
选择结算条款编码：后面的结算方式等信息自动带出来
点击删除：此行删除
实现
html代码（只列举弹出框部分）
<div class="easyui-dialog" id="configDialog" title="客户条款配置" style="width: 800px;height:400px; padding:2px 2px;" data-options="
iconCls:'icon-save',
closed : true,
modal: true,
maximizable:true,
onResize:function(){
$(this).dialog('center');
},
buttons: [{
text:'保存',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'取消',
iconCls:'icon-no',
handler:function(){
$('#configDialog').dialog('close');
}
}]
">
<div>
<table style="width:100%;height:322px;" id="configTable" class="easyui-datagrid"
data-options="singleSelect:true,selectOnCheck:true,checkOnSelect:true,fit:false,striped:false,autoRowHeight:false,pagination:false,
toolbar: [{
text:'新增',
iconCls:'icon-add',
handler:function(){
appendRow();
}
}]
">
<thead>
<tr>
<th field="id" checkbox="true"></th>
<th data-options="field:'code',editor:{
type:'combobox',
options:{
valueField:'id',
textField:'code',
url:'${ctx}/json/PoPaymentJsonController/getAllTipsList',
onSelect: refreshRow
}
}" width="150" >结算条款编码</th>
<th data-options="field:'settlementTypeName'" width="150" >结算方式</th>
<th data-options="field:'startTypeName'" width="150" >结算起始日期</th>
<th data-options="field:'period'" width="150" >结算天数</th>
<th data-options="field:'remark'" width="100" formatter="detailFormatter">操作</th>
</tr>
</thead>
</table>
</div>
</div>
JS代码
<%-- 配置 --%>
function config(index){
const row = $('#dg').datagrid('getRows')[index]
const queryParams = {id:row.id}
$("#configTable").datagrid({
url : '${ctx}/json/PoPaymentJsonController/queryCustomerPaymentConfigMap',
queryParams : queryParams
});
$('#configDialog').dialog('open')
}
<%-- 添加一行 --%>
function appendRow(){
let dg = $('#configTable');
dg.datagrid('appendRow',{code:'',settlementTypeCode:'',startTypeCode:'',period:''});
// 获取新增的行的索引
let index = dg.datagrid('getRows').length - 1;
dg.datagrid('beginEdit', index);
}
<%-- 删除一行 --%>
function deleteRow(index){
let dg = $('#configTable');
let row = dg.datagrid('getRows')[index];
if(row.id){
deleteRows.push(row)
}
dg.datagrid('deleteRow', index);
}
<%-- 填充行 --%>
function refreshRow(row){
console.log('row',row);
// 使用closest方法向上查找最近的td元素
let $table = $(this).closest('table');
// 获取td
let $td = $table.closest('td');
$td.click();
const dg = $('#configTable');
const selected = dg.datagrid('getSelected');
const rowIndex = dg.datagrid('getRowIndex',selected);
// dg.datagrid('endEdit', rowIndex);
// dg.datagrid('updateRow',{
// index:rowIndex,
// row:row
// });
dg.datagrid('deleteRow',rowIndex);
dg.datagrid('insertRow',{
index:rowIndex,
row:row
})
}
难点解析
当点击选中下拉框之后需要更新当前行，但是经过测试，使用datagrid的onClickRow或者是onClickCell均不起作用，原因就是我们点击的是单元格中的元素
解决思路
1、通过F12中查看dom结构，然后获取到原本datagrid的td元素；
2、通过td的点击事件结合datagrid的selectOnCheck:true,checkOnSelect:true 使得编辑的行选中
3、通过选中行数据selected结合datagrid 的getRowIndex方法获取到编辑行索引index
4、通过index更新当前行数据
实现中的问题
在执行步骤4的时候发现，如果是使用insertRow方式，会在页面中停留一个下拉选面板异常
这里的原因就是。当我们选中之后，执行了更新行，再次之前没有执行编辑器editor的结束，导致此错误；
解决方案有2种
- 先结束editor的编辑，然后在更新
dg.datagrid(‘endEdit’, rowIndex);
dg.datagrid(‘updateRow’,{
index:rowIndex,
row:row
});
- 直接删除当前行，然后在insertRow
dg.datagrid(‘deleteRow’,rowIndex); dg.datagrid(‘insertRow’,{
index:rowIndex,
row:row })
看大家实际需要，第一种方式，因为我在refreshRow种调用了td的点击事件$td.click();，因此如果多行存在的话，每行都会被选中；所有都选中全选择没有打钩
第二中方式则一行都不会被选中，我采用的是第二种方式，大家可以根据需要实际需要选择。
第二个难点就是需要从当前选中的下拉框获取到编辑行，这里发现conbobox在datagrid中渲染的元素为
<td field="code">
<div style="width: 149px;" class="datagrid-cell datagrid-cell-c4-code datagrid-editable">
<table border="0" cellspacing="0" cellpadding="1">
<tbody>
<tr>
<td>
<input type="text" class="datagrid-editable-input combobox-f combo-f textbox-f" style="display: none;">
<span class="textbox combo" style="width: 147px; height: 20px;">
<span class="textbox-addon textbox-addon-right" style="right: 0px;">
<a href="javascript:void(0)" class="textbox-icon combo-arrow" icon-index="0" style="width: 18px; height: 20px;"></a>
</span>
<input type="text" class="textbox-text validatebox-text" autocomplete="off" placeholder="" style="margin-left: 0px; margin-right: 18px; padding-top: 3px; padding-bottom: 3px; width: 121px;">
<input type="hidden" class="textbox-value" name="" value="9">
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
因此这里获取到td之后再执行点击事件
// 使用closest方法向上查找最近的td元素
let $table = $(this).closest('table');
// 获取td
let $td = $table.closest('td');
$td.click();
const dg = $('#configTable');
const selected = dg.datagrid('getSelected');
// 获取到当前行
const rowIndex = dg.datagrid('getRowIndex',selected);
以上希望能对大家有所帮助；如果大家有更好的办法欢迎留言讨论
