查看: 6240|回复: 10

datagrid编辑editor结束后滚动条跳跃问题 [复制链接]

碧海惊涛

新手上路

Rank: 1

电梯直达

楼主

发表于 2016-1-25 10:01:38 |只看该作者 |倒序浏览

allowCellWrap="true"时有些列换行后是多行的，开始editor某列的值为null，未初始化数据，此时编辑完spinner类型的editor时，失去焦点时，滚动条会跳跃

收藏0

felt

超级版主

Rank: 8 Rank: 8

沙发

发表于 2016-1-25 10:25:23 |只看该作者

不明白你的问题
请提供简单html页面重现你说的问题

碧海惊涛

新手上路

Rank: 1

板凳

发表于 2016-1-25 12:42:43 |只看该作者

felt 发表于 2016-1-25 10:25
不明白你的问题
请提供简单html页面重现你说的问题

<div id="datagrid" class="mini-datagrid" allowAlternating="true"
         fitcolumns="false" pagesize="999999999" style="width: 100%; height: 100%;" allowresize="false"
         idfield="ts_InternalID" multiselect="true" allowCellWrap="true"
         frozenstartcolumn="0" frozenendcolumn="1"
         allowCellEdit="true"allowCellSelect="true"
         >
      <div property="columns">
         <div type="indexcolumn" width="50" headeralign="center">序号</div>
            <div name="ts_Explain" field="ts_Explain" width="50" headeralign="center" align="left" >评分说明</div>
            <div field="age" width="100" allowSort="true" >年龄
            <input property="editor" class="mini-spinner"  minValue="0" maxValue="200" value="25" style="width:100%;"/>
         </div>
      </div>
</div>

数据 ts_Explain 为长字符串，age 为null，编辑editor时失去焦点，浏览器滚动条跳动

碧海惊涛

新手上路

Rank: 1

地板

发表于 2016-1-25 12:44:59 |只看该作者

felt 发表于 2016-1-25 10:25
不明白你的问题
请提供简单html页面重现你说的问题

是因为设置了 frozenstartcolumn="0" frozenendcolumn="1" ，滚动条会跳动

felt

超级版主

Rank: 8 Rank: 8

5^#

发表于 2016-1-25 13:18:36 |只看该作者

碧海惊涛发表于 2016-1-25 12:44
是因为设置了 frozenstartcolumn="0" frozenendcolumn="1" ，滚动条会跳动

请提供一个简单html，打开可以直接重现你说的问题

碧海惊涛

新手上路

Rank: 1

6^#

发表于 2016-1-25 13:22:57 |只看该作者

felt 发表于 2016-1-25 13:18
请提供一个简单html，打开可以直接重现你说的问题

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../scripts/site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../scripts/boot.js"></script>
<script type="text/javascript" src="../scripts/alert.js"></script>
</head>
<body>
<div id="datagrid" class="mini-datagrid" allowAlternating="true"
         fitcolumns="false" pagesize="999999999" style="width: 100%; height: 100%;" allowresize="false"
         idfield="ts_InternalID" multiselect="true" allowCellWrap="true"
         frozenstartcolumn="0" frozenendcolumn="1"
         allowCellEdit="true" allowCellSelect="true" >
      <div property="columns">
         <div type="indexcolumn" width="50" headeralign="center">序号</div>
            <div name="ts_Explain" field="ts_Explain" width="50" headeralign="center" align="left" >评分说明</div>
            <div field="age" width="100" allowSort="true" >年龄
            <input property="editor" class="mini-spinner"  minValue="0" maxValue="200" value="25" style="width:100%;"/>
         </div>
      </div>
</div>

<script>
      mini.parse();
      (function aa() {
         var data = [{ "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
            { "ts_Explain": "请提供一个简单html，打开可以直接重现你说的问题请提供一个简单html，打开可以直接重现你说的问题" },
         ];
         mini.get("datagrid").set({
            data: data
         });
      })();
</script>

</body>
</html>