combogrid翻页后保持显示内容为配置的textField解决办法

easyui的combogrid当配置pagination为true进行分页时,当datagrid加载其他数据页,和上一次选中的valueField不匹配时,会导致combogrid直接显示valueField的值,而不是textField的值。



第一页包含valueField,可以选中记录和正常显示textField的值



第二页未包含valueField,datagrid没有选中的记录,combogrid直接显示出valueField的值。



  combogrid翻页后保持显示内容为配置的textField解决办法源代码如下

-收缩 HTML代码   运行代码   [如果运行无效果,请自行将源代码保存为html文件运行]
<input type="text" id="combogrid" value="FI-SW-011" />
<script>
    //FI-SW-011对应的显示值为Koi1,这里示例直接写死,实际应用需要从数据库中读取出赋值给这个变量
    //如果设置了multiple为true,注意也需要从数据库读出所有对应的显示值复制给此js变量
    //赋值给js变量可以用服务器端代码,如var diplayText = '<%=xxxx %>'
    //此变量值会在onLoadSuccess赋值给combogrid的显示对象,不再依赖combogrid相关的事件进行设置
    //因为添加翻页的话,多选的值可能出现在不同的分页中
    var diplayText = 'Koi1';
script>
<script>
    var grid = $('#combogrid');
    grid.combogrid({
        title: 'combogrid翻页后保持显示内容为配置的textField解决办法',
        panelWidth: 500,
        width: 230,
        idField: 'productid',
        textField: 'productname',
        url: 'data.asp',
        columns: [[{ field: 'productid', title: 'Item ID', width: 80 }, { field: 'productname', title: 'Product', width: 120}]],
        onSelect: function (index, row) {//选中datagrid数据行,更新displayText变量
            diplayText = row[grid.combogrid('options').textField];
        },
        onLoadSuccess: function () {
            //分页后判断下是否有选中的数据行,combogrid会依据上一次选中的值进行初始化,选中datagrid数据行和设置显示值
            if (!grid.combogrid('grid').datagrid('getSelected'))  //不再当前页
                grid.next().find('input.combo-text').val(diplayText);
        },
        fitColumns: true, pagination: true
    });
script>

你可能感兴趣的:(combogrid翻页后保持显示内容为配置的textField解决办法)