FineUI 官方论坛

标题: （专业版2.3.0）如何用Grid单元格编辑实现模板列相同的功... [打印本页]

作者: Mr.Wu 时间: 2015-3-22 19:36
标题: （专业版2.3.0）如何用Grid单元格编辑实现模板列相同的功...
今天试用了一下Grid单元格编辑功能，感觉挺不错的。

其中官网有一个示例，用Template实现回车跳转到下一行并选中文本，如下图：
http://fineui.com/demo_pro/defau ... ow_scrolltorow.aspx
[attach]7314[/attach]

需求：不知能不能用Grid单元格编辑中的RenderField，来实现相同的功能？
希望老大能写个demo参考一下。
谢谢了。

作者: sanshi 时间: 2015-3-23 16:29
单元格编辑默认就支持Enter和Tab键的导航，看下官网的示例（示例下方文字说明）：http://fineui.com/demo_pro/#/dem ... l_vertical_tab.aspx

作者: Mr.Wu 时间: 2015-3-23 17:47

sanshi 发表于 2015-3-23 16:29
单元格编辑默认就支持Enter和Tab键的导航，看下官网的示例（示例下方文字说明）：http://fineui.com/demo_p ...

关键是怎么让鼠标点击单元格时选中单元格内容，以及回车时跳转到相同列下一行单元格（同时先选中原有内容），求demo,如果Render能做到，模板列这么复杂就可以少用了。

作者: sanshi 时间: 2015-3-23 18:19

Mr.Wu 发表于 2015-3-23 17:47
关键是怎么让鼠标点击单元格时选中单元格内容，以及回车时跳转到相同列下一行单元格（同时先选中原有内容 ...

TabVerticalNavigate="true" EnterSameAsTab="true" 这两个组合就行了，可以在这个例子上改：http://fineui.com/demo_pro/#/dem ... l_vertical_tab.aspx

作者: Mr.Wu 时间: 2015-3-23 19:00

sanshi 发表于 2015-3-23 18:19
TabVerticalNavigate="true" EnterSameAsTab="true" 这两个组合就行了，可以在这个例子上改：http://fin ...

刚试了一下，设置这2个属性后，的确可以回车跳转到下一格。
问题来了：
1.跳转到下一格时，下一格的内容并没有选中，光标在原文字最后了，要手工来选中原有内容，这对于快速录入肯定是不行的。
2.回车到达本列最后一格时，默认会自动跳转到第2列第1格了，能否让它跳转到其它地方（如跳转到保存按钮，进行数据保存）？
[attach]7322[/attach]

作者: sanshi 时间: 2015-3-27 12:29

Mr.Wu 发表于 2015-3-23 19:00
刚试了一下，设置这2个属性后，的确可以回车跳转到下一格。
问题来了：
1.跳转到下一格时，下一格的内容并 ...

查看示例（这个行为需要下个版本支持v2.4.0）：http://fineui.com/demo_pro/#/dem ... vertical_enter.aspx

作者: Mr.Wu 时间: 2015-3-27 13:02
本帖最后由 Mr.Wu 于 2015-3-27 13:03 编辑

sanshi 发表于 2015-3-27 12:29
查看示例（这个行为需要下个版本支持v2.4.0）：http://fineui.com/demo_pro/#/demo_pro/grid/grid_editor ...

要的就是这个效果，太强悍了，完全不用手工写js代码！！
不过还有2点小疑问：
1.能否设置跳转到第一列最后一行时，再点击回车跳转到保存按钮？而不是跳转到另一列去
2.上下方向键，或pageup，pagedown键，如果能跳转到上一行或下一行并选中单元格内容，就完美了

作者: sanshi 时间: 2015-3-27 13:27

Mr.Wu 发表于 2015-3-27 13:02
要的就是这个效果，太强悍了，完全不用手工写js代码！！
不过还有2点小疑问：
1.能否设置跳转到第一列最后 ...

