如何使CheckBoxList在每列中具有不同数量的项目? [英] How to make a CheckBoxList with different number of items in each column?

查看:100
本文介绍了如何使CheckBoxList在每列中具有不同数量的项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的页面中有一个CheckBoxList,其中包含28个ListItems.当我放置RepeatColumns ="2"时,我的CheckBoxList分为两列,每列14个项目.我想做的是使第一列包含17个项目,而第二列包含剩余的11个项目.如何修改我的代码以在CheckBoxList中显示不均匀的列?

I have a CheckBoxList in my page with 28 ListItems inside of it. When I put the RepeatColumns="2", my CheckBoxList is split in two columns of 14 items. What I want to do is make the first column with 17 items, while the second has the remaining 11 items. How can I modify my code to show uneven columns in a CheckBoxList?

    <asp:CheckBoxList ID="rblPraticasTemasSaude" runat="server" RepeatDirection="Vertical" RepeatColumns="2">
        <asp:ListItem Text="01" Value="01"></asp:ListItem>
        <asp:ListItem Text="02" Value="02"></asp:ListItem>
        <asp:ListItem Text="03" Value="03"></asp:ListItem>
<%-- more ListItems --%>
        <asp:ListItem Text="27" Value="27"></asp:ListItem>
        <asp:ListItem Text="28" Value="28"></asp:ListItem>
    </asp:CheckBoxList>

推荐答案

将您的 RepeatColumns 属性设置为17,然后使用此功能

Set your RepeatColumns attribute to 17, and then use this function

function rotate() {
            $("#<%= rblPraticasTemasSaude.ClientID %>").each(function() {
                var $this = $(this);
                var newrows = [];
                $this.find("tr").each(function() {
                    var i = 0;
                    $(this).find("td").each(function() {
                        i++;
                        if (newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                        newrows[i].append($(this));
                    });
                });
                $this.find("tr").remove();
                $.each(newrows, function() {
                    $this.append(this);
                });
            });
            return false;
        }

        rotate();

您需要在 rotate 函数

这篇关于如何使CheckBoxList在每列中具有不同数量的项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