zoukankan      html  css  js  c++  java
  • combogrid翻页后保持显示内容为配置的textField解决办法

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


    combogrid翻页后保持显示内容为配置的textField解决办法
    第一页包含valueField,可以选中记录和正常显示textField的值


    combogrid翻页后保持显示内容为配置的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,
             230,
            idField: 'productid',
            textField: 'productname',
            url: 'data.asp',
            columns: [[{ field: 'productid', title: 'Item ID',  80 }, { field: 'productname', title: 'Product',  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解决办法

  • 相关阅读:
    电力三维基础信息平台
    基于三维GIS技术的输电线路地理信息系统的设计与实现
    linux学习笔记(1)
    linux学习笔记(4)
    linux学习笔记(8)
    linux学习笔记(6)
    linux学习笔记(3)
    linux 学习笔记(2)
    linux学习笔记(7)
    ASCII码表完整版
  • 原文地址:https://www.cnblogs.com/azhqiang/p/4571740.html
Copyright © 2011-2022 走看看