任何人使用ASP.NET MVC3的jquery flexigrid？

Question

我试图使用flexigrid与asp.net MVC3.我看不到任何在线示例.有没有人这样做过？如果是的话,你可以在这里粘贴一些代码片段吗？

谢谢

Answer 1

flexgrid是一个客户端控件,与服务器端无关.Wiki包含一个示例,其中包含您可以使用的不同属性的描述.

所以你可以设置一个视图:

<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结构:

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);
    }
}