最近在一個項目中需要用到無限分類的平鋪多選,單選這些功能,查了一些資料,結果大都是一些用IFrame這樣的東西做的,雖然用起來直觀,但本人更喜歡集成控件形式的,于是抽了一些時間做了一個.思路是利用控件+JS+不同的無限分類表,支持一頁多控件,支持不同的無限分類表.效果圖如下:

當這些父類被選擇時,子類都被選擇.當這些父類取消選擇時,其下所有子類都被取消選擇.

代碼如下:

控件behind代碼CS:

?

MultiSelectItems.ascx.cs ??1?using?System;
??2?using?System.Collections;
??3?using?System.Collections.Generic;
??4?using?System.Configuration;
??5?using?System.Data;
??6?using?System.Linq;
??7?using?System.Web;
??8?using?System.Web.Security;
??9?using?System.Web.UI;
?10?using?System.Web.UI.HtmlControls;
?11?using?System.Web.UI.WebControls;
?12?using?System.Web.UI.WebControls.WebParts;
?13?using?System.Xml.Linq;
?14?using?Models;
?15?
?16?public?partial?class?MultiSelectItems?:?System.Web.UI.UserControl
?17?{
?18?????public?List<Groups>?groupList?{?get;?set;?}???
?19?
?20?????public?string?hasSel
?21?????{
?22?????????set
?23?????????{
?24?????????????if?(!string.IsNullOrEmpty(value))
?25?????????????{
?26?????????????????//綁定已選數據????????????????????
?27?????????????????value?=?value.Trim(',');
?28?????????????????string[]?hasSels?=?value.Split(',');
?29?????????????????foreach?(string?s?in?hasSels)
?30?????????????????{
?31?????????????????????scriptStr?+=?"document.getElementById('checkItems"?+?tableName?+?s?+?"').checked=true;\r\n";
?32?????????????????????scriptStr?+=?"checkProperty('"?+?tableName?+?"',"?+?s?+?",'"?+?controlName?+?"');\r\n";
?33?????????????????}
?34?????????????????scriptStr?+=?"document.getElementById('checkeds"?+?tableName?+?"').value='"?+?value?+?",';\r\n";
?35?????????????}
?36?????????}
?37?????}
?38?????public?string?tableName?{?get;?set;?}
?39?????public?string?controlName?{?get;?set;?}
?40?????public?string?scriptStr?=?string.Empty;
?41?????public?string?multiItemsInnerHtml?=?string.Empty;
?42?????protected?void?Page_Load(object?sender,?EventArgs?e)
?43?????{
?44?????????//此控件配合JS使用
?45?????????//使用方法：
?46?????????//在頁面頂部加載此控件:<%@?Register?Src="~/controls/MultiSelectItems.ascx"?TagName="mi"?TagPrefix="MultiSelectItem"?%>
?47?????????//在head中加載相應JS:<script?language="javascript"?src="/controls/MultiSelectItems.js"?type="text/javascript"></script>
?48?????????//在頁面相關位置放置此控件:<MultiSelectItem:mi?runat="server"?ID="miArea"?/>ID不受限制
?49?????????//配置一些屬性
?50?????????//miArea.st?=?SysTable.AreaGroups;//加載哪個表??????????
?51?????????//miArea.controlName?=?"checkedsAreaGroups";//要獲取值的text控件名
?52?????????//miArea.BindData();//綁定初始數據
?53?????????//如果是修改選項，可以設置已有選項:miArea.hasSel?=?sm.Area_Items;
?54?????????//獲取該控件的值，這個名稱就是剛剛配置的名稱：Request.Form["checkedsAreaGroups"]
?55?????}
?56?????///?<summary>
?57?????///?綁定初始的多選表單數據，這些數據都是未被選擇的，如果要選擇數據，請設置該對象相關實例的hasSel屬性
?58?????///?</summary>
?59?????public?void?BindData()
?60?????{
?61?????????string?brStr?=?string.Empty;
?62?????????string?clickStr?=?string.Empty;
?63?????????string?tpGroupName?=?string.Empty;
?64?????????string?tpBox?=?string.Empty;
?65?????????if?(groupList?!=?null)
?66?????????{
?67?????????????foreach?(Groups?gp?in?groupList)
?68?????????????{
?69?????????????????brStr?=?string.Empty;???????????????
?70?????????????????clickStr?=?"checkAllSubProperty('"?+?tableName?+?"','"?+?gp.GroupId?+?"','"?+?controlName?+?"')"?;
?71?????????????????tpBox?=?"<input?type='checkbox'?name='checkItems"?+?tableName?+?"'?id='checkItems"?+?tableName?+?gp.GroupId?+?"'?value='"?+?gp.ParentStr?+?gp.GroupId?+?"'?οnclick=\""?+?clickStr?+?"\"?/>\r\n";
?72?????????????????if?(gp.Route?==?1)?{
?73?????????????????????tpGroupName?=?gp.GroupName.Substring(1);
?74?????????????????}
?75?????????????????else?if?(gp.Route?==?2)
?76?????????????????{
?77?????????????????????tpGroupName?=?gp.GroupName.Substring(1);???????????????????
?78?????????????????}
?79?????????????????else?{
?80?????????????????????tpGroupName?=?gp.GroupName.Substring(gp.Route?-?1);???????????????????
?81?????????????????}
?82?
?83?
?84?????????????????if?(gp.Route?==?1)
?85?????????????????{
?86?????????????????????brStr?=?"<br?/>";
?87?????????????????????multiItemsInnerHtml?+=?brStr?+?tpBox?+?"<span?style='color:#FF7500;font-weight:bold;'>"?+?tpGroupName?+?"</span>";
?88?????????????????}
?89?????????????????else
?90?????????????????{
?91?????????????????????if?(groupList.Where(c?=>?c.ParentId?==?gp.GroupId).Count()?>?0)
?92?????????????????????{
?93?????????????????????????brStr?=?"<br?/>";
?94?????????????????????????multiItemsInnerHtml?+=?brStr?+?tpBox?+?"<span?style='font-weight:bold;'>"?+?tpGroupName?+?"</span>";
?95?????????????????????}
?96?????????????????????else
?97?????????????????????{
?98?????????????????????????multiItemsInnerHtml?+=??tpBox?+?tpGroupName;
?99?????????????????????}????????????????????
100?????????????????}
101?????????????????multiItemsInnerHtml?+=?"&nbsp;&nbsp;";
102?????????????????multiItemsInnerHtml?+=?brStr;
103?????????????}
104?????????}
105?????}
106?}

