快捷導(dǎo)航

EasyUI彈出框行編輯如何通過下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動

更新時間：2024年11月12日 09:16:36 作者：天農(nóng)學(xué)子

本文介紹了如何使用EasyUI彈出框和下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動,并詳細描述了當用戶選擇下拉框時如何更新當前行數(shù)據(jù),通過解決datagrid的onClickRow和onClickCell事件不觸發(fā)的問題,實現(xiàn)了下拉框選擇后數(shù)據(jù)的自動填充

EasyUI彈出框行編輯，通過下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動

需求

實現(xiàn)用戶支付方式配置，當彈出框加載出來的時候，顯示用戶現(xiàn)有的支付方式，datagrid的第一列為conbobox,下來選擇之后實現(xiàn)后面的數(shù)據(jù)直接填充；

點擊新增：新增一個空白行
選擇結(jié)算條款編碼：后面的結(jié)算方式等信息自動帶出來
點擊刪除：此行刪除

實現(xiàn)

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" >結(jié)算條款編碼</th>
                    <th data-options="field:'settlementTypeName'" width="150" >結(jié)算方式</th>
                    <th data-options="field:'startTypeName'" width="150" >結(jié)算起始日期</th>
                    <th data-options="field:'period'" width="150" >結(jié)算天數(shù)</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
        })
    }

難點解析

當點擊選中下拉框之后需要更新當前行，但是經(jīng)過測試，使用datagrid的onClickRow或者是onClickCell均不起作用，原因就是我們點擊的是單元格中的元素

解決思路

1、通過F12中查看dom結(jié)構(gòu)，然后獲取到原本datagrid的td元素；
2、通過td的點擊事件結(jié)合datagrid的selectOnCheck:true,checkOnSelect:true 使得編輯的行選中
3、通過選中行數(shù)據(jù)selected結(jié)合datagrid 的getRowIndex方法獲取到編輯行索引index
4、通過index更新當前行數(shù)據(jù)

實現(xiàn)中的問題

在執(zhí)行步驟4的時候發(fā)現(xiàn)，如果是使用insertRow方式，會在頁面中停留一個下拉選面板異常

這里的原因就是。當我們選中之后，執(zhí)行了更新行，再次之前沒有執(zhí)行編輯器editor的結(jié)束，導(dǎo)致此錯誤；
解決方案有2種

先結(jié)束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種調(diào)用了td的點擊事件$td.click();，因此如果多行存在的話，每行都會被選中；所有都選中全選擇沒有打鉤

第二中方式則一行都不會被選中，我采用的是第二種方式，大家可以根據(jù)需要實際需要選擇。

第二個難點就是需要從當前選中的下拉框獲取到編輯行，這里發(fā)現(xiàn)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)" rel="external nofollow"  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之后再執(zhí)行點擊事件
// 使用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);

以上希望能對大家有所幫助；如果大家有更好的辦法歡迎留言討論

到此這篇關(guān)于EasyUI彈出框行編輯，通過下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動的文章就介紹到這了,更多相關(guān)EasyUI下拉框內(nèi)容聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: