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

Mr.Wu · 发表于 2013-1-18 01:10:35

本帖最后由 Mr.Wu 于 2013-1-18 01:10 编辑

      昨晚找了一晚论坛，以及在线示例，都没有看到相似的问题，现发贴出来，希望得到大家的帮助，谢谢。
      问题如下：“分组2”模板列的Text值已经通过后台数据库绑定显示出来，现在手工在“分组1”文本框中输入值，如果该值和分组2中的值一致，就在“比较结果”模板列中显示“两组录入一致”，如果值不一致，就显示“两组录入不一致”，请问该如何解决？

   期望的效果图如下：

源代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="grid_edit.aspx.cs" Inherits="FineUI.Examples.grid.grid_edit" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<x:PageManager ID="PageManager1" runat="server" />
<x:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格" Width="800px" runat="server"
      DataKeyNames="Id,Name">
      <Columns>
         <x:TemplateField Width="60px">
            <ItemTemplate>
                  <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
            </ItemTemplate>
         </x:TemplateField>
         <x:BoundField Width="100px" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
         <x:TemplateField Width="60px" HeaderText="性别">
            <ItemTemplate>
                  <asp:Label ID="Label3" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
            </ItemTemplate>
         </x:TemplateField>
         <x:BoundField Width="60px" DataField="EntranceYear" HeaderText="入学年份" />
         <x:CheckBoxField Width="60px" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" />
         <x:HyperLinkField HeaderText="所学专业" DataToolTipField="Major" DataTextField="Major"
            DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
            DataNavigateUrlFieldsEncode="true" Target="_blank" ExpandUnusedSpace="True" />
         <x:TemplateField HeaderText="分组1" Width="100px">
            <ItemTemplate>
                  <asp:TextBox ID="tbxGroupName" runat="server" Width="80px" TabIndex='<%# Container.DataItemIndex + 10 %>'
                     ></asp:TextBox>
            </ItemTemplate>
         </x:TemplateField>
         <x:TemplateField HeaderText="分组2" Width="100px">
            <ItemTemplate>
                  <asp:TextBox ID="tbxGroupName2" runat="server" Width="80px" Text='<%# Eval("Group") %>'></asp:TextBox>
            </ItemTemplate>
         </x:TemplateField>
         <x:TemplateField HeaderText="比较结果" Width="100px">
            <ItemTemplate>
                  <asp:Label runat="server" ID="lblCompare"></asp:Label>
            </ItemTemplate>
         </x:TemplateField>
      </Columns>
</x:Grid>
<br />
请注意如何实现：
<ul>
      <li>使用Tab键遍历所有的文本输入框（通过TextBox的TabIndex属性）</li>
      <li>使用Enter键遍历所有的文本输入框（JavaScript函数registerEnterEvent）</li>
      <li>点击输入框即可选中全部文本（JavaScript函数registerSelectEvent）</li>
</ul>
<br />
<br />
<br />
<x:Button ID="Button2" runat="server" Text="重新绑定表格">
</x:Button>
<br />
<x:Button runat="server" ID="Button1" Text="获取用户输入的分组值">
</x:Button>
<br />
<x:Label ID="labResult" EncodeText="false" runat="server">
</x:Label>
<br />
</form>
<script type="text/javascript">
      var gridClientID = '<%= Grid1.ClientID %>';
      function registerSelectEvent() {
         var grid = X(gridClientID);
         grid.el.select('.x-grid-tpl input').on('click', function (evt, el) {
            el.select();
         });
      }
      function registerEnterEvent() {
         var grid = X(gridClientID);
         grid.el.select('.x-grid-tpl input').on("keydown", function (evt, el) {
            if (evt.getKey() == evt.ENTER) {
                  var nextRow = Ext.get(el).parent('.x-grid3-row').next();
                  if (nextRow) {
                     nextRow.query('.x-grid-tpl input')[0].select();
                  }
            }
         });
      }
      function onReady() {
         var grid = X(gridClientID);
         grid.on('viewready', function () {
            registerSelectEvent();
            registerEnterEvent();
         });
      }
      function onAjaxReady() {
         registerSelectEvent();
         registerEnterEvent();
      }
</script>
</body>
</html>

☆幻~精灵 · 发表于 2013-1-18 08:14:23

sanshi · 发表于 2013-1-21 21:51:40

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

关键代码：

function registerCompareEvent() {
var grid = X(gridClientID);
grid.el.select('.x-grid-tpl input').on("keydown", function (evt, el) {
window.setTimeout(function () {
var rowNum = 0, idPattern = /^Grid1_c\dr(\d)_.+$/.exec(el.id);
if (idPattern && idPattern.length == 2) {
rowNum = rowNum[1];
}
var row = Ext.get(el).parent('.x-grid3-row');
var num1 = row.query('.x-grid3-col-ct6 input')[0].value;
var num2 = row.query('.x-grid3-col-ct7 input')[0].value;
var resultNode = row.query('.x-grid3-col-ct8 span.result')[0];
if (num1 == num2) {
resultNode.className = 'success';
resultNode.innerHTML = '两组录入一致';
} else {
resultNode.className = 'error';
resultNode.innerHTML = '两组录入不一致！';
}
}, 500);
});
}

