2010-08-23 33 views
5

Khi người dùng nhấp vào thuộc tính hộp bổ sung hàng (tức là hàng có thả xuống 2 và hộp văn bản cần phải được thêm) hàng với trên cần phải được tạo động bằng cách sử dụng jquery (để không có bài đăng nào trở lại). Người dùng sẽ được phép thêm bao nhiêu attirbutes như anh ta muốn và khi họ nhấp vào hộp kiểm mà hàng cần phải được xóa. Làm thế nào điều này có thể đạt được bằng jquery.asp.net jquery thêm hàng (dòng nhân bản) với hộp văn bản và thả xuống động

<asp:Panel ID="pnl_BoxAttr" runat="server"> 
      <table> 
      <tr> 
       <th> 
         Name 
        </th> 
        <th> 
         Comparision 
        </th> 
        <th> 
         Value 
        </th> 
        <th> 
         Delete 
        </th> 
       </tr> 
       <tr> 
        <td> 
         <asp:DropDownList ID="ddl_BoxName" runat="server"> 
           <asp:ListItem Value="attr1" Selected="True"></asp:ListItem> 
           <asp:ListItem Value="attr2"></asp:ListItem> 
           <asp:ListItem Value="attr3"></asp:ListItem> 
         </asp:DropDownList> 
        </td> 
        <td> 
         <asp:DropDownList ID="ddl_BoxComparision" runat="server"> 
          <asp:ListItem Value="=" Selected="true"></asp:ListItem> 
          <asp:ListItem Value=">"></asp:ListItem> 
          <asp:ListItem Value="<"></asp:ListItem> 
          <asp:ListItem Value="Like"></asp:ListItem> 
          <asp:ListItem Value="!="></asp:ListItem> 
          </asp:DropDownList> 
        </td> 
        <td> 
           <asp:TextBox ID="btn_boxval" runat="server" ></asp:TextBox> 

        </td> 
        <td> 
         <asp:CheckBox ID="chk_DeleteBoxRow" runat="server" /> 
        </td> 
      </tr> 
      <tr> 
       <td colspan="3"> 
        <asp:Button ID="btn_AddAttr" Text="Add Box Attribute" runat="server"/> 
       </td> 
      </tr> 
     </table> 
     </asp:Panel> 

Trả lời

0

Khi tôi hiểu điều đó, bạn cần người dùng chèn hàng mới (giống như hàng có chứa lựa chọn) bằng cách nhấp vào nút?

Trước tiên, bạn cần cung cấp cho tr bằng nút thêm một id, giả sử 'addTr'.

Đối với chèn, bạn có thể làm một cái gì đó như thế này:

$('#btn_AddAttr').bind(
    'click', 
    function() { 
     $('#addTr').before('<tr>' + 
           /* entre tr content here */ 
          '</tr>' 
         ); 
    } 
); 

Chỉ cần chắc chắn rằng tất cả các Dropdowns và textbox có ID khác nhau.

Đối với loại bỏ các hàng từ bảng, bạn nên thêm một lớp mà có thể giúp bạn xác định tất cả các hộp kiểm xóa, chúng ta hãy nói 'delChk':

$('.delChk').bind(
    'click', 
    function() { 
     $(this).closest('<tr>').remove(); 
    } 
); 
8

Để bắt đầu, đây là một bản demo làm việc, mà bạn có thể tham khảo trong suốt câu trả lời của tôi: http://jsfiddle.net/EuyB8/.

Rõ ràng bản trình diễn ở dạng HTML thuần túy thay vì ASP.NET, nhưng tôi sẽ cố gắng giải quyết sự khác biệt.

Để bắt đầu, vì bạn sẽ muốn tạo một số điều khiển mà bạn sẽ nhân bản bằng cách sử dụng điều khiển .NET, cách tiếp cận điển hình của tôi là tạo mẫu ẩn, sau đó có thể được sử dụng để tạo bản sao mới. Như vậy, tôi sẽ có một hàng như sau:

<tr id="TemplateRow"> 
    <td> 
     <asp:DropDownList ID="ddl_BoxName" runat="server"> 
      <asp:ListItem Value="attr1" Selected="True"></asp:ListItem> 
      <asp:ListItem Value="attr2"></asp:ListItem> 
      <asp:ListItem Value="attr3"></asp:ListItem> 
     </asp:DropDownList> 
    </td> 
    <td> 
     <asp:DropDownList ID="ddl_BoxComparision" runat="server"> 
      <asp:ListItem Value="=" Selected="true"></asp:ListItem> 
      <asp:ListItem Value=">"></asp:ListItem> 
      <asp:ListItem Value="<"></asp:ListItem> 
      <asp:ListItem Value="Like"></asp:ListItem> 
      <asp:ListItem Value="!="></asp:ListItem> 
     </asp:DropDownList> 
    </td> 
    <td> 
     <asp:TextBox ID="btn_boxval" runat="server" ></asp:TextBox> 

    </td> 
    <td> 
     <asp:CheckBox ID="chk_DeleteBoxRow" runat="server" /> 
    </td> 