?

html代碼很簡單:

?

MultiSelectItems.ascx <%@?Control?Language="C#"?AutoEventWireup="true"?CodeBehind="MultiSelectItems.ascx.cs"?Inherits="MultiSelectItems"?%>
<div?id="MultiItems<%=tableName%>"><%=multiItemsInnerHtml%></div>
<input?type="hidden"?name="<%=controlName%>"?id="<%=controlName%>"?value=""?/>
<script?language="javascript"?type="text/javascript">
<%=scriptStr%>
</script>

?

接下來是相關的JS,注意,不論一個頁面調用幾次這個控件,此JS只加載一次

?

MultiSelectItems.js ????function?checkAllSubProperty(tableName,groupid,checkedsControlName){
????????var?checkedControl?=?document.getElementById("checkItems"?+?tableName?+?groupid);
????????var?items?=?document.getElementsByName("checkItems"?+?tableName);
????????var?checkeds?=?document.getElementById(checkedsControlName);
????????if(checkedControl.checked){
????????????checkeds.value?+=?groupid?+?',';
????????}else{
????????????checkeds.value?=?checkeds.value.replace(groupid?+?",","");
????????}
????????for(var?i=0;i<items.length;i++){
????????????if(items.item(i).value.indexOf(','?+?groupid?+?',')?>?-1){
????????????????var?insertStr?=?items.item(i).value.substring(items.item(i).value.lastIndexOf(',')?+?1,items.item(i).value.length)?+?',';
????????????????if(checkedControl.checked){
????????????????????items.item(i).checked?=?true;???????
????????????????????if(checkeds.value.indexOf(insertStr)?<?0){
????????????????????????checkeds.value?+=?insertStr;
????????????????????}
????????????????}else{
????????????????????items.item(i).checked?=?false;?
????????????????????checkeds.value?=?checkeds.value.replace(insertStr,"");
????????????????}
????????????}
????????}????????
????}

?

因為是基于.net 3.5的Linq做的控件,所以,此控件必須運行在裝有3.5類庫的機器上,而且,因為無限分類的數據庫結構大家都清楚.是這樣的:

稍微解釋一下各字段含義:

GroupId:這是分類的主ID,自動增加,主鍵.

GroupName:這是分類的名字.

ParentId:這是父類的ID,

ParentStr:這是從根類--->父類---->父類....--->本類的父類的路徑,以0開始,以,結束,例如0,2,10,22,這從算法上講叫靜態冗余字段,用來快速查找某個類的所有子類.例如要查找GroupId為2的所有子類,可以這樣寫語句:select top xx?* from 表名 where ParentStr like '%,2,%',是不是比一般的遍歷要快很多?

Route:這是指示該類的路徑深度,如果是根類,則為1,如果是1級子類,則為2,依此類推,此字段主要用于快速查找某一級別的所有子類.

至于這個無限分類的維護,大家可以各顯其能去優化.目前我的維護是采用緩存+List<>+ORM

?

?我寫的東西大都是日常工作中用得比較多的,而且,相對來說,我會比較偷懶,例如,減少計算,減少數據庫訪問等.而且,本人不喜歡一個大括號里有很多條語句的代碼方式.這樣的代碼比較難維護.如果我看到一個if或者while后接了一個大括號,然后整屏都看不到它的結束符.我會BS這段代碼的作者.

?

?

f人要

轉載于:https://www.cnblogs.com/CoreCaiNiao/archive/2009/12/01/1614665.html

總結

以上是生活随笔為你收集整理的关于一个无限分类的多选,单选相关的控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。