复制代码

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

Mr.Wu · 发表于 2013-1-22 00:21:43

本帖最后由 Mr.Wu 于 2013-1-22 00:42 编辑

感谢三石兄在百忙之中，给予解答！FineUI之所以如此受人喜爱，我觉得最重要的还是有三石这样的热心人……{:soso_e179:}永远支持FineUI ！！！

Mr.Wu · 发表于 2013-1-22 01:19:44

三石兄能解释一下idPattern = /^Grid1_c(\d)r\d_.+$/.exec(el.id)这句是什么意思么？
为什么我把回车和比较文本这两个脚本放到自己的页面中，发现回车换行不起作用了呢？
比较结果也没有显示，难道跟Grid的表格的列数以及第几个列是文本框有关？

sanshi · 发表于 2013-1-22 08:15:39

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

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

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

Mr.Wu · 发表于 2013-1-22 13:23:02

本帖最后由 Mr.Wu 于 2013-1-22 13:24 编辑

刚才把codeplex上的示例代码下载运行了一下，发现了一个问题：第一次输入回车时，是可以比较两者不是相同；
可是如果发现两者不同时，回头重新点击文本框输入，再回车，发现并没有执行比较（文本还是上一次比较的结果）。

疑问：能否在每次输入文本值，回车的时候，同时比较两者是否相同？（现在是第一次输入，回车才比较，第二次再输入就不比较了。）

图示1：第一次输入分组二值时，回车，能比较出结果：

图示2：第二次输入分组二值时，回车，并没有重新比较，还是上一次比较的结果：

请问这是什么原因呢？

sanshi · 发表于 2013-1-22 12:26:25

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

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

更新后的关键代码：

function registerCompareEvent() {
var grid = X(gridClientID);
grid.el.select('.x-grid-tpl input').on("keydown", function (evt, el) {
window.setTimeout(function () {
var row = Ext.get(el).parent('.x-grid3-row');
var num1 = row.query('.x-grid3-col-ct6 input')[0].value;
var num2 = row.query('.x-grid3-col-ct7 input')[0].value;
var resultNode = Ext.get(row.query('.x-grid3-col-ct8 span.result'));
resultNode.removeClass(['success', 'error']);
if (num1 == num2) {
resultNode.addClass('success');
resultNode.update('两组录入一致');
} else {
resultNode.addClass('error');
resultNode.update('两组录入不一致！');
}
}, 500);
});
}

复制代码

已经Checkin代码到服务器。

Mr.Wu · 发表于 2013-1-22 18:27:26

本帖最后由 Mr.Wu 于 2013-1-22 18:35 编辑

sanshi 发表于 2013-1-22 12:26
Sorry，原来的代码有点问题。第一个更新className时就把原来的CSS类名result给清掉了，所以下次就找不到r ...

首先衷心感谢三石兄和FineUI团队！这帖子希望能实时比较Grid表格内模板列两文本框的值是否一致，现已经达到预期目的，真的非常感谢！
------------------------------------------------------------------------------------------------------------------------------

经本人一个晚上的测试，发现demo只适用于Grid表格中记录数不超过11条时，否则回车时不会跳转到下一文本框内，这主要是与function registerEnterEvent()函数内的条件判断有关：
if (idPattern && idPattern.length == 2)
{
colNum = idPattern[1];
}
上述if语句只是在 idPattern.length为2（即当前页记录显示不超过11条时），才将列序号colNum赋值为idPattern[1]。
经测试，如果页面显示的记录数大于11时，要做如下修改：
1、修改正则表达式为：idPattern = /^Grid1_c(\d)r([\d]{1,2}|[100]|[0])_.+$/.exec(el.id)，其中r([\d]{1,2}|[100]|[0])表示r0至r100，这样就扩大了行范围，只要当前页记录数不超过100条，都可以通过回车跳转。
2、修改上述正则表达式后，idPattern.length长度为3了，alert(idPattern)即可看到下图所示：

这时将条件判断修改为如下即可：
if (idPattern && idPattern.length > 1)
{
colNum = idPattern[1];
}

---------------------------------------------------------------------------------------------------------------------------------------------
现总结几个关键点：
1、正则表达式idPattern = /^Grid1_c(\d)r\d_.+$/.exec(el.id)，用到了当前文本框的id名称，如果一开始无法知道时，可以先alert(el.id)来查看一下，这样就大概能理解这个正则表达式的组成部分意义了：

要注意的是，如果页面布局中，外层是Panel时，先alert(el.id)来查看一下文本框的id：

这时正则表达式要作相应的修改为：idPattern = /^Panel1_Grid1_c(\d)r\d_.+$/.exec(el.id)

2、正则表达式idPattern = /^Grid1_c(\d)r\d_.+$/.exec(el.id)，这里的r\d表示的是r0至r9范围（共10个值），在js内通过alert(idPattern)可以得到如下提示：

说明idPattern是一个数组，idPattern[0]表示文本框的id值，idPattern[1]表示当前位于第几列，
if (idPattern && idPattern.length ==2) 表示当idPattern不为null且数组长度为2时，取数组第二个值idPattern[1]作为当前列序号。

yygy · 发表于 2013-1-23 01:59:42

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

在哪下载？

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源