2

単純なレポートページがあります。データを入力して送信するときに、同じページに非同期でjqgridをロードするテキストボックスがいくつかあります。JQGridのMVCバージョンを使用しています。

jqgridがないと、テーブルデータをロードでき、ビューは次のようになります。

@using (Ajax.BeginForm("GetReport", new AjaxOptions {UpdateTargetId = "result", HttpMethod = "Post" }))
{
        <div class="editor-label">Start Date</div>
    <div class="editor-field">@Html.Editor("StartDate", "DateTime")</div>

    <div class="editor-label">End Date</div>
    <div class="editor-field">@Html.Editor("EndDate", "DateTime")</div>

    <input type="submit" value="Submit" />
}


<div id="result"></div>

結果がテーブルになる代わりに、その場所にjqGridを表示したいと思います。以下のように定義されるjqGrid。

@Html.Trirand().JQGrid(Model.ReportGrid, "ReportGrid")

どうすればこれを達成できますか？

4

2 に答える 2

1

私はそれをどのように行うかをステップアウトします。これはあなたにも役立つと思います（MVC3バックエンドを使用して多数のjqGridを構築します。

すでにHTMLコンポーネントがありますが、このようなものを使用することもできます。

<div id="ExampleGridContainer" >
    <table id="ExampleGridName"  class="scroll" cellpadding="0" cellspacing="0" ></table>
    <div id="ExampleGridPager" class="scroll" style="text-align:center;"></div>
</div>

次に、Javascriptについて、両方への参照を含める必要があります（この例では、場所として英語を使用しています）

<script src="@Url.Content("~/Scripts/trirand/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/trirand/jquery.jqGrid.min.js")" type="text/javascript"></script>

_Layout.chtmlのいずれかである場合、または_Layout.chtmlに含まれている場合は、これをページに含めることができます。

次に、ビューのスクリプト部分内で、次のようなものを作成できます。

<script type="text/javascript">
    $(document).ready(function () {

    //initalize jqGrid
    $('#ExampleGridName').jqGrid({
        datatype: 'json',
        url: '/ControllerName/ActionName',
        colNames: [ 'ColumnOneName', 'ColumnTwoName']
        colModel: [
        { name: 'ColumnOneName', //etc}
        { name: 'ColumnTwoName', //etc}
        ],
        pager: $('#ExampleGridPager'),
        rowNum: 5,
        rowList: [5,10,20],
        sortname: 'ColumnOneName',
        //etc
        //rest of grid settings
    });
});
</script>

上記の例では、ビューが表示され、readyイベントが処理されるときにプロパティが入力され、グリッドがURLに移動してデータを検索しますdatatype: 'json'。url:後で別のアクションの後でこれを実行する場合、または動的に繰り返す場合は、プロパティdatatype: 'local',なしで開始できurl:ます。

これらのプロパティを設定してグリッドをリロードするときは、次のいずれかになります。

//set the `datatype:` and `url:` properties and load the grid
$('#ExampleGridName').jqGrid('setGridParam', { datatype: 'json', url: '/ControllerName/ActionName' }).trigger('reloadGrid', [{ page: 1}]);

//reload the grid if the `datatype:` and `url:` properties are already configured
$('#ExampleGridName').jqGrid().trigger('reloadGrid', [{ page: 1}]);

コントローラーには、データの要求に応答し、JSON形式で結果を生成できるアクションがあります。これは、動的ロードを使用してMVC3 jqGridを起動して実行する方法の基本的な例を超えるものではなく、より高度なフィルタリング、検索などのオプションが多数あります。

public ActionResult ActionName(string sidx, string sord, int page, int rows, bool _search, string filters)
{
 //load data from somthing, 
IQuerable<Object> results = database.getresults //whatever you want to populate a set of data really

int totalRecords = results.Count();

var pagedResults = results.OrderBy(sidx + " " + sord).Skip((page -1) * rows).Take(rows);

    var jsonData = new
    {
        total = (totalRecords + rows - 1) / rows,
        page = page,
        records = totalRecords,
        rows = (
            from tempValue in pagedResults.ToList()                    
            select new
            {
                cell = new string[] {       
                    tempValue.ColumnOneValue,
                    tempValue.ColumnTwoIntValue.ToString(),
                    //Etc
            }).ToArray()

    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}//ActionName

これは、jqGridを表示し、他のアクション/イベントの後に動的に対話するための非常に基本的な方法です。enter code here

于 2013-01-08T17:01:04.530 に答える
1

多くの苦労の末、ここで私がやったことです。メインビューと部分ビューがあります。最初は、メイン ビューには部分ビューが含まれていません。データが送信されると、部分ビューが読み込まれます。

MyReport.cshtml

@{
    ViewBag.Title = "Report";
}
<h2>Report</h2>  
<br />    
@using (Ajax.BeginForm("GetReportData", new AjaxOptions { UpdateTargetId = "result", HttpMethod = "Post", InsertionMode = InsertionMode.Replace}))
{

     <div class="editor-label">Start Date</div>
    <div class="editor-field">@Html.Editor("StartDate", "DateTime")</div>

    <div class="editor-label">End Date</div>
    <div class="editor-field">@Html.Editor("EndDate", "DateTime")</div>

    <input type="submit" value="Submit" />
}

<div id="result">

</div>

次に、グリッド MyReportPartial.cshtml の部分ビューがあります。

@model MyGridModel
@using Trirand.Web.Mvc    
<link href="@Url.Content("~/Content/theme/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/trirand/i18n/grid.locale-en.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/trirand/jquery.jqGrid.min.js")"></script>

<br />
 @Html.Trirand().JQGrid(Model.Grid, "ReportGrid")

私のコントローラーには次のものがあります

 public ActionResult MyReport()
        {
            var gridModel = new Models.Grid.EmpHeadcountGridModel();
            var grid = gridModel.MyGrid;
            SetupHeadCountGrid(grid, DateTime.Now.ToShortDateString(), DateTime.Now.ToShortDateString());
            return View(gridModel);
        }
        public ActionResult GetReportData(string startdate ,string enddate)
        {
            var gridModel = new Models.Grid.MyGridModel();
            var grid = gridModel.EmpHeadcountGrid;
            SetupHeadCountGrid(grid,costcenterid,startdate,enddate);

            return PartialView("MyReportPartial",gridModel);


        }


        private void SetupHeadCountGrid(JQGrid grid,int costcenterid,string startdate,string enddate)
        {
            grid.ID = "ReportGrid";
            grid.DataUrl = Url.Action("GetHeadcountData") + "?startdate=" + startdate + "&enddate=" + enddate;
        }

       public JsonResult GetHeadcountData(string startdate, string enddate)
        {
            DateTime startdt = DateTime.Parse(startdate);
            DateTime enddt = DateTime.Parse(enddate + " 23:59:59");

            var gridModel = new Models.Grid.MyGridModel();

            var query= { soem query using date criteria}
            gridModel.MyGrid.DataSource = query;
            return gridModel.MyGrid.DataBind();
        }
于 2013-01-08T19:24:00.593 に答える