大家都知道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;即可。