GridView多级复选框级联选中

最新推荐文章于 2023-02-18 23:38:50 发布
最新推荐文章于 2023-02-18 23:38:50 发布
阅读量1.9k 收藏
点赞数 2
文章标签： js javascript jquery Gridview 复选框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangxiang123123/article/details/8641951
版权

在项目开发中，一般情况下都使用TreeView控件，实现级联选中效果更简单方便，但是为了显示内容更加直观而尝试了使用gridview来实现。


1、首先实现合并相同行，方法代码如下。

///<summary>

    ///合并行

    ///</summary>

    ///<paramname="gvw">需要合并的GridView</param>

    ///<paramname="sCol">要合并开始列</param>

    ///<paramname="eCol">要合并的结束列</param>

    public static voidMergeRows(GridView gvw,int sCol,int eCol)//gvw需要合并的GridView，sCol要合并开始列（从0开始），eCol要合并的结束列 

    {

        //如果第3列相同，则第1、2、3列合并单元格，如果第1列，则第0、1合并单元格

        for (int rowIndex = gvw.Rows.Count - 2; rowIndex >= 0;rowIndex--)

        {

            GridViewRowrow = gvw.Rows[rowIndex];

            GridViewRowpreviousRow = gvw.Rows[rowIndex + 1];

            for(int i = sCol; i < eCol + 1; i++)

            {

                if(row.Cells[i].Text !=""&& row.Cells[i].Text !=" ")

                {

                    if(row.Cells[i].Text == previousRow.Cells[i].Text)

                    {

                        row.Cells[i].RowSpan =previousRow.Cells[i].RowSpan < 1 ? 2 : previousRow.Cells[i].RowSpan + 1;

                       previousRow.Cells[i].Visible = false;

                        row.Cells[i -1].RowSpan = previousRow.Cells[i - 1].RowSpan < 1 ? 2 : previousRow.Cells[i- 1].RowSpan + 1;

                        previousRow.Cells[i -1].Visible = false;

                        for (int j = row.RowIndex +row.Cells[i].RowSpan - 1; j >= row.RowIndex; j--)

                        {

                            CheckBox cbx1 =newCheckBox();

                            CheckBox cbx2 =newCheckBox();

                            CheckBox cbx3 =newCheckBox();

                            if (i == 1)

                            {

                                cbx2 =gvw.Rows[j].Cells[i + 1].FindControl("cb_Check2")asCheckBox;

                                cbx1 =row.Cells[i - 1].FindControl("cb_Check1")asCheckBox;

                               cbx2.Attributes.Remove("parentId");

                               cbx2.Attributes.Add("parentId",cbx1.ClientID);

                            }

                            else

                            {

                                cbx3 =gvw.Rows[j].Cells[i + 1].FindControl("cb_Check3")asCheckBox;

                                cbx2 =row.Cells[i - 1].FindControl("cb_Check2")asCheckBox;

                                cbx3.ToolTip =cbx2.ClientID;

                               cbx3.Attributes.Remove("parentId");

                               cbx3.Attributes.Add("parentId",cbx2.ClientID);

                            }

 

                        }

                    }

                }

            }

        }

}

2、为gridview中的复选框添加js事件，并初始化parentId属性（我自己命名的属性，存储父级复选框的id值，而这样赋值的结果是给复选框加了一个span标签：

<spantitle="GridView1_ctl02_cb_Check2"parentId="GridView1_ctl02_cb_Check2"><inputid="GridView1_ctl02_cb_Check3"type="checkbox"name="GridView1$ctl02$cb_Check3"onclick="selectIndex('GridView1','GridView1_ctl02_cb_Check3');"/></span>）

代码如下：

  protected void GridView1_RowDataBound(objectsender, GridViewRowEventArgs e)

    {

        //禁用复选框（已经下载或已经上传的项目不能再下载）

        if(e.Row.RowType == DataControlRowType.DataRow)

        {

            CheckBoxcbx1 = e.Row.FindControl("cb_Check1")asCheckBox;

            CheckBoxcbx2 = e.Row.FindControl("cb_Check2")asCheckBox;

            CheckBoxcbx3 = e.Row.FindControl("cb_Check3")asCheckBox;

            stringstate = e.Row.Cells[7].Text.Trim();

            if(state == "已下载"|| state == "已上传")

                cbx3.Enabled = false;

            else

                cbx3.Enabled = true;

            //根据子节点的enable属性设置父节点的enable

            ScriptManager.RegisterStartupScript(Page,GetType(),"","SetDisabled('" + GridView1.ClientID +"','3');",true);

            //给复选框添加js事件

            cbx1.Attributes.Add("onclick","selectIndex('"+ GridView1.ClientID +"','" +cbx1.ClientID +"')");

            cbx2.Attributes.Add("onclick","selectIndex('"+ GridView1.ClientID +"','" +cbx2.ClientID +"')");

            cbx3.Attributes.Add("onclick","selectIndex('"+ GridView1.ClientID +"','" +cbx3.ClientID +"')");

            cbx2.Attributes.Add("parentId", cbx1.ClientID);

            cbx3.Attributes.Add("parentId", cbx2.ClientID); ;

        }

   }

