c# - 包含类别和子类别的下拉列表

Question

我在 SQL 中有 2 个表。

Category_Tbl:

ID  Categories 
1   Projects 
2   Residential 
3   Commercial

SubCategory_Tbl:

ID  CATID   Subcategories
1   1   Residential  Projects
2   1   Commercial Projects
3   2   Residential Apartment
4   2   Independent/Builder Floor
5   2   Independent House/Villa
6   2   Residential Land
7   2   Studio Apartment
8   2   Farm House
9   2   Serviced Apartments
10  3   Commercial Shops
11  3   Commercial Showrooms
12  3   Commercial Office/Space
13  3   Commercial Land/Inst. Land

我想将所有类别及其子类别绑定(bind)到带有复选框的下拉列表中。有点像

我已经在 Google 上进行了搜索，但没有找到任何有值(value)的结果。

Answer 1

不是要插手另一家公司，但我(在很多场合)使用 Kendo UI treeview 来做这类事情。 Kinda 为您完成这项工作。这取自他们的基本 HTML5 演示(此处未使用 html5)。

http://demos.telerik.com/kendo-ui/treeview/checkboxes

这是一个您可以查看的 fiddle ，但实际上只是设置您的数据源。我可能会通过 ajax(或序列化 json)加载数据源以简化创建 TreeView 的方式。

http://jsfiddle.net/ztc4ma52/3/

通过一些小的工作，您可以稍微清理样式并使其看起来与您所做的非常相似。

示例 fiddle 代码。

$(function () {
    $('#list1').kendoTreeView({

        checkboxes: {
            checkChildren: true
        },
        check: function (e) {
            e.preventDefault();

        },
        dataSource: [{
            catid: 1,
            text: "Projects",
            expanded: true,
            items: [{
                subcatid: 2,
                catid: 1,
                text: "Residential Projects"
            }, {
                subcatid: 3,
                catid: 1,
                text: "Commercial Projects"
            }],
        }, {
            catid: 2,
            text: "Residential",
            expanded: true,
            items: [{
                subcatid: 3,
                catid: 2,
                text: 'Residential Apartment'
            }, {
                subcatid: 4,
                catid: 2,
                text: 'Independent/Builder Floor'
            }, {
                subcatid: 5,
                catid: 2,
                text: 'Independent House / Villa'
            }, {
                subcatid: 6,
                catid: 2,
                text: 'Residential Land'
            }, {
                subcatid: 7,
                catid: 2,
                text: 'Studio Apartment'
            }, {
                subcatid: 8,
                catid: 2,
                text: 'Farm House'
            }, {
                subcatid: 9,
                catid: 2,
                text: 'Serviced Apartments'
            }]
        }, {
            catid: 3,
            text: "Commercial",
            expanded: true,
            items: [{
                subcatid: 10,
                catid: 3,
                text: 'Commercial Shops'
            }, {
                subcatid: 11,
                catid: 3,
                text: 'Commercial Showrooms'
            }, {
                subcatid: 11,
                catid: 3,
                text: 'Commercial Office/Space'
            }, {
                subcatid: 11,
                catid: 3,
                text: 'Commercial Land/Inst. Land'
            }]
        }]
    });
});

根据评论。如果您想直接从您的 SQL 服务器绑定(bind)，您可以使用简单的查询来管理它。如果您使用 Asp.Net Webforms (我认为你是)我们可以使用 Newtonsoft JSON.Net 作弊并返回序列化的 JSON 数据。预装了入门应用程序 http://www.newtonsoft.com/json

这是一个从您的数据模型生成简单 JSON 字符串的非常简单的示例:

public partial class TreeView : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    public string GetTreeViewJson()
    {
        return JsonConvert.SerializeObject(GetTreeView());
    }

    public IEnumerable<CategoryRootTreeModel> GetTreeView()
    {
        List<CategoryRootTreeModel> items = new List<CategoryRootTreeModel>();
        using (var sqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString))
        {
            var sqlCommand = new SqlCommand("SELECT * FROM [dbo].[Category_Tbl]", sqlConnection);
            sqlCommand.CommandType = System.Data.CommandType.Text;

            sqlConnection.Open();

            using (var reader = sqlCommand.ExecuteReader())
            {
                while (reader.Read())
                {
                    items.Add(new CategoryRootTreeModel
                    {
                        catid = (int)reader["ID"],
                        expanded = true,
                        text = reader["Categories"].ToString()
                    });
                }
            }
        }
        items.ForEach(item => bindSubCategeories(item));
        return items;
    }

    void bindSubCategeories(CategoryRootTreeModel model)
    {
        using (var sqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString))
        {
            var sqlCommand = new SqlCommand("SELECT * FROM [dbo].[SubCategory_Tbl] WHERE CATID = @p0", sqlConnection);
            sqlCommand.CommandType = System.Data.CommandType.Text;
            sqlCommand.Parameters.AddWithValue("@p0", model.catid);

            sqlConnection.Open();

            using (var reader = sqlCommand.ExecuteReader())
            {
                while (reader.Read())
                {
                    model.items.Add(new CategoryTreeItemModel
                    {
                        catid = (int)reader["ID"],
                        subcatid = (int)reader["CATID"],
                        text = reader["Subcategories"].ToString()
                    });
                }
            }
        }
    }



}