2.上下方向键，或pageup，pagedown键，如果能跳转到上一行或下一行并选中单元格内容，就完美了
====
这个不行，上下键用来在未进入编辑状态时在单元格之间导航

作者: Mr.Wu 时间: 2015-3-27 13:43

sanshi 发表于 2015-3-27 13:27
2.上下方向键，或pageup，pagedown键，如果能跳转到上一行或下一行并选中单元格内容，就完美了
====
这个 ...

明白，那就麻烦老大帮看看第1点那个疑惑：能否设置跳转到某列最后一行时，再点击回车跳转到保存按钮，而不是跳转到另一列去

作者: sanshi 时间: 2015-3-27 14:27

Mr.Wu 发表于 2015-3-27 13:43
明白，那就麻烦老大帮看看第1点那个疑惑：能否设置跳转到某列最后一行时，再点击回车跳转到保存按钮，而 ...

新增示例：http://fineui.com/demo_pro/defau ... l_enter_tosave.aspx

同样，这个也是要下个版本支持 v2.4.0

作者: Mr.Wu 时间: 2015-3-27 17:19

sanshi 发表于 2015-3-27 14:27
新增示例：http://fineui.com/demo_pro/default.aspx#/demo_pro/grid/grid_editor_cell_vertical_enter_t ...

FineUI专业版，除了强大，我还能说什么呢？

作者: Mr.Wu 时间: 2015-3-30 16:34

sanshi 发表于 2015-3-27 14:27
新增示例：http://fineui.com/demo_pro/default.aspx#/demo_pro/grid/grid_editor_cell_vertical_enter_t ...

请问一下老大：点击Grid单元格时，选中的内容都是向左对齐？能弄个参数或属性，设置一下居中对齐吗？否则感觉不太和谐{:soso_e112:}
[attach]7344[/attach]

作者: sanshi 时间: 2015-3-30 18:01

Mr.Wu 发表于 2015-3-30 16:34
请问一下老大：点击Grid单元格时，选中的内容都是向左对齐？能弄个参数或属性，设置一下居中对齐吗？否则 ...

简单的CSS可以搞定，不难：http://fineui.com/demo_pro/#/dem ... cell_textalign.aspx

作者: Mr.Wu 时间: 2015-3-30 23:16

sanshi 发表于 2015-3-30 18:01
简单的CSS可以搞定，不难：http://fineui.com/demo_pro/#/demo_pro/grid/grid_editor_cell_textalign.asp ...

专业版就是强悍，就是这么任性！！{:soso_e179:}
再次多谢老大指点。

作者: Mr.Wu 时间: 2015-3-31 11:06

sanshi 发表于 2015-3-27 14:27
新增示例：http://fineui.com/demo_pro/default.aspx#/demo_pro/grid/grid_editor_cell_vertical_enter_t ...

老大，请问一下：你的这个示例是默认在最后一列时，才会自动跳转到保存按钮。
如果我在第一列从上往下回车跳转，能否在跳转到第一列最后一行时，再点击回车跳转到保存按钮？而不是跳转到另一列去？
希望能得到老大的指点，谢谢

作者: sanshi 时间: 2015-3-31 11:23

Mr.Wu 发表于 2015-3-31 11:06
老大，请问一下：你的这个示例是默认在最后一列时，才会自动跳转到保存按钮。
如果我在第一列从上往下回 ...

可以阿，你自己改那段JS就行了，自己试下

作者: Mr.Wu 时间: 2015-3-31 11:44

sanshi 发表于 2015-3-31 11:23
可以阿，你自己改那段JS就行了，自己试下

之前把思路集中在param参数上，想不找办法。现在换了个思路，功能达到了，麻烦老大帮看看有没有更简单的办法：

var saveBtnClientID = '<%= btnSubmit.ClientID %>';
function onGridBeforeTabEdit(event, params) {
// 如果当前列不是[综合素质]列，直接跳转到保存按钮
if (params.columnId != 'zonghe') {
// 点击保存按钮
F(saveBtnClientID).click();
// 阻止 TAB键跳转
return false;
}
}

复制代码

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)