2012-02-17 19 views

答えて

6

は、フレキシブルグリッドコントロールはとらわれない、サーバ側でクライアント側のコントロールです。 Wikiには、使用できるさまざまなプロパティのexample with descriptionが含まれています。

だからできたセットアップビュー:

<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構造戻りますコントローラ:私もMVC3統合パッケージを持っている選択肢を作った

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 = "[email protected]", 
         position = "pos 1" 
        } 
       }, 
       new 
       { 
        id = 2, 
        cell = new 
        { 
         id = 2, 
         first_name = "first name 2", 
         surname = "surname 2", 
         email = "[email protected]", 
         position = "pos 2" 
        } 
       }, 
       new 
       { 
        id = 3, 
        cell = new 
        { 
         id = 3, 
         first_name = "first name 3", 
         surname = "surname 3", 
         email = "[email protected]", 
         position = "pos 3" 
        } 
       }, 
      } 
     }; 

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

スタッフの機能から上記のビューを返すべきではありませんか? – alice7

+0

@ alice7、いいえ、 'Staff'アクションはJSON形式で返されたデータを取り込むためにAJAXを使ってflexgridを呼び出します。テーブルを含む 'Index.cshtml'ビューです。 –

+0

ありがとう、意味がある – alice7

関連する問題