kendo ui panelbar 官网地址http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/panelbar/overview
给出三种绑定方式,items,通过绑定xml(sitemap),层级模型
这里通过第三种方式实现panelbar绑定数据,例如举例实现如下;
表一:Category
CREATE TABLE [dbo].[Category](
[CategoryID] [nvarchar](50) NOT NULL,
[CategoryName] [nvarchar](50) NOT NULL,
) ON [PRIMARY]
表二:Product
CREATE TABLE [dbo].[Product](
[ProductID] [nvarchar](50) NOT NULL,
[ProductName] [nvarchar](50) NOT NULL,
[CategoryID] [nvarchar](50) NULL,
) ON [PRIMARY]
其中CategoryID 作为Product表中的外键
看webform页面是怎么实现的
@model IEnumerable<Kendo.UI.Models.Category>
@{
ViewBag.Title = "Menu";
}
<h2>
Menu</h2>
@(Html.Kendo().PanelBar()
.Name("panelbar")
.BindTo(Model, mappings =>
{
mappings.For<Kendo.UI.Models.Category>(binding => binding
.ItemDataBound((item, category) =>
{
item.Text = category.CategoryName;
})
.Children(category => category.Product));
mappings.For<Kendo.UI.Models.Product>(binding => binding
.ItemDataBound((item, product) =>
{
item.Text = product.ProductName;
item.Url = "/Home/Index";//如果换成菜单,可以填写菜单的URl;
})
);
})
)
而Controller中,首先要绑定源数据
public ActionResult Category()
{
ViewBag.Message = "Now get categroy.";
Kendo.UI.Models.kendoEntities db = new Models.kendoEntities();
return View(db.Category);
}
这样就可以显示出来了,截个图看看;
以上通过分类和商品做个举例;
对于菜单一个表来说,我暂时没有好的办法来处理出来,因为ParentMenuID和MenuID都存在一个表中,涉及自身与自身的关联;
因为我的菜单结构比较简单,所以我用了个比较好理解的方法,干脆就分成两个表,一个Parent表和一个Child表,结构类似上面,这样就能用panelbar来实现这种机构菜单;
这都是使用过程中个人体验作为一个记录.