GridView利用CheckBox复选框列实现单选功能

42 篇文章 15 订阅
14 篇文章 6 订阅

自Dev13.2开始,GridView提供了自带的复选框列,该功能能实现多选操作,方便了不少,那如果想把这个自带的复选框列做成单选,那就需要单独处理了。

先补充一下,GridView的复选框列怎么设置,如下代码片段,只要设置前面两个属性即可在GridView看到有一列复选框(BandedGridView较老版本不支持这个功能,应该得在19.2或者20之后的版本才支持,具体可以看看自己的版本,如果设置无效,那么说明不支持):

 //设置显示复选框列
            gridview.OptionsSelection.MultiSelectMode = DevExpress.XtraGrid.Views.Grid.GridMultiSelectMode.CheckBoxRowSelect;
            gridview.OptionsSelection.MultiSelect = true;
            gridview.OptionsSelection.CheckBoxSelectorColumnWidth = 45;//设置复选框列的宽度

了解如何显示复选框列,那么想实现单选的功能就需要检测选择操作时候对其他行的CheckBox进行取消选择,GridView提供了一个SelectionChanged事件,我们只需要在这个事件监听这个操作,每次触发的时候清除所有选择行(gridView.ClearSelection())然后再选择当前行即可,直接上代码:

/// <summary>
        /// 设置GridView单选
        /// </summary>
        /// <param name="view"></param>
        /// <param name="selectCaption"></param>
        public static void SetGridViewSingleSelect(DevExpress.XtraGrid.Views.Grid.GridView view,string selectCaption="选择")
        {
            if (view == null) return;
            //设置显示复选框列
            view.OptionsSelection.MultiSelectMode = DevExpress.XtraGrid.Views.Grid.GridMultiSelectMode.CheckBoxRowSelect;
            view.OptionsSelection.MultiSelect = true;
            view.OptionsSelection.CheckBoxSelectorColumnWidth = 45;
            view.OptionsSelection.ShowCheckBoxSelectorInColumnHeader = DevExpress.Utils.DefaultBoolean.False;//列标题不显示CheckBox,控制不能全选
            //
            var selectCol=view.VisibleColumns[0];
            if(selectCol.FieldName== "DX$CheckboxSelectorColumn")
            {
                selectCol.Caption = selectCaption;
            }
            view.SelectionChanged += onSelectChanged;
            void onSelectChanged(object sender , DevExpress.Data.SelectionChangedEventArgs e)
            {
                //注销事件,防止以下操作反复触发该事件
                view.SelectionChanged -= onSelectChanged;
                //清除所有选择
                view.ClearSelection();
                if (e.Action == CollectionChangeAction.Add)//选中
                {
                    view.SelectRow(e.ControllerRow);
                }
                else if (e.Action == CollectionChangeAction.Remove)//取消选中
                {
                    view.UnselectRow(e.ControllerRow);
                }
                view.SelectionChanged += onSelectChanged;
            }
        }

如果需求是不可以允许不选的话,不需要代码中的两个条件语句,直接view.ClearSelection()后调用view.SelectRow(e.ControllerRow)即可。

示例、代码如下:

public Form1()
        {
            InitializeComponent();
            SetGridViewSingleSelect(gridView1);
            gridControl1.DataSource = CreateDt();
        }
        DataTable CreateDt()
        {
            var dt = new DataTable();
            dt.Columns.Add("id");
            dt.Columns.Add("name");
            for (int i = 0; i < 20; i++)
            {
                dt.Rows.Add(i, "name" + i);
            }
            return dt;
        }

结果演示:

 

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
1. GridView中的checkbox复选框使用: GridView中的复选框可以用来选择多行记录,实现全选功能等。 在GridView控件中,设置的DataField属性为一个布尔型的字段,在的TemplateField中添加一个Checkbox控件,并设置它的Checked属性为DataBind中绑定的布尔型字段值。 示例代码: ``` <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="chkAll" runat="server" onclick="checkAll(this);" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="chk" runat="server" Checked='<%# Convert.ToBoolean(Eval("IsSelected")) %>' /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Age" HeaderText="Age" /> </Columns> </asp:GridView> ``` 2. Echarts图的使用: Echarts是一款开源的可视化图表库,支持多种图表类型,如折线图、柱状图、饼图等。 在C#中使用Echarts,可以通过前端技术(如JavaScript)来实现,也可以使用Echarts.NET库来实现,前者需要在前端页面中引入Echarts.js文件,后者需要在C#代码中引入Echarts.NET库。 以下是使用Echarts.NET库实现柱状图的示例代码: ``` using ECharts.Entities; using ECharts.Entities.series; using Newtonsoft.Json; public partial class Demo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Chart chart = new Chart(); chart.Title.Text = "柱状图示例"; Legend legend = new Legend(); legend.Data.Add("销量"); Axis xAxis = new Axis(); xAxis.Data.Add("衬衫"); xAxis.Data.Add("羊毛衫"); xAxis.Data.Add("雪纺衫"); xAxis.Data.Add("裤子"); xAxis.Data.Add("高跟鞋"); xAxis.Data.Add("袜子"); Axis yAxis = new Axis(); SeriesBar series = new SeriesBar(); series.Name = "销量"; series.Data.Add(5); series.Data.Add(20); series.Data.Add(36); series.Data.Add(10); series.Data.Add(10); series.Data.Add(20); chart.Legend = legend; chart.XAxis = xAxis; chart.YAxis = yAxis; chart.Series.Add(series); string json = JsonConvert.SerializeObject(chart); string script = string.Format("var myChart = echarts.init(document.getElementById('chartContainer'));myChart.setOption({0});", json); Page.ClientScript.RegisterStartupScript(this.GetType(), "EchartsScript", script, true); } } ``` 在前端页面中,需要添加一个div元素来显示图表,并引入Echarts.js文件和jQuery库: ``` <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-3.3.1.min.js"></script> <script src="Scripts/echarts.min.js"></script> </head> <body> <div id="chartContainer" style="width: 600px;height:400px;"></div> </body> </html> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值