</tr> 

sau đó tôi thêm một quy tắc CSS như sau:

#TemplateRow { display:none; } 

Bây giờ chúng ta có một hàng mà chúng ta có thể sử dụng làm mẫu để thêm mới các hàng và đánh dấu thực tế cho mẫu vẫn có thể được tạo bởi .NET. Điều quan trọng cần lưu ý là khi sử dụng cách tiếp cận này với một bảng, hàng mẫu cần nằm bên trong bảng mà bạn sẽ gắn thêm các hàng, để đảm bảo rằng các ô có chiều rộng thích hợp.

Bit cuối cùng của đánh dấu chúng tôi sẽ cần làm là cung cấp cho bảng một ID để chúng tôi có thể thao tác các hàng trong tập lệnh của mình. Tôi đã chọn "BoxTable".

Bây giờ, hãy xây dựng kịch bản của chúng tôi. Vì bạn đang sử dụng .NET, nên nhớ rằng đối với bất kỳ thẻ nào có thuộc tính runat="server", thuộc tính ID được tạo không giống với thuộc tính bạn gán trong trường ID của kiểm soát. Cách giải quyết dễ dàng cho việc đó là thực hiện một số việc như sau:

var myClientID = '<%= myServerID.ClientID() %>'; 

Máy chủ sau đó xuất ID khách hàng thành chuỗi để sử dụng dễ dàng trong tập lệnh của bạn.

Với ý nghĩ đó, đây là kịch bản của chúng tôi:

var btn_AddAttr = '<%= btn_AddAttr.ClientID() %>'; 

$(function() { 
    //attach the a function to the click event of the "Add Box Attribute button that will add a new row 
    $('#' + btn_AddAttr).click(function() { 
     //clone the template row, and all events attached to the row and everything in it 
     var $newRow = $('#TemplateRow').clone(true); 

     //strip the IDs from everything to avoid DOM issues 
     $newRow.find('*').andSelf().removeAttr('id'); 

     //add the cloned row to the table immediately before the last row 
     $('#BoxTable tr:last').before($newRow); 

     //to prevent the default behavior of submitting the form 
     return false; 
    }); 

    //attach a remove row function to all current and future instances of the "remove row" check box 
    $('#DeleteBoxRow').click(function() { 
     //find the closest parent row and remove it 
     $(this).closest('tr').remove(); 
    }); 

    //finally, add an initial row by simulating the "Add Box Attribute" click 
    $('#' + btn_AddAttr).click(); 
}); 

Tôi nghĩ những ý kiến ​​khá kỹ lưỡng, nhưng một lời giải thích ngắn gọn về một vài điểm được bảo hành:

Đầu tiên, khi chúng tôi sao chép mẫu hàng, chúng tôi đang đi qua một boolean để chức năng clone. Điều này nói rằng ngoài các phần tử DOM chúng ta đang nhân bản, chúng ta cũng nên sao chép các trình xử lý sự kiện gắn liền với các phần tử đó và đính kèm chúng vào các bản sao mới. Điều này rất quan trọng để hộp kiểm "Xóa hàng" hoạt động.

Thứ hai, khi chúng tôi sao chép hàng mẫu, chúng tôi cũng nhân bản tất cả các thuộc tính của tất cả các phần tử, bao gồm cả các ID. Chúng tôi không muốn điều này bởi vì nó vi phạm tuân thủ XHTML và các vấn đề về nguyên nhân của tôi. Vì vậy, chúng tôi loại bỏ tất cả các yếu tố nhân bản của ID của họ.

Cuối cùng, bởi vì bạn đang sử dụng nút gửi, điều quan trọng là phải nhớ trả về sai trong sự kiện nhấp của nút, để tránh việc gửi biểu mẫu và gây ra đăng lại.

Hy vọng điều này sẽ trả lời câu hỏi của bạn. Một điều cuối cùng cần ghi nhớ là vì bạn đang tạo tất cả các hàng này với jQuery, máy chủ sẽ không có các đối tượng sẵn sàng để nhận các giá trị của các đầu vào. Nếu bạn cần máy chủ có quyền truy cập vào thông tin đó, bạn sẽ phải tìm ra phương pháp gửi thông tin đó.

Các vấn đề liên quan