3、 Js方法1：unChecked(GVID,CBXID)，参数分别代表：gridview的id及复选框id。反选该复选框时，则其父级复选框也应反选。代码如下：

function unChecked(GVID, CBXID) {

            /*

            如果是反选，则将父项也反选；

            */

            checkbox2 =document.getElementById(CBXID);

            if(!checkbox2.checked) {

                try{

                    varparent = document.getElementById(checkbox2.parentNode.attributes("parentId").value);

                    parent.checked = false;

                    unChecked(GVID,checkbox2.parentNode.attributes("parentId").value);

                }

                catch(Error) { }

            }

        }

4、 Js方法2：DoChecked(GVID,CBXID)，参数分别代表：gridview的id及复选框id。选中该复选框时，如果该级复选框全部选中，则其父级复选框也应选中。代码如下：

functionDoChecked(GVID, CBXID) {

            /*  如果是选中，则判断父项的所有enable=true的子项是否全部选中，如果是，则选中父项  */

            checkbox2 =document.getElementById(CBXID);

            if(checkbox2.checked) {

                chsParent =document.getElementById(GVID).getElementsByTagName("INPUT");

                j = 0;

                varflag = true;

                for(j = 0; j < chsParent.length; j++) {

                    if(!chsParent[j].disabled) {

                       try {

                            var parentId = chsParent[j].parentNode.attributes("parentId").value;

                            if (parentId == checkbox2.parentNode.attributes("parentId").value &&!chsParent[j].checked) {

                                flag = false;

                            }

                        } catch (Error) { }

                    }

                }

                if(flag) {

                    try{

                        var parent = document.getElementById(checkbox2.parentNode.attributes("parentId").value);

                        parent.checked = true;

                        DoChecked(GVID,checkbox2.parentNode.attributes("parentId").value);

                    }

                    catch(Error) { }

                }

            }

       }

5、 Js事件1：selectIndex(GVID,CBXID, TYPE)，参数分别代表：gridview的id、复选框id及类型。通过递归实现选中该复选框，则其所有子级复选框选中，反选该复选框，则其所有子级复选框反选；同时对触发事件的复选框，执行js方法1及方法2。使用type参数就是为了区别传入的CBXID参数是触发事件的复选框，还是递归时的子级复选框，当type== undefined时，为触发事件的复选框。具体代码如下：

functionselectIndex(GVID, CBXID, TYPE) {

            varcheckbox1 = document.getElementById(CBXID);

            if(document.getElementById(GVID) !=null) {

                chs =document.getElementById(GVID).getElementsByTagName("INPUT");

                n = 0;

                for(i = 0; i < chs.length; i++) {

                    if(!chs[i].disabled) {

                        /*

                        把子项的选中状态与本项状态一致

                        */

                        try {

                            var parentId = chs[i].parentNode.attributes("parentId").value;

                            if (parentId == CBXID) {

                                chs[i].checked= document.getElementById(CBXID).checked;//递归后checkbox1发生变化，所以不能直接用checkbox1

                                var m = i;

                                TYPE = 1;

                               selectIndex(GVID, chs[i].attributes("id").value,1);

                                TYPE =undefined;

                                i = m;

                            }

                        } catch (Error) { }

                    }

                }

            }

            if(TYPE == undefined) {

                unChecked(GVID, CBXID);

                DoChecked(GVID, CBXID);

            }

       }

6、 Js方法3：SetDisabled(GVID,index)参数分别代表：gridview的id，gridview中复选框的最子级别的索引，级别从1开始，本文的例子最子级别的索引为3。(如果实现此方法，则复选框的命名规则必须为：" cb_Check"+ index)此方法是为了初始化gridview中的复选框的disabled属性值：如果子节点复选框disabled全为true，则父节点也不可用，否则父节点可用。在绑定完gridview时，调用此方法。具体代码如下：

