GridView和CheckBox控制选择行上下移动

最新推荐文章于 2021-12-05 18:11:15 发布

原创最新推荐文章于 2021-12-05 18:11:15 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #asp #javascript #input #server

ASP.NET 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在ASP.NET中使用GridView控件实现自定义列显示及通过JavaScript进行行上移下移的功能。通过示例代码展示了如何设置CheckBox列、绑定字段列的样式，并提供了实现上移下移功能的JavaScript函数。

<asp:UctlGridViewExtender ID="GridView1" Width="200px"  AutoGenerateScrollBar="true"  VScrollHeight="150px" CssClass="GridView" runat="server"  OnRowDataBound="GridView1_RowDataBound"
AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="选择">
            <ItemTemplate>
                <input id="ItemCheck" type="checkbox" />
            </ItemTemplate>
            <HeaderStyle CssClass="GridViewFixedHeader" Width="30px" />
            <ItemStyle CssClass="GridViewItem" Width="30px" />
            <FooterStyle CssClass="GridViewFixedFooter" Width="30px" />
       </asp:TemplateField>
       <asp:BoundField DataField="ItemGroupName" HeaderText="分组名称" ReadOnly="True">
            <HeaderStyle CssClass="GridViewFixedHeader" Width="170px" />
            <ItemStyle CssClass="GridViewItem" Width="170px" />
            <FooterStyle CssClass="GridViewFixedFooter" Width="170px" />
        </asp:BoundField>
    </Columns>
    <RowStyle CssClass="GridViewRow" />
    <AlternatingRowStyle CssClass="GridViewAlternatingRow" />
    <EmptyDataRowStyle CssClass="GridViewEmptyDataRow" />
    <SelectedRowStyle CssClass="GridViewSelectedRow" />
    <EditRowStyle CssClass="GridViewEditRowStyle" />
</asp:UctlGridViewExtender>

<script language="javascript" type="text/javascript"> 
        var chkList = document.getElementsByName("ItemCheck"); 
 
        function upClick(){ 
            var intRowNum = chkClick();
            if (intRowNum == -1)
            {
                return false;
            }else if(intRowNum == 0)
            {
                alert("已是顶部！");
            }else
            {
                var tb = document.getElementById('<%= GridView1.ClientID%>');
                tb.moveRow(intRowNum,intRowNum-1);
                chkList[intRowNum-1].checked = true;
            }
            return false;
        }
        
        function downClick(){ 
            var intRowNum = chkClick();
            if (intRowNum == -1)
            {
                return false;
            }else if (intRowNum == chkList.length-1)
            {
                alert("已是底部！");
            }else
            {
                var tb = document.getElementById('<%= GridView1.ClientID%>');
                tb.moveRow(intRowNum,intRowNum+1);
                chkList[intRowNum+1].checked = true;    
            }
            return false;
        }
                
        function chkClick(){ 
            var checkedList = "";
            var arrchecked = "";
            var intFlg = 0;
            var intReturn = 0;
            for(var i=0; i<chkList.length; i++){
                if(chkList[i].checked)
                {
                    intFlg++;
                    intReturn = i;
                }
            }
            if (intFlg == 0)
            {
                alert("请选择要移动的行！");
            }else if (intFlg > 1)
            {
                alert("只可以单选！");
            }else{
                        return intReturn;
            }
                return -1;
        }
</script>