Grails：动态填充的表格行不是可选的&可点击 [英] Grails : Dynamically populated table rows are not Selectable & Clickable

问题描述

我有一个Grails（2.4.3）应用程序，我用JSON数据动态填充表行。

现在面临的问题是，

1. 在表格行中，click事件不起作用。
   
2. 当鼠标悬停时，CSS样式在表格行中不起作用发生。
   

基本上，就用户输入而言，表行是死的，但我可以用任何数据更新/填充行我想。

GSP：

 < table id = availUsers> 
< thead> 
< / thead> 
< tbody> 
< / tbody> 
< / table> 
  

JavaScript：

 <点击（功能（）{
 id = document.getElementById（userIdText）。value; 
 if（id）{
d = {
 userID：id 
}; 
 $ .ajax（{
 type：POST，
 url：$ {createLink（action：'searchUsers'，控制器：'CustomerSupport'）}，
 data：d，
 async：false，
 dataType：'JSON'，
缓存：false，
成功：函数（result）{
 if（result =='success'）{
 $（。headerAvailRd）。text（Available Users）; 
 var thead = $（'＃availUsers thead'）; 
 thead.empty（）; 
 var initialTR =< tr>; 
 thead.append（ini​​tialTR）; 
 var user = $（'< （用户）; 
 var age = $（'<< /'User'+'< / th>'）; 
 thead.append ;'+'年龄'+'''）; 
 thead.append（age）; 
 var status = $（'< th>'+'状态'+'< / th>'）; 
 thead.append（status）; 
 var finalTR =< / tr>; 
 thead.append（finalTR）; 
 
 var tbody = $（'＃availUsers tbody'）; 
 tbody.empty（）; 
 $ .each（result，function（index，val）{
 var initialTR1 =< tr class ='availRdr'>; 
 tbody.append（ini​​tialTR1）; 
 var user1 = $（'< td>'+ val.user +'< / td>'）; 
 tbody.append（user1）; 
 var age1 = $（'< td> ;'+ val.age +'< / td>'）; 
 tbody.append（age1）; 
 var status1 = $（'< td>'+val.status+'< ; / td>'）; 
 tbody.append（status1）; 
 var finalTR1 =< / tr>; 
 tbody.append（finalTR1）; 
}） ; 
} else {
 $（。error）。html（result）; 
} 
} 
}）; 
} 
}）; 
  

以上所有代码均可正常使用。

所以我们面临的问题是，表格行不可点击&可选。我希望能够点击表格行，然后获取相应的td值。

例如，当我点击第1行时，我想获得用户值，以便它可以用来从服务器获取更多信息并显示。

可选的方法是，每行应该有一个背景颜色，当鼠标是徘徊在这个背景颜色应该改变。

有人请告诉我如何制作表格行可选&可点击。

预先感谢！

解决方案

复制GSP生成的表的默认功能。您可以加载一张数据表并执行一个检查元素来查看它的构造方式。

对于'可选择'，您可能只需要添加CSS类。

您将需要生成指向特定用户ID的链接。您可以选择硬编码URL，但正确的方法是从您的控制器或使用g：createLink标记。对于g：createLink标记，您可以将字符串输出存储在JS变量中（在第一次加载时，而不是ajax），然后操作链接字符串，用该行的ID替换它的ID部分。

I have a Grails (2.4.3) application in which I dynamically populate table rows with JSON data.

The problem am facing now is,

1. In table rows the click event is not working.
2. CSS styles are not working in table rows when mouse hover happens.

Basically the table rows are dead as far as user input is concerned, but i can update/populate the rows with whatever data i want.

GSP:

<table id="availUsers">
    <thead>
    </thead>
    <tbody>
    </tbody>
 </table> 

JavaScript:

$("#idText").click(function () {
   id = document.getElementById("userIdText").value;
   if (id) {
      d = {
         userID: id
      };
      $.ajax({
         type: "POST",
         url: "${createLink(action:'searchUsers', controller:'CustomerSupport')}",
         data: d,
         async: false,
         dataType: 'JSON',
         cache: false,
         success: function(result) {
            if (result =='success') {
               $(".headerAvailRd").text("Available Users");
               var thead = $('#availUsers thead');
               thead.empty();
               var initialTR = "<tr>";
               thead.append(initialTR);
               var user = $('<th>'+'User'+'</th>');
               thead.append(user);
               var age = $('<th>'+'Age'+'</th>');
               thead.append(age);
               var status = $('<th>'+'Status'+'</th>');
               thead.append(status);
               var finalTR = "</tr>";
               thead.append(finalTR);

               var tbody = $('#availUsers tbody');
               tbody.empty();
               $.each(result, function(index, val) {
                  var initialTR1 = "<tr class='availRdr'>";
                  tbody.append(initialTR1);
                  var user1 = $('<td>'+val.user+'</td>');
                  tbody.append(user1);
                  var age1 = $('<td>'+val.age+'</td>');
                  tbody.append(age1);
                  var status1 = $('<td>'+"val.status"+'</td>');
                  tbody.append(status1);
                  var finalTR1 = "</tr>";
                  tbody.append(finalTR1);
               });
            } else {
               $(".error").html(result);
            }
         }
      });
   }
});

All the code above is working.

So the issue am facing is that, the table rows are not clickable & selectable. I want to be able to click on table rows and then get the value of corresponding td.

For e.g., when i click on row 1, i want to get the "user" value so that it could be used to fetch more info from the server and displayed.

Selectable means, there should be a background color for each row and when mouse is hovered above that this background color should change.

Someone please tell me how to make the table rows Selectable & Clickable.

Thanks in advance!

解决方案

I suppose you want to replicate the default functionality of GSP generated table. You could load a table of data and perform an inspect element to look at how it is constructed.

For 'Selectable', you will probably only need to add the CSS classes onto .

For clicking, you will need to generate a link to the specific user ID. You could choose to hardcode the URL but the right way will be to either from your controller or with a g:createLink tag. For g:createLink tag, you can store the string output from in a JS variable (on first load, not ajax) and then manipulate the link string, replacing the ID part of it with the row's ID.

这篇关于Grails：动态填充的表格行不是可选的&可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！