miniUI datagrid打开行内编辑时，下拉框控件显示的是id而不是text解决

最新推荐文章于 2024-08-14 08:41:12 发布

May_mm

最新推荐文章于 2024-08-14 08:41:12 发布

阅读量3.4k

点赞数

分类专栏： miniUI

本文链接：https://blog.csdn.net/May_mm/article/details/90368997

版权

miniUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.前言

在使用datagird，有时候会遇到需要使用行内编辑的情况，但是呢，有时候会遇到各种奇奇怪怪的问题，下面介绍主要介绍两个问题的解决办法：

①打开行内编辑时，下拉框（下拉树）控件显示的是id而不是text解决方式；

②行内编辑打开时，修改了内容，取消行内编辑后，修改的值没有显示在对应的列上，但点击保存后，对应列又显示的是修改后的值；

2.前端代码

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
    url=".............."> 
    <div property="columns"> 
        <%--staffId列存的是员工id，通过renderer函数在加载完成后展示员工的姓名--%>
        <div field="staffId" width="120" headerAlign="center" allowSort="true"    
           renderer="onStaffNameRenderer" >
            <input id="treeselect_staff" class="mini-treeselect" style="width:100%"             
               url="......"  textfield="text" valuefield="id" parentfield="pid">
        </div>
    </div>
</div>

<%--员工姓名解析--%>
function onStaffNameRenderer(e){
    return e.record.staffName;
}

<%--打开行内编辑方法--%>
function OpenEdit(){
    var grid = mini.get("datagrid1");
    var rows = grid.getSelecteds();
    for(var i=0;i<rows.length;i++){
        grid.beginEditRow(rows[i]);
    }
}

<%--关闭行内编辑方法--%>
function endEditRow(){
    var grid = mini.get("datagrid1");
    var rows = grid.getSelecteds();
    for(var i=0;i<rows.length;i++){
        grid.commitEditRow(rows[i]);
    }
}

3.问题①解决

下拉树要求展示的是员工姓名，但是当我通过打开行内编辑后，发现下拉树显示的是员工的id，查看源码后发现，原来调用beginEditRow方法时，单元格编辑控件的值都来源于对应的单位格，什么意思呢，比如上述代码中，第一行的staffId列的值为123，当我打开第一行的行内编辑时，会将123赋值给员工下拉树，因此员工下拉树显示的是id 123，解决这个问题可重新对下拉树的text进行赋值，如下将打开行内编辑方法修改：

<%--打开行内编辑方法--%>
function OpenEdit(){
    var grid = mini.get("datagrid1");
    var rows = grid.getSelecteds();
    for(var i=0;i<rows.length;i++){
        grid.beginEditRow(rows[i]);
        <%--获取员工列--%>
        var column = grid.getColumn(0);
        <%--根据行和列获取指定的编辑器--%>
        var editor = grid.getCellEditor(column,rows[i]);
        <%--对编辑器的text重新进行赋值--%>
        editor.text = rows[i].staffName;<%--此处可在列表查询sql中查询出staffName供此处进行使用--%>
    }
}

4.问题②解决

首先要知道当未执行 grid.commitEditRow(rows[i])时，在员工下拉树里面做的更改是不会更新到grid的编辑行上的指定列上，初始化第一行员工列的值为123，通过renderer解析得到的员工名称为May，行内编辑，重新选择了下拉框中其他员工，在我未执行grid.commitEditRow(rows[i])前，第一行员工列的值都是123；

执行commitEditRow时，会去更新row[i]的value值，但员工类存的是员工id，显示的是员工名称，此时id被更新为新的，但员工名称还是旧的，因此会出现取消行内编辑后，修改的值没有显示在对应的列上，但点击保存后，对应列又显示的是修改后的值（因为保存后重新查询了），因此解决这个问题可以在取消行内编辑方法中手动的对员工名称进行赋值，如下：

<%--关闭行内编辑方法--%>
function endEditRow(){
    var grid = mini.get("datagrid1");
    var rows = grid.getSelecteds();
    for(var i=0;i<rows.length;i++){
        <%--获取员工列--%>
        var column = grid.getColumn(0);
        <%--根据行和列获取指定的编辑器--%>
        var editor = grid.getCellEditor(column,rows[i]);
        <%--手动将下拉树编辑后的text赋值给staffName--%>
        rows[i].staffName = editor.text;
        grid.commitEditRow(rows[i]);
    }
}