EasyUI弹出框行编辑,通过下拉框实现内容联动

EasyUI弹出框行编辑,通过下拉框实现内容联动

需求

实现用户支付方式配置,当弹出框加载出来的时候,显示用户现有的支付方式,datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充;

点击新增:新增一个空白行

选择结算条款编码:后面的结算方式等信息自动带出来

点击删除:此行删除

实现

html代码(只列举弹出框部分)

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代码

javascript 复制代码
	<%-- 配置 --%>
    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
        })

    }

难点解析

当点击选中下拉框之后需要更新当前行,但是经过测试,使用datagridonClickRow或者是onClickCell均不起作用,原因就是我们点击的是单元格中的元素

解决思路

1、通过F12中查看dom结构,然后获取到原本datagrid的td元素;

2、通过td的点击事件结合datagridselectOnCheck:true,checkOnSelect:true 使得编辑的行选中

3、通过选中行数据selected结合datagridgetRowIndex方法获取到编辑行索引index

4、通过index更新当前行数据

实现中的问题

在执行步骤4的时候发现,如果是使用insertRow方式,会在页面中停留一个下拉选面板异常

这里的原因就是。当我们选中之后,执行了更新行,再次之前没有执行编辑器editor的结束,导致此错误;

解决方案有2种

  1. 先结束editor的编辑,然后在更新

dg.datagrid('endEdit', rowIndex);

dg.datagrid('updateRow',{

index:rowIndex,

row:row

});

  1. 直接删除当前行,然后在insertRow

dg.datagrid('deleteRow',rowIndex); dg.datagrid('insertRow',{

index:rowIndex,

row:row })

看大家实际需要,第一种方式,因为我在refreshRow种调用了td的点击事件$td.click();,因此如果多行存在的话,每行都会被选中;所有都选中全选择没有打钩

第二中方式则一行都不会被选中,我采用的是第二种方式,大家可以根据需要实际需要选择。

第二个难点就是需要从当前选中的下拉框获取到编辑行,这里发现conbobox在datagrid中渲染的元素为

html 复制代码
<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);

以上希望能对大家有所帮助;如果大家有更好的办法欢迎留言讨论

相关推荐
浏览器爱好者4 分钟前
Chrome与火狐哪个浏览器的性能表现更好
前端·chrome
Topstip6 分钟前
在 Google Chrome 上查找并安装 SearchGPT 扩展
前端·人工智能·chrome·gpt·ai·chatgpt
gqkmiss7 分钟前
Chrome 130 版本开发者工具(DevTools)更新内容
前端·chrome·chrome devtools·开发者工具·chrome 130
小远yyds22 分钟前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
weixin_516875651 小时前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
皮卡穆1 小时前
JavaScript 变量作用域与函数调用机制:var 示例详解
javascript
_oP_i1 小时前
Unity 中使用 WebGL 构建并运行时使用的图片必须使用web服务器上的
前端·unity·webgl
H_HX1261 小时前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http
羊小猪~~1 小时前
前端入门一之CSS知识详解
前端·javascript·css·vscode·前端框架·html·javas
哪 吒1 小时前
华为OD机试 - 无重复字符的元素长度乘积的最大值(Python/JS/C/C++ 2024 C卷 100分)
javascript·python·华为od