网站ftp怎么登陆,wordpress自定义密码,长沙景观设计公司,怎么做加盟网站EasyUI弹出框行编辑#xff0c;通过下拉框实现内容联动
需求
实现用户支付方式配置#xff0c;当弹出框加载出来的时候#xff0c;显示用户现有的支付方式#xff0c;datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充#xff1b; 点击新增#xff1a;新…EasyUI弹出框行编辑通过下拉框实现内容联动
需求
实现用户支付方式配置当弹出框加载出来的时候显示用户现有的支付方式datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充 点击新增新增一个空白行 选择结算条款编码后面的结算方式等信息自动带出来 点击删除此行删除
实现
html代码只列举弹出框部分
div classeasyui-dialog idconfigDialog title客户条款配置 stylewidth: 800px;height:400px; padding:2px 2px; data-optionsiconCls: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);}}]divtable stylewidth:100%;height:322px; idconfigTable classeasyui-datagriddata-optionssingleSelect:true,selectOnCheck:true,checkOnSelect:true,fit:false,striped:false,autoRowHeight:false,pagination:false,toolbar: [{text:新增,iconCls:icon-add,handler:function(){appendRow();}}]theadtrth fieldid checkboxtrue/thth data-optionsfield:code,editor:{type:combobox,options:{valueField:id,textField:code,url:${ctx}/json/PoPaymentJsonController/getAllTipsList,onSelect: refreshRow}} width150 结算条款编码/thth data-optionsfield:settlementTypeName width150 结算方式/thth data-optionsfield:startTypeName width150 结算起始日期/thth data-optionsfield:period width150 结算天数/thth data-optionsfield:remark width100 formatterdetailFormatter操作/th/tr/thead/table/div
/divJS代码
%-- 配置 --%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);// 获取tdlet $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 fieldcodediv stylewidth: 149px; classdatagrid-cell datagrid-cell-c4-code datagrid-editabletable border0 cellspacing0 cellpadding1tbodytrtdinput typetext classdatagrid-editable-input combobox-f combo-f textbox-f styledisplay: none;span classtextbox combo stylewidth: 147px; height: 20px;span classtextbox-addon textbox-addon-right styleright: 0px;a hrefjavascript:void(0) classtextbox-icon combo-arrow icon-index0 stylewidth: 18px; height: 20px;/a/spaninput typetext classtextbox-text validatebox-text autocompleteoff placeholder stylemargin-left: 0px; margin-right: 18px; padding-top: 3px; padding-bottom: 3px; width: 121px;input typehidden classtextbox-value name value9/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);以上希望能对大家有所帮助如果大家有更好的办法欢迎留言讨论
