Кто-нибудь использовал jquery flexigrid с ASP.NET MVC3? - PullRequest
Новая
       19

Кто-нибудь использовал jquery flexigrid с ASP.NET MVC3?

2 голосов
/ 17 февраля 2012

Я пытаюсь использовать flexigrid с asp.net MVC3. Я не вижу онлайн примеров для этого. Кто-нибудь делал это? Если да, можете ли вы вставить сюда небольшой фрагмент кода, пожалуйста?

спасибо

1 Ответ

6 голосов
/ 17 февраля 2012

flexgrid - это клиентский элемент управления, который не зависит от сервера. Вики содержит пример с описанием различных свойств, которые вы можете использовать.

Чтобы вы могли настроить представление: 

<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>

и контроллер, который будет возвращать структуру JSON, которую ожидает flexgrid: 

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