0

この記事に出くわし、リンク テキストを読んで、この記事には、自分のサイトで提供したいもののスクリーン ショットがありました。これは私が欲しいものです、 代替テキスト

jqGrid は最善の方法ですか? 私が欲しいのは、その検索パラメーター インターフェイスだけです。次に取り組むタブ付きウィンドウに表示したい検索結果。

4

2 に答える 2

1

JqG​​rid は、画像に示されている検索コントロールを自動的に構築します。したがって、画像にあるものがあなたが望むものである場合、はい、JqGridが道です。それは、質問に含まれているスクリーンショットを作成するために使用したものだからです。

当然、このコントロールは JqGrid に基づいているため、それを使用する必要があります。検索コントロールは "スタンドアロン" ではありません (少なくとも、設計によるものではありません)。ただし、グリッドは非常に構成可能であるため、必要な外観を得ることができる場合があります.

グリッドを使用できない場合は、フィルター/検索コントロールを使用できない可能性があります。ただ、HTMLなのでコピーは簡単です。

于 2009-07-15T11:50:44.923 に答える
1

独自のフォームとコントロールを検索し、その結果を jqGrid に表示するとします。オンラインで見つかった解決策のほとんどは、jqGrid 独自の検索コントロールを使用していますが、これは問題に適したオプションではない可能性があります。

これを達成する方法の簡単な例を示します。

1) 必要に応じて検索フォームを作成します。

@using (Html.BeginForm("Index", "Campaign", FormMethod.Post, new { id = "searchCampaigns" }))
{
    <table class="DetailsTable" cellpadding="2" cellspacing="1">
        <tr>
            <td>Title</td>
            <td>@Html.TextBoxFor(A => A.Titulo, new { Id = "search_title", })</td>
            <td>Created by</td>
            <td>@Html.DropDownListFor(A => A.CreatedByUserId, Model.UserList, new { Id = "search_createdBy" })
            </td>
        </tr>
        <tr>
            <td> </td>
            <td colspan="3"><button type="button" onclick="javascript:search();">
                    Search !</button>
            </td>
        </tr>
    </table>

2)

これらの検索フィールドを読み取るために、検索機能を実装します。

<script type="text/javascript">
    function search()
    {
        var searchValue_title = document.getElementById("search_title");
        var searchValue_createdBy = document.getElementById("search_createdBy");

        var extraQueryParameters = "";

        extraQueryParameters = "?title=" + searchValue_title.value;
        extraQueryParameters = extraQueryParameters + "&createdBy=" + searchValue_createdBy.value;

        jQuery("#SearchResults").jqGrid().setGridParam({url : '@Url.Action("GridData")' + extraQueryParameters}).trigger("reloadGrid")

    }
</script>

実際には @HTML.TextBoxFor(...) を使用して入力要素を作成する必要はないことに注意してください。MVC 3 の dataAnnotation を利用したくない場合は、単純な要素で十分です。

検索機能は、すべての検索パラメーターを連結し、それらを GridData アクションに追加するだけです。URL はhttp://mySite/Controller/GridData?title=hello&createdBy=3のようになります。これは、グリッドに供給されます。

3) 次の行に沿って MVC コントローラー関数を実装します。

public JsonResult GridData(string sidx, string sord, int? page, int? rows, int? createdBy, string title)
{
    using (MyDataContext ddc = new MyDataContext())
    {
        var baseQuery = ddc.MyCampaign.AsQueryable(); 
        string gridCaption = "Search Results";

        if (!string.IsNullOrEmpty(titulo))
            baseQuery = baseQuery.Where(A => A.Title.Contains(title));

        if(createdBy.HasValue())
            baseQuery = baseQuery.Where(A=>A.idCreationUser = createdBy.Value);

        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows.HasValue ? rows.Value : 10;
        int totalRecords = baseQuery.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var ds = (from A in baseQuery
                    select new
                    {
                        ID = A.ID,
                        Title = A.Title,
                    }).OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize).ToList();

        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = from A in ds
                    select new
                    {
                        id = A.ID,
                        cell = new[] { A.ID.ToString(), A.Title }
                    },
            caption = gridCaption
        };


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

4) 以下の点にご注意ください。

C# 関数のパラメーター名は、[検索] ボタンをクリックしたときにクエリ文字列ビルドで渡される引数と一致する必要があります。.OrderBy(sidx + " " + sord) メソッドでは、Dynamic Linq DLL を使用する必要があります。これは、 http ://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part- で入手できます。 1-using-the-linq-dynamic-query-library.aspx これにはバグがありますが、ほとんどの場合は機能します:)

于 2011-12-10T21:27:24.470 に答える