functionSetDisabled(GVID, index) {

            /*

            index为checkbox最子级别，并且最父级从1开始

            如果子节点复选框disabled全为true，则父节点也不可用，否则父节点可用

            */

            varstrCBXID = "Check" + index; //复选框的id后缀名

            vararr = new Array();

            varparentId;

            chsChild =document.getElementById(GVID).getElementsByTagName("INPUT");

            j = 0;

            //只循环最后一列checkbox，然后再通过递归

            for(j = 0; j < chsChild.length; j++) {

                if(chsChild[j].disabled && chsChild[j].attributes("id").value.indexOf(strCBXID)) {

                    try{

                        parentId =chsChild[j].parentNode.attributes("parentId").value;

                        var isHave =false;

                        for (var m = 0; m < arr.length;m++) {

                            if (parentId == arr[m]) {

                                isHave = true;

                                break;

                           }

                        }

                        if (isHave)

                            continue;

                        else {

                            var flag =true;

                            chsBrother =document.getElementById(GVID).getElementsByTagName("INPUT");

                            for (u = 0; u < chsBrother.length; u++) {

                                try {

                                    if (parentId == chsBrother[u].parentNode.attributes("parentId").value &&!chsBrother[u].disabled) {

                                        flag = false;

                                    }

                                } catch (Error) { }

                            }

                            if (flag) {

                                varobjParent = document.getElementById(parentId);

                               objParent.disabled = true;

                            }

                            if (parentId != undefined && parentId !='')

                                arr.push(parentId);

                        }

                    } catch(Error) {

 

                    }

                }

            }

            if(index > 1)

                SetDisabled(GVID, index - 1);

       }

结语：在开发过程中，经常会遇到在网上找不到解决方案的新问题，那就需要一种勇于尝试和挑战的心态。在尝试的过程中，也要考虑代码复用性，以便可以解决这一类问题。当然我写的肯定不是最好最简洁的代码，也希望各位领导及同事能给予更多的建议和意见。


