Grid如何实时比较两个模板列文本框的值是否一致？

sanshi

这道题目还比较有意思，主要是考察Javascript和Extjs的使用，我就来解答一下。最终效果如下所示：


关键代码：

1. function registerCompareEvent() {
   
2.             var grid = X(gridClientID);
   
3.             grid.el.select('.x-grid-tpl input').on("keydown", function (evt, el) {
   
4. 
   
5.                 window.setTimeout(function () {
   
6. 
   
7.                     var rowNum = 0, idPattern = /^Grid1_c\dr(\d)_.+$/.exec(el.id);
   
8.                     if (idPattern && idPattern.length == 2) {
   
9.                         rowNum = rowNum[1];
   
10.                     }
    
11.                     var row = Ext.get(el).parent('.x-grid3-row');
    
12.                     var num1 = row.query('.x-grid3-col-ct6 input')[0].value;
    
13.                     var num2 = row.query('.x-grid3-col-ct7 input')[0].value;
    
14.                     var resultNode = row.query('.x-grid3-col-ct8 span.result')[0];
    
15.                     if (num1 == num2) {
    
16.                         resultNode.className = 'success';
    
17.                         resultNode.innerHTML = '两组录入一致';
    
18.                     } else {
    
19.                         resultNode.className = 'error';
    
20.                         resultNode.innerHTML = '两组录入不一致！';
    
21.                     }
    
22. 
    
23.                 }, 500);
    
24.             });
    
25.             
    
26.         }

复制代码

我已经写了个例子，感兴趣的网友可以自行下载源代码编译。

sanshi

Mr.Wu 发表于 2013-1-22 01:19
三石兄能解释一下idPattern = /^Grid1_c(\d)r\d_.+$/.exec(el.id)这句是什么意思么？
为什么我把回车和比较 ...

是和列数相关，需要查看页面的html结构。

那句话的意思是使用正则表达式从文本输入框的id获取当前列数•••

sanshi

Mr.Wu 发表于 2013-1-22 13:23
刚才把codeplex上的示例代码下载运行了一下，发现了一个问题：第一次输入回车时，是可以比较两者不是相同； ...

Sorry，原来的代码有点问题。第一个更新className时就把原来的CSS类名result给清掉了，所以下次就找不到resultNode节点了。

更新后的关键代码：

1. function registerCompareEvent() {
   
2.             var grid = X(gridClientID);
   
3.             grid.el.select('.x-grid-tpl input').on("keydown", function (evt, el) {
   
4. 
   
5.                 window.setTimeout(function () {
   
6. 
   
7.                     var row = Ext.get(el).parent('.x-grid3-row');
   
8.                     var num1 = row.query('.x-grid3-col-ct6 input')[0].value;
   
9.                     var num2 = row.query('.x-grid3-col-ct7 input')[0].value;
   
10.                     var resultNode = Ext.get(row.query('.x-grid3-col-ct8 span.result'));
    
11.                     resultNode.removeClass(['success', 'error']);
    
12.                     if (num1 == num2) {
    
13.                         resultNode.addClass('success');
    
14.                         resultNode.update('两组录入一致');
    
15.                     } else {
    
16.                         resultNode.addClass('error');
    
17.                         resultNode.update('两组录入不一致！');
    
18.                     }
    
19. 
    
20.                 }, 500);
    
21.             });
    
22.             
    
23.         }

复制代码

已经Checkin代码到服务器。

sanshi

Mr.Wu 发表于 2013-1-22 18:27
首先衷心感谢三石兄和FineUI团队！这帖子希望能实时比较Grid表格内模板列两文本框的值是否一致，现已经 ...

是的哦，原来的确没考虑到这一点

sanshi

yygy 发表于 2013-1-23 01:59
在哪下载？

http://fineui.codeplex.com/SourceControl/BrowseLatest

sanshi

Mr.Wu 发表于 2013-1-24 03:49
为了感谢三石和FineUI团队对本贴的支持和帮助，特为本贴捐助50元表示一下心意！！！

...

多谢。技术支持本来就是我们的份内事，只不过有时慢了点....