Asp.net 中CheckBoxList 的应用
Asp.net 中CheckBoxList 的应用<asp:Panel ID="Panel5" runat="server" Style="display: none" CssClass="modalPopup" BackColor="WhiteSmoke" BorderColor="Gray" BorderWidth="1pt" Height=320px Width="310px" >
<asp:Panel ID="Panel6" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black" BackColor="Silver" Width="310px" Height="25px" >
<div>
<p> Choose Process Code:</p>
</div>
</asp:Panel>
<!---ProcessCode--->
<DIV style="OVERFLOW: auto; WIDTH: 310px; HEIGHT: 240px" align="left">
<p>
<asp:CheckBoxList ID="CheckBoxList_ProcessCode" runat="server" > </asp:CheckBoxList>&nbsp;
</p>
</DIV>
<!---ProcessCode--->
<div>
<p style="text-align: center">
<asp:Button ID="OkButton" runat="server" Width=60 Text="OK" OnClientClick ="return CheckValue();" OnClick="btnCheck_Click" />
<asp:Button ID="CancelButton" Width=60 runat="server" Text="Cancel" OnClientClick="return deleteAll();" />
</p>
</div>
</asp:Panel>
-- OkButton 控制着取出 CheckBoxList 中Check = True 的值，而 CancelButton, 控制着Clear 所选中的CheckBoxList 选项.
由于CheckBoxList 的特殊性，我们无法在asp.net 服务器进行取值等操作处理. 通过测试和网上的一些资，可以接合前后台的方法来完成这一功能操作。
前台： OnClientClick ="return CheckValue();"
OnClientClick="return deleteAll();"
<script type="text/javascript">
function ok()
{
var x
}
function CheckValue()
{
//在JS端调用CheckBoxList
var chkObject = document.getElementById('<%=CheckBoxList_ProcessCode.ClientID%>')
var chkInput =chkObject.getElementsByTagName("INPUT")
var arrListValue = chkObject.ListValue.split(',')
var count = arrListValue.length
var strCheckChecked = ""
var arrCheckChecked
var chkValue = ""
for (var i=0; i< chkInput.length; i++)
{
if(chkInput.checked)
{
strCheckChecked = strCheckChecked + "1" + ",";
}
else
{
strCheckChecked = strCheckChecked + "0" + ",";
}
}
arrCheckChecked = RTrim(strCheckChecked).split(',');
for(var j = 0; j < count; j++)
{
if(arrCheckChecked == "1")
{
chkValue += arrListValue +",";
}
}
chkValue = RTrim(chkValue);
// alert(chkValue);
document.getElementById('<%=TextBox_ProcessCode_2.ClientID %>').value=chkValue
deleteAll()
}
//如果有则移除末尾的逗号
function RTrim(str)
{
if(str.charAt(str.length-1)==",")
return str.substring(0,str.length-1);
else
return str;
}
function deleteAll()
{
for(var i=0;i<document.getElementById('<%=CheckBoxList_ProcessCode.ClientID%>').getElementsByTagName("INPUT").length;i++)
{
document.getElementById('<%=CheckBoxList_ProcessCode.ClientID%>'+"_"+i).checked = false;
}
}
</script>
后台：
Protected Sub OkButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles OkButton.Click
Dim lstg_process As String = ""
For lint_index As Integer = 0 To Me.CheckBoxList_ProcessCode.Items.Count - 1
If Me.CheckBoxList_ProcessCode.Items(lint_index).Selected = True Then
lstg_process = lstg_process + Me.CheckBoxList_ProcessCode.Items(lint_index).Value + ";"
End If
Next
Me.TextBox_ProcessCode_2.Text = lstg_process
End Sub
对 CheckBxoList 的数据绑定做于下处理：
Sub BindProcessCode()
Dim sql As String
sql = "select ProcessCode,ProcessName from PRC_ProcessInfo "
Dim ds As DataSet = Live.Ado.ADOProxy.GetRowsByQuery(sql)
Me.CheckBoxList_ProcessCode.DataSource = ds
Me.CheckBoxList_ProcessCode.DataTextField = "ProcessName"
Me.CheckBoxList_ProcessCode.DataValueField = "ProcessCode"
Me.CheckBoxList_ProcessCode.DataBind()
Dim checkListValue As String = ""
Dim checkListText As String = ""
For i As Integer = 0 To Me.CheckBoxList_ProcessCode.Items.Count - 1
checkListValue += CheckBoxList_ProcessCode.Items(i).Value + ","
checkListText += CheckBoxList_ProcessCode.Items(i).Text + ","
Next
checkListText = checkListText.TrimEnd(",")
checkListValue = checkListValue.TrimEnd(",")
'//由于checkboxlist在前台html页面表现中没有value属性，导致js无法获取选种的value值
' //这里用程序来添加value和text属性
CheckBoxList_ProcessCode.Attributes("ListValue") = checkListValue
CheckBoxList_ProcessCode.Attributes("ListText") = checkListText
End Sub
---Result---
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 414.75pt; HEIGHT: 272.25pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME~1%5Cwei_zhu%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.png"></imagedata></shape>
http://p.blog.csdn.net/images/p_blog_csdn_net/zwxrain/361395/o_CheckBoxList.png
页:
[1]