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>

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的表格的列数以及第几个列是文本框有关？

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

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

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

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

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

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

请问这是什么原因呢？

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]作为当前列序号。

Mr.Wu · 发表于 2013-1-24 03:49:54

sanshi 发表于 2013-1-23 02:14
是的哦，原来的确没考虑到这一点

为了感谢三石和FineUI团队对本贴的支持和帮助，特为本贴捐助50元表示一下心意！！！

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源