Plugin - Kendo UI - listview

Razer

基础功能(从本地获取数据)

后台

public ActionResult Index()
{
    return View(db.Users);
}

前台

@(Html.Kendo().ListView(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
)

<script type="text/x-kendo-tmpl" id="template">
        <p>#:UserName#</p>
        <p>#:PassWord#</p>
</script>

 

HTML

基础功能

后台

public ActionResult Getdata()
{
    return Json(db.Users);
}

前台

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
    <h3>#:UserName#</h3>
    <p>#:PassWord#</p>
</script>

脚本

<script>
    $(function () {
        $("#listView").kendoListView({
            dataSource: // 数据源设置
                    {
                        transport:
                        {
                            // 读取设置
                            read:
                            {
                                url: "/ListView/GetData",
                                dataType: "json",
                                type: "POST"
                            },
                        }
                    },
            template: kendo.template($("#template").html()),
        });
    });
</script>

 

方法函数

var listView = $("#FileList").data("kendoListView");

// 获取已被选择的数据
// 获得一个array
listView.select();

// 移除项
listView.remove();