無法使用全選復選框切換網格上的復選框
[英]Cannot toggle checkboxes on grid with a selectall checkbox
問題描述
我希望能夠選擇/取消選擇網格中特定列的復選框。
它在eval語句上的JS“ onUPCSelectAll”函數內部收到錯誤，如下所示： JS運行時錯誤：對象不支持屬性或方法'SetChecked'
在調試期間，我可以看到我的id值為：
$(this)[0].id = "PrintCallbackPanel_selectAllUPCCheckBox"
我的源代碼確實設置了這個特殊的id，但是，您可以看到id值實際上在控件名稱的末尾放置了“ _S”。
選擇/取消選擇所有UPC行
“ SetChecked”方法產生以下內容：
eval($(this)[0].id).SetChecked = function(isChecked) {
this.SetCheckState(isChecked ? ASPxClientCheckBoxCheckState.Checked : ASPxClientCheckBoxCheckState.Unchecked);
}
最后，整行產生一個未定義的值
?eval($(this)[0].id).SetChecked(s.GetChecked());
undefined
HTML：
<td style="padding-right: 10px;">
<dx:ASPxCheckBox ID="selectAllUPCCheckBox" runat="server" Text="Select/Unselect all UPC rows" TextAlign="Right" ClientSideEvents-CheckedChanged="onUPCSelectAll" AutoPostBack="false" />
</td>
<td style="padding-right: 10px;">
<dx:ASPxCheckBox ID="selectAllMPCCheckBox" runat="server" Text="Select/Unselect all MPC rows" TextAlign="Right" ClientSideEvents-CheckedChanged="onMPCSelectAll" AutoPostBack="false" />
</td>
HTML網格：
<dx:ASPxCallbackPanel ID="PrintCallbackPanel" ClientInstanceName="PrintClientCallbackPanel" runat="server" OnCallback="PrintCallbackPanel_Callback" ShowLoadingPanel="false">
<ClientSideEvents EndCallback="OnEndCallback" />
<PanelCollection>
<dx:PanelContent>
<dx:ASPxLoadingPanel ID="MainASPxLoadingPanel" ClientInstanceName="MainASPxClientLoadingPanel" runat="server" Theme="BlackGlass">
<Image Width="50px" Height="50px"></Image>
<Border BorderColor="Blue" BorderStyle="Inset" BorderWidth="3px" />
</dx:ASPxLoadingPanel>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="auto-style2">
<table cellpadding="0" cellspacing="0" id="searchTable" runat="Server">
<tr>
<td style="padding-right: 10px;">
<dx:ASPxLabel ID="lblSearchField" runat="server" Font-Bold="true" Text="Search By:" />
</td>
<td style="padding-right: 10px;">
<dx:ASPxComboBox ID="FieldNameASPxComboBox" ClientInstanceName="FieldNameClientASPxComboBox" runat="server" ValueType="System.Int16" Theme="PlasticBlue" Style="margin-left: 0px">
<Items>
<dx:ListEditItem Text="Model" Value="0" Selected="true" />
<dx:ListEditItem Text="PO" Value="1" />
</Items>
<ClientSideEvents ValueChanged="FieldNameChanged" />
</dx:ASPxComboBox>
</td>
<td style="padding-right: 10px;">
<dx:ASPxComboBox ID="FieldMethodASPxComboBox" ClientInstanceName="FieldMethodClientASPxComboBox" runat="server" ValueType="System.Int16" Theme="PlasticBlue" Width="100px">
<Items>
<dx:ListEditItem Text="Starts With" Value="0" Selected="true" />
<dx:ListEditItem Text="Is Exactly" Value="1" />
<dx:ListEditItem Text="Contains" Value="2" />
</Items>
</dx:ASPxComboBox>
</td>
<td style="padding-right: 10px;">
<dx:ASPxTextBox ID="SearchTextASPxTextBox" ClientInstanceName="SearchTextClientASPxTextBox" runat="server" Width="250px" Theme="PlasticBlue" AutoCompleteType="None">
<ValidationSettings ValidationGroup="CS" Display="Dynamic" ErrorDisplayMode="None">
<RequiredField IsRequired="true" ErrorText="" />
</ValidationSettings>
</dx:ASPxTextBox>
</td>
<td style="padding-right: 10px;">
<dx:ASPxButton ID="btnSearch" Text="Search" ClientInstanceName="btnSearchClient" runat="server" CausesValidation="false" ValidationGroup="CS" Theme="PlasticBlue" AutoPostBack="false">
<ClientSideEvents Click="function (s,e) { DoSearch(); }" />
</dx:ASPxButton>
</td>
<td class="auto-style3">
<dx:ASPxButton ID="btnClear" Text="Clear" runat="server" CausesValidation="false" AutoPostBack="false" Theme="PlasticBlue">
<ClientSideEvents Click="function (s,e) {document.location.reload(true); }" />
</dx:ASPxButton>
</td>
</tr>
<tr>
<td colspan="6" style="height: 5px;"></td>
</tr>
</table>
</td>
</tr>
<table cellpadding="0" cellspacing="0" runat="server" id="selectionTable">
<tr>
<td style="padding-right: 10px;" class="auto-style4">
<dx:ASPxLabel ID="lblLabelSize" runat="server" Text="Label Size: "></dx:ASPxLabel>
</td>
<td style="padding-right: 10px;">
<dx:ASPxComboBox ID="ddlLabelSize" ClientInstanceName="lblLabelSizeClient" CausesValidation="false" runat="server" AutoPostBack="false" Theme="PlasticBlue">
<Items>
<dx:ListEditItem Text="Large" Value="0" Selected="true" />
<dx:ListEditItem Text="Small" Value="1" />
</Items>
<ValidationSettings ValidationGroup="CS" Display="Dynamic" ErrorDisplayMode="None">
<RequiredField IsRequired="true" ErrorText="" />
</ValidationSettings>
</dx:ASPxComboBox>
</td>
<td style="padding-right: 10px;">
<dx:ASPxCheckBox ID="selectAllUPCCheckBox" runat="server" Text="Select/Unselect all UPC rows" TextAlign="Right"
ClientSideEvents-CheckedChanged="onUPCSelectAll" Enabled="false"
AutoPostBack="false" />
</td>
<td style="padding-right: 10px;">
<dx:ASPxCheckBox ID="selectAllMPCCheckBox" runat="server" Text="Select/Unselect all MPC rows" TextAlign="Right"
ClientSideEvents-CheckedChanged="onMPCSelectAll" Enabled="false"
AutoPostBack="false" />
</td>
<td style="padding-right: 10px;">
<dx:ASPxButton ID="btnPrint" Text="Print" runat="server" ClientInstanceName="btnPrintClient" CausesValidation="false" ValidationGroup="CS" Theme="PlasticBlue" AutoPostBack="false" Enabled="false">
<ClientSideEvents Click="function (s,e) { PerformCallback('1:'); btnPrintClient.disabled = true; btnSearchClient.disabled = true; }" />
</dx:ASPxButton>
</td>
</tr>
<tr>
<td colspan="6" style="height: 5px;"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<dx:ASPxGridView ID="LabelASPxGridView"
ClientInstanceName="LabelClientASPxGridView"
runat="server"
Caption="Label Printing"
Theme="PlasticBlue"
Width="100%"
AutoGenerateColumns="false"
KeyFieldName="ModelId"
ViewStateMode="Disabled">
<Columns>
<dx:GridViewDataTextColumn Caption="UPC" UnboundType="Boolean" VisibleIndex="0" HeaderStyle-HorizontalAlign="Right">
<DataItemTemplate>
<dx:ASPxCheckBox
ID="UpcASPxCheckBox" OnInit="UpcASPxCheckBox_Init"
runat="server">
</dx:ASPxCheckBox>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn Caption="MPC" UnboundType="Boolean" VisibleIndex="1" HeaderStyle-HorizontalAlign="Right">
<DataItemTemplate>
<dx:ASPxCheckBox
ID="MpcASPxCheckBox" OnInit="MpcASPxCheckBox_Init"
runat="server">
</dx:ASPxCheckBox>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn Caption="Quantity" FieldName="Quantity" VisibleIndex="2" HeaderStyle-HorizontalAlign="Right">
<DataItemTemplate>
<dx:ASPxSpinEdit
ID="QuantityASPxSpinEdit"
runat="server"
MinValue="0"
DecimalPlaces="0"
SpinButtons-ShowIncrementButtons="true"
OnInit="QuantityASPxSpinEdit_Init"
Width="90px"
HorizontalAlign="Right"
Text='<%# Eval("Quantity") %>'>
</dx:ASPxSpinEdit>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn Caption="Brand" FieldName="BrandCode" VisibleIndex="3" />
<dx:GridViewDataTextColumn Caption="Model" FieldName="ModelCode" VisibleIndex="4" />
<dx:GridViewDataTextColumn Caption="Description" FieldName="Description" VisibleIndex="5" />
</Columns>
<SettingsLoadingPanel Mode="Disabled" />
<SettingsText EmptyDataRow="No Records" />
<SettingsPager Mode="ShowAllRecords" />
<Settings ShowVerticalScrollBar="false" ShowColumnHeaders="true" />
<SettingsBehavior
AllowSelectSingleRowOnly="false"
EnableRowHotTrack="false"
AllowFocusedRow="false" />
</dx:ASPxGridView>
</td>
</tr>
</table>
<dx:ASPxPopupControl ID="ConfirmPopupControl"
ClientInstanceName="ConfirmPopupClientControl"
PopupAction="None"
runat="server"
EnableAnimation="False"
EncodeHtml="false"
ShowHeader="true"
ShowFooter="false"
Modal="true"
PopupVerticalAlign="WindowCenter"
PopupHorizontalAlign="WindowCenter"
ShowShadow="true"
CloseAction="CloseButton"
ShowPageScrollbarWhenModal="true"
Theme="Office2010Blue"
RenderMode="Lightweight">
<ContentCollection>
<dx:PopupControlContentControl ID="ConfirmPopupControlContentControl" runat="server"
SupportsDisabledAttribute="True">
<div class="dialog" style="width: 400px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 5px;">
<dx:ASPxPanel ID="MessageASPxPanel" ClientInstanceName="MessageASPxClientPanel" runat="server" Width="100%">
<PanelCollection>
<dx:PanelContent ID="PanelContent2" runat="server">
<span id="ConfirmMessageSpan" runat="Server"></span>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
</td>
</tr>
<tr>
<td align="right">
<dx:ASPxButton ID="ConfirmButtonOk" runat="server" Text="Ok" AutoPostBack="false"
Height="28px" Width="100px" ForeColor="White" Font-Bold="true" Theme="RedWine">
<ClientSideEvents Click="function(s, e) { ConfirmPopupClientControl.Hide();}"></ClientSideEvents>
</dx:ASPxButton>
</td>
</tr>
</table>
</div>
</dx:PopupControlContentControl>
</ContentCollection>
<Border BorderStyle="None"></Border>
</dx:ASPxPopupControl>
</table>
<dx:ASPxHiddenField ID="PageData" ClientInstanceName="PageDataClient" runat="server"></dx:ASPxHiddenField>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
JS：
function onUPCSelectAll(s, e) {
$('[id*="selectAllUPCCheckBox"]').each(function () {
eval($(this)[0].id).SetChecked(s.GetChecked());
});
};
function onMPCSelectAll(s, e) {
$('[id*="selectAllMPCCheckBox"]').each(function () {
eval($(this)[0].id).SetChecked(s.GetChecked());
});
};
1 個解決方案
解決方案1
1 2013-09-06 16:24:49
您選中所有復選框的ID以小寫字母s開頭，並且在jQuery選擇器中使用大寫字母S
將代碼更改為：
function onUPCSelectAll(s, e) {
$('[id*="selectAllUPCCheckBox"]').each(function () {
eval($(this)[0].id).SetChecked(s.GetChecked());
});
};
function onMPCSelectAll(s, e) {
$('[id*="selectAllMPCCheckBox"]').each(function () {
eval($(this)[0].id).SetChecked(s.GetChecked());
});
};
選擇器區分大小寫。
單擊selectAll復選框時如何更改所有復選框（在所有頁面中）的狀態[使用jQuery數據表]
[英]How to change states of all checkboxes (in all pages) when clicked selectAll checkbox [using jQuery datatable]
UI-Grid - 如何使用 selectAll 復選框選擇當前頁面中顯示的記錄
[英]UI-Grid - How to select records displayed in the current page using selectAll checkbox
vue復選框瘋狂，如果其中的所有復選框都為真，如何切換全局復選框
[英]vue checkbox insanity, how to toggle a global checkbox if all checkboxes inside it are true
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.