Question

我有一个带有45个复选框的嵌套gridview。我希望用户能够单击一个复选框并将该值保存在单独的gridview中，直到他们希望对其进行操作（类似于购物车）。

复选框嵌套在转发器后面的第二级网格视图中。

     <repeater>
       <gridview>
          <gridview>
              checkbox
          <gridview/>
       <girdview />
     <repeater />

我有一段时间试图获得深刻的复选框的价值，并希望学习jQuery并认为这是一个美好的时光。

我在想的是用户会点击复选框，jQuery会获得控件的ID（和值），然后我可以将其传递给ajax回发触发器并填充“购物车”gridview。我需要通过ajax的原因是我需要根据用户选中的复选框从数据库中获取更多值。

我想我可以从那里拿走它。我现在最大的问题是弄清楚如何从复选框中获取id和值。

Answer 1

您应该能够从点击的复选框中获取值（或某些数据）

$（'＃gridview-wrapper checkbox'）。live（“click”，function（e）{ //使用点击的值做一些事情。

}）;

您可能希望使用这些信息填充页面上的其他内容，或者您可能希望将值存储在数据数组中。

数据数组基本上是一种在jquery中存储键值对数据的方法，可供用户在页面上执行其他操作时使用。

在此处阅读更多内容 - ＆gt; http://api.jquery.com/data/

Answer 2

从未使用过Repeater，但是使用一些简单的jQuery和html我认为你可以在没有gridview控件的膨胀的情况下获得相同的效果：

另存为html文件示例

<html>
<head>
    <title>Test</title>
</head>
<body>
    <table id="tblItems">
        <tbody>
            <tr>
                <td>+</td><td>Category 1</td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 1</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 2</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 3</td><td>Price</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>+</td><td>Category 2</td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 4</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 5</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 6</td><td>Price</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <table id="tblResults">
        <thead>
            <tr style="font-weight:bold">
                <td >Item Name</td><td>Price</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" ></script>
<script>
    $(document).ready(function() {
        $('#tblItems > tbody > tr').each(function(i){
            $row = $(this);
            if(i % 2 == 0){//even rows are expanders
                $row.children('td:eq(0)').click(function(){
                    var $tmp = $(this);
                    var next = i + 1;
                    $row.parent().children("tr:eq(" + next + ")").toggle(); //toggle the next row
                    if($tmp.html() == '+'){ 
                        $tmp.html('-');
                    }else{ 
                        $tmp.html('+');
                    }
                });
            }else{//odd rows are collapsed by default
                $row.toggle();
            }
        });

        $('input[type="checkbox"]').change(function(){
            var $chkBox = $(this),
                data = $chkBox.data('checkboxData');

            if(!data){ //Add some data to remember to this checkbox
                $chkBox.data('checkboxData', {
                    id: Example.GetUniqueId() // create a unique ID for this checkbox
                });
                data = $chkBox.data('checkboxData');
            }
            if($chkBox.is(':checked')){ //checkbox is checked
                $("#tblResults tbody").append($chkBox.closest('tr').clone().attr('id', data.id)); //copy the checked row and add ID
                $("#tblResults input").parent().remove(); //remove the checkbox from the copied row
            }else{
                $("#" + data.id).remove(); //remove copied row when not checked 
            }
        });
    });

    Example = {};

    Example.GetUniqueId = function ()
    {
         var dateObject = new Date();
         var uniqueId =
              dateObject.getFullYear() + '' +
              dateObject.getMonth() + '' +
              dateObject.getDate() + '' +
              dateObject.getTime();

         return uniqueId;
    };
</script>

从嵌套gridview获取复选框值

2 个答案: