jquery - 有人使用 jquery flexigrid 和 ASP.NET MVC3 吗？

Question

我正在尝试将 flexigrid 与 asp.net MVC3 一起使用。 我看不到任何在线示例。 有人这样做过吗？ 如果是，您可以在此处粘贴一些代码片段吗？

谢谢

Answer 1

flexgrid 是一个与服务器端无关的客户端控件。 Wiki 包含 example with description您可以使用的不同属性。

所以你可以设置一个 View :

<script src="@Url.Content("~/Scripts/flexigrid.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#flex1").flexigrid({
            url: '@Url.Action("staff")',
            dataType: 'json',
            colModel: [
                        { display: 'ID', name: 'id', width: 40, sortable: true, align: 'left' },
                        { display: 'First Name', name: 'first_name', width: 150, sortable: true, align: 'left' },
                        { display: 'Surname', name: 'surname', width: 150, sortable: true, align: 'left' },
                        { display: 'Position', name: 'email', width: 250, sortable: true, align: 'left' }
                ],
            searchitems: [
                        { display: 'First Name', name: 'first_name' },
                        { display: 'Surname', name: 'surname', isdefault: true },
                        { display: 'Position', name: 'position' }
                ],
            sortname: "id",
            sortorder: "asc",
            usepager: true,
            title: "Staff",
            useRp: true,
            rp: 10,
            showTableToggleBtn: false,
            resizable: false,
            width: 700,
            height: 370,
            singleSelect: true
        });
    });
</script>

<table id="flex1"></table>

以及一个将返回 flexgrid 期望的 JSON 结构的 Controller :

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Staff()
    {
        // TODO: obviously the data usually comes from a database
        // so you could define a view model that will be populated
        // but which must contain the following structure:
        var data = new 
        {
            page = 1,
            total = 3,
            rows = new[]
            {
                new 
                { 
                    id = 1,
                    cell = new 
                    {
                        id = 1,
                        first_name = "first name",
                        surname = "surname",
                        email = "f@f.com",
                        position = "pos 1"
                    }
                },
                new 
                { 
                    id = 2,
                    cell = new 
                    {
                        id = 2,
                        first_name = "first name 2",
                        surname = "surname 2",
                        email = "f2@f.com",
                        position = "pos 2"
                    }
                },
                new 
                { 
                    id = 3,
                    cell = new 
                    {
                        id = 3,
                        first_name = "first name 3",
                        surname = "surname 3",
                        email = "f3@f.com",
                        position = "pos 3"
                    }
                },
            }
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }
}