xiangxiang123123
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
listview和LitePal2
m0_64867588的博客
12-05 143
Student stu = LitePal.find(Student.class, model.getId()); //类名，查找id 修改： //先查询到数据,然后更改数据, Student stu = LitePal.find(Student.class, 1); stu.setUsername(“admin”); stu.save(); //更新指定id的数据 Student stu = new Student(); stu.setUsername(“admin”); stu.updat
C#中给DataGridView中的两列comboboxcolumn绑定级联事件
anranzizaiee的博客
09-05 1275
有时会遇到datagridview中两列均为下拉框，且包含级联关系，第二列单元格中的选项需根据第一列内容的选择而不同。之前看了多年前的论坛中（https://bbs.csdn.net/topics/280050019）写了如下的方法，我根据我的需求写了如下逻辑的代码。 此时，先要给datagridview绑定editingcontrolingshowing事件。 private void d...
GridView自带行选中复选框
FFFAN_KIKI的博客
04-29 511
后台设置选中状态方法用this.gridView.SelectRow(index); 就这属性找了一天了。。。
GridView中的CheckBox单击事件(oncheckedchanged)
iflash50的专栏
08-28 4136
在GridView中加入 CheckBox控件，想通过单击选中出现如下图所示效果： 具体做法是： 前台GV部份省掉。只加关键的CheckBox部份。 此代码需要注意的是:AutoPostBack="true" 此句的效果是选中后才会执行后台的代码。 后台代码：C#//单独选中 protected void ItemCheckBox_Ch
DEV Gridcontrol 多选功能实现
wushijun5200的博客
02-18 2274
fieldname需要绑定，同时gridcontrol绑定的数据源dataset或者datatable中要有el dname这一列!否则，也会出现，无法多选的现象。DEV Gridcontrol 多选功能实现。//在表中增加一个列 add（列名，列类型）注意：新增列的类型为bool类型。editable设置为true。//给每一行的该列赋值。
GridView全选多选
love_snow
10-26 378
<script language="javascript" type="text/javascript"> //2019-7-31 wdl增加全选方法 function seletAll(ctlName, bool) { var m, a, n a = 0// 金额合计 m = 0 b = 0.00 var ele = event.srcElement; if (ele.tagName == "INPUT" && ele.type == "checkbox")
gridview添加复选框批量操作代码
12-24
这个方法会检查GridView中的每一行，判断对应的复选框是否被选中。如果选中，就获取当前行的特定数据（如`commentview.DataKeys[i].Value.ToString()`获取评论标题），然后构造SQL语句执行删除操作。在本例中，删除...
GridView复选框(C#)
12-12
GridView复选框(C#) GridView复选框(C#) GridView复选框(C#)
jquery实现带复选框的gridview
08-09
本示例"jquery实现带复选框的gridview"提供了一个完整的项目文件，允许开发者自定义数据源，以实现一个简单易用的复选框Gridview功能。这个功能对于那些需要用户批量选择或操作数据的Web应用来说非常实用，比如在...
GridView表格抬头列值复选筛选
09-25
"GridView表格抬头列值复选筛选"就是这样一个功能，它允许用户通过复选框选择特定列的值，然后根据这些选择进行数据过滤，提高数据处理的效率和用户体验。 首先，我们需要理解GridView的基本结构。GridView由多个列...
GridView实现多选,全选,反选功能
02-03
GridView实现多选,全选,反选功能
Dev Gridcontrol Mater-Details多级视图动态绑定
09-26
DEV版本：12.1。用过DEV Gridcontrol的朋友们应该大多数都知道Gridcontrol可以实现多级视图，即通过主视图和子视图的主外键关系来达到分级展开的效果。常用的做法一般都是先设定两个表之间的Relation后直接用控件绑定，然后控件自动会帮助我们实现分级。但是在某种业务需求的情况下需要点击主项目的时候实时获取明细，比较两种业务之间的区别在于，前者是把所有的数据查询出来，包括主项、明细项；而后者是只需查询主项即可，在展开的同时获取并加载明细，相比较而言，当然后者效率是最高的。详细看代码吧，目前有个问题还没有得到处理，当有三级的时候第三级无法获取第二级的主项ID，不清楚后续版本是否有改善。
在ASP.NET MVC4 Gridview中，如何向每行添加复选框并从后面的代码访问选定的行。
04-04
总结，要在ASP.NET MVC4的GridView中添加复选框并从后台代码访问选定的行，我们需要创建自定义的GridView，为每一行添加复选框，然后在控制器中处理POST请求，筛选出选中的行。这个过程涉及到前端视图的构建、表单...
GridView合并行
weixin_33896726的博客
01-06 65
public static void MergeRows(GridView gvw, int sCol, int eCol)//gvw 需要合并的GridView，sCol要合并开始列（从0开始），eCol要合并的结束列 { for (int rowIndex = gvw.Rows.Count - 2; rowIndex >= 0; rowIndex...
[学习心得][C#][GridView][使用模板列定制要显示内容格式][2]在GridView中加入CheckBox复选框，并进行批量操作
jason_56的博客
05-05 1222
要实现的功能： 如图所示，在GridView最前面加一列复选框CheckBox控件 选择后可以点击按钮进行批量操作。这里实现的是批量删除 实现过程： 1.在前台Html代码GridView控件中，在首列插入一个模板列 在其中放入一个CheckBox复选框控件，此例中设置ID = "CheckBoxSelectRow" <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="Che
Gridview 复选框多选删除操作
weixin_30242907的博客
12-12 241
<asp:GridView ID="Griw_List" runat="server" HeaderStyle-BackColor="YellowGreen" class="table table-bordered table-hover" AutoGenerateColumns="False" GridLines="None" Width="100%"> <Columns&g...
实例：GridView实现CheckBox的多选或单选，并根据所选择的行进行数据操作
热门推荐
粗茶淡饭
12-29 1万+
实例说明：    有一个用户列表，其中每一个用户对应一个状态。状态有两个值，分别是已激活，未激活。    现要求实现这样的功能，     1.        列表显示出用户名及对应的激活状态。     2.        列表中的每一行行首有一个CheckBox，列表底部有一个Button（激活）。使用者先勾选CheckBox（可多选），在点击激活按钮，即可激活相应勾选的用户。     3.        对于当前状态是激活状态的用户，其行首不应该显示CheckBox.功能截图：    涉及到的知识： Gr
c#gridcontroil添加复选框可删除选中行
最新发布
05-26
你可以通过以下步骤实现在 C# GridControl 中添加复选框并删除选中行： 1. 在 GridControl 中添加一个 GridColumn，并将其 ColumnEdit 属性设置为 RepositoryItemCheckEdit。 2. 在代码中添加以下行以将 GridColumn 显示为复选框： ``` gridView1.Columns["YourColumnName"].ColumnEdit = new RepositoryItemCheckEdit(); ``` 3. 为 GridControl 添加一个 SelectionChanged 事件处理程序，以便在选择行时更新所选行的列表。 ``` private void gridView1_SelectionChanged(object sender, SelectionChangedEventArgs e) { // 获取选择的行 int[] selectedRows = gridView1.GetSelectedRows(); List<DataRow> selectedDataRows = new List<DataRow>(); foreach (int rowHandle in selectedRows) { selectedDataRows.Add(gridView1.GetDataRow(rowHandle)); } // 更新所选行的列表 SelectedRowsList.DataSource = selectedDataRows; } ``` 4. 为 GridControl 添加一个 Click 事件处理程序，以便在单击删除按钮时删除所选行。 ``` private void btnDelete_Click(object sender, EventArgs e) { // 获取选择的行 int[] selectedRows = gridView1.GetSelectedRows(); // 从数据源中删除选定的行 for (int i = selectedRows.Length - 1; i >= 0; i--) { DataRow row = gridView1.GetDataRow(selectedRows[i]); YourDataTable.Rows.Remove(row); } // 刷新 GridControl gridView1.RefreshData(); } ``` 请注意，此示例代码仅提供了一个基本的框架，您需要根据自己的需求进行修改和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值