给GridPanel增加行复选框按钮

大家都知道GridPanel是一个非常好用的控件,但是没有像C#一样的自定义的复选框。那我们就手工给它加一个复选框列,并实现全选清除获取选中的数据。以下GridPanel简称GP。

第一种:自己增加一个CheckColumn来实现选中与否

1.首先在GP的Store里面增加一个是否选中的字段源:<ext:ModelField Name="IsSelect" Type="Boolean" DefaultValue="0"/>。因为不用数据库返回,所以直接设置默认值为0,不选中。

2.在GP的ColumnModel里,增加我们的第一行复选框:<ext:CheckColumn runat="server" ID="c1" Text="选择" Editable="true" DataIndex="IsSelect" Width="40" /> 。

3.实现点击复选框的时候界面能够实现选中状态。在GP的事件里增加CellClick,我们命名为:clickOne。

4.function clickOne(gridview, td, value, data, tr) {
        if (data.data.IsSelect)
            data.data.IsSelect = 1;
        else data.data.IsSelect = 0;
        App.GP.store.commitChanges();
        App.GP.view.refresh();
    }。其实就是改变数据源的IsSelect字段的值,然后在刷新GP,界面上看到的就是选中状态了。

那么接下来我们实现全选和清除全选就简单多了。在GP增加2个全选和清除按钮。调用的事件如下:

//清除所有选择
    function clear() { 
         var dataList = App.GP.store.data.items;
         if (dataList.length > 0) {
             for (var i = 0; i < dataList.length; i++) {
                 var data = dataList[i].data;
                 if (data.IsSelect == 1) {
                     data.IsSelect = 0;
                 }
             }
         }
         App.GP.store.commitChanges();
         App.GP.view.refresh();
     }
     //全部选择
     function selectAllMasterial() {
         var dataList = App.GP.store.data.items;
         if (dataList.length > 0) {
             for (var i = 0; i < dataList.length; i++) {
                 var data = dataList[i].data;
                 if (data.IsSelect == 0) {
                     data.IsSelect = 1;
                 }
             }
         }
         App.GP.store.commitChanges();
         App.GP.view.refresh();
     }

即可。

得到选中的数据则更简单了:

var dataList = App.GP.store.data.items;
        if (dataList.length > 0) {
               for (var i = 0; i < dataList.length; i++) {
                      var data = dataList[i].data;
                      if (data.IsSelect == 1) {

//这里就是你要获取得到的数据,然后执行你自己的操作了

       }

       }

}


第二种:就是EXT.NET自带的SelectionModel

1.在GP里增加一个选中模板:

<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" Mode="Multi" runat="server">

//这里,可以加一系列的选中事件,这里只列出了3个,其他自己去看看还有哪些
<Listeners>

<BeforeSelect Fn="" />

<Deselect Fn="" />

<Select FN="" />
 </Listeners>
</ext:CheckboxSelectionModel>
 </SelectionModel>

2.如果需要特殊处理,就在选中模板里添加自己的事件。

3.获取选中的数据:App.gpContractList.selModel.selected;即可。

看实例学VFP:复选框控件 时间:2009-03-24来源:编程入门网 作者:老马   在vfp基础教程-复选框一文中,已经给出了复选框控件的常用属性。这个控件的使用重点是对它的value属性值的判断上,另外也可以通过controlsource属性把它和表中的某个逻辑型字段绑定,同时也可以在它支持的click、interactiveChange等事件中进编程。   本文是一个在复选框控件的interactiveChange事件中编程的小例子,运时通过复选框的选择来控制label控件的文字大小及颜色变化,运界面如下:   制作步骤:   一、新建表单,将其caption属性值设置为“编程入门网-复选框控件”,保存为“复选框控件.scx”。   二、向表单上添加一个label控件,caption属性值设为“编程入门网”,fontsize属性值设为10,AutoSize属性值设为.t.,Forecolor属性值设为“0,0,255”(rgb颜色)   三、向表单添加两个复选框控件,caption属性值依次设置为“增大字号”和“改变颜色”,其它属性值采用默认的。   四、添加事件代码:   1.复选框check1(“增大字号”)的interactiveChange事件: if this.value=1 thisform.label1.fontsize=18 else thisform.label1.fontsize=10 endif   2.复选框check2(“改变颜色”)的interactiveChange事件: if this.value=1 thisform.label1.forecolor=rgb(255,0,0) else thisform.label1.forecolor=rgb(0,0,255) endif
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值