public class CategoryRootTreeModel
{
    public CategoryRootTreeModel()
    {
        this.items = new List<CategoryTreeItemModel>();
    }

    public string text { get; set; }

    public bool expanded { get; set; }

    public int catid { get; set; }

    public List<CategoryTreeItemModel> items { get; set; }
}

public class CategoryTreeItemModel
{
    public string text { get; set; }

    public int catid { get; set; }

    public int subcatid { get; set; }
}

然后可以在您的 aspx 文件中调用它，例如

<%= GetTreeViewJson() %>

这将输出一个非常长的字符串，例如...

[{"text":"Projects","expanded":true,"catid":1,"items":[{"text":"Residential Projects","catid":1,"subcatid":1},{"text":"Commercial Projects","catid":2,"subcatid":1},{"text":"Residential Apartment","catid":3,"subcatid":2},{"text":"Independent/Builder Floor","catid":4,"subcatid":2},{"text":"Independent House/Villa","catid":5,"subcatid":2},{"text":"Residential Land","catid":6,"subcatid":2},{"text":"Studio Apartment","catid":7,"subcatid":2},{"text":"Farm House","catid":8,"subcatid":2},{"text":"Service Apartments","catid":9,"subcatid":2},{"text":"Commercial Shops","catid":10,"subcatid":3},{"text":"Commercial Showrooms","catid":11,"subcatid":3},{"text":"Commercial Office/Space","catid":12,"subcatid":3},{"text":"Commercial Land/Inst. Land","catid":13,"subcatid":3}]},{"text":"Residential","expanded":true,"catid":2,"items":[{"text":"Residential Projects","catid":1,"subcatid":1},{"text":"Commercial Projects","catid":2,"subcatid":1},{"text":"Residential Apartment","catid":3,"subcatid":2},.....]

现在我们已经将序列化数据放入我们的 View 中，我们可以轻松地将其添加到 kendo 数据源中，例如...

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <script type="text/javascript" src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

    <div id="list1"></div>

    <script type="text/javascript">

        $(function () {
            $('#list1').kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },
                dataSource:<%= GetTreeViewJson() %>
            });
        });
    </script>
</asp:Content>

现在用这种方式做有点老套，因为我宁愿通过 ajax 返回一个很好的 JSON 响应，但最终得到一个非常简单的列表，如 JS fiddle 所示。

更多信息:

要从 TreeView 中获取选中的值，您可以遵循 Telerik 提供的 API 指南，尤其是检查事件。

http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#events-check

这是一个示例: http://demos.telerik.com/kendo-ui/treeview/checkboxes

在示例中，他们正在响应 check事件并使用函数创建 javascript 数组 checkedNodeIds(nodes, checkedNodes)这是他们作为示例提供的功能。您可以调整它以更改页面上的文本框的值，例如。

<asp:TextBox runat="server" ID="CheckedFields" Text="" /><asp:Button runat="server" ID="SaveFields" Text="Save Fields" OnClick="SaveFields_Click" />

<div id="list1"></div>

<script type="text/javascript">

    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].checked) {
                checkedNodes.push(nodes[i].catid);
            }

            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }

    // show checked node IDs on datasource change
    function onCheck() {
        var checkedNodes = [],
            treeView = $("#list1").data("kendoTreeView")
        checkedNodeIds(treeView.dataSource.view(), checkedNodes);
        $('#<%= CheckedFields.ClientID %>').val(checkedNodes.join(', '));
    }

    $(function () {
        $('#list1').kendoTreeView({
            checkboxes: {
                checkChildren: true
            },
            check: onCheck,
            dataSource:<%= GetTreeViewJson() %>
        });
    });
</script>

这将使用 'checkedNodes.join(',')' 方法触发将 id 更改为逗号分隔的数组。现在您会发现您可能需要查找更多信息，但是每个 node在数组中 nodes[]包含您从可用的代码中传入的所有字段(加上一些额外的)，您可以非常有创意地跟踪您选中的选项。

干杯