Question

我在Dialog中使用jqgrid，但看起来布局坏了：

底部网格的搜索按钮出现两次？
字体太大。

当我将网格显示为普通视图时，没有问题。

index.cshtml打开弹出窗口：

<div id="btnGo">
    <img id="UserProfileLookUp" src="../../Content/images/ui-flag_blue.png" />
</div>
<script>
    $(document).ready(function () {
        $('#btnGo').click(function () {
            $("#Dialog").dialog("open");
        });
        $("#Dialog").dialog({
            modal: true,
            autoOpen: false,
            height: 413,
            width: 626
        });
    }); 
</script>
<div id="Dialog" title="Product Select" style="display: none;">
    @{Html.RenderAction("Test", "Home");}
</div>

实际的jqgrid：

<link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jqGrid/jquery-ui-jqgrid.css")" rel="stylesheet" type="text/css" />
@{ ViewBag.Title = "jqGrid in ASP.NET MVC - Searching [Advanced]"; }
<table id="jqgProducts" cellpadding="0" cellspacing="0">
</table>
<div id="jqgpProducts" style="text-align: center;">
</div>
<div id="dlgSupplier">
</div>
<script id="tmplSupplier" type="text/x-jquery-tmpl">
        ${CompanyName}<br /><br />
        ${Address}<br />
        ${PostalCode}, ${City}<br />
        ${Country}<br /><br />
        ${Phone}<br />
        ${HomePage}
</script>
<script type="text/javascript">
        $(document).ready(function () {

            $('#jqgProducts').jqGrid({
                //url from wich data should be requested
                url: '@Url.Action("Products")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['ProductID', 'ProductName', 'Supplier', 'Category', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
                //columns model
                colModel: [
                            { name: 'ProductID', index: 'ProductID', align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ne'] } },
                            { name: 'ProductName', index: 'ProductName', align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn','nc']} },
                            { name: 'Supplier', index: 'SupplierID', align: 'left',  search: true, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], dataUrl: '@Url.Action("Suppliers")' } },
                            { name: 'Category', index: 'CategoryID', align: 'left', search: true, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], dataUrl: '@Url.Action("Categories")' } },
                            { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left', search: false },
                            { name: 'UnitPrice', index: 'UnitPrice', align: 'left', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, prefix: '$' }, search: false },
                            { name: 'UnitsInStock', index: 'UnitsInStock', align: 'left', search: false }
                          ],
                //pager for grid
                pager: $('#jqgpProducts'),
                //number of rows per page
                rowNum: 5,
                //initial sorting column
                sortname: 'ProductID',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                //grid height
                height: '100%'
            });
            $('#jqgProducts').jqGrid('navGrid', '#jqgpProducts', { edit: false, add: false, del: false, search: false }).jqGrid('navButtonAdd', '#jqgpProducts', {
                caption: 'Search',
                buttonicon: 'ui-icon-search',
                onClickButton: function() {
                    $('#jqgProducts').jqGrid('searchGrid', { multipleSearch: true });
                },
                position: 'last',
                title: 'Search'
            });
            $('#dlgSupplier').dialog({ autoOpen: false, bgiframe: true, resizable: false, title: 'Supplier' });
            $('a[data-supplier-id]').live('click', function (e) {
                if (e.preventDefault)
                    e.preventDefault();
                else
                    e.returnValue = false;

                var dialogPosition = $(this).offset();

                $.post('@Url.Action("Edit")', { id: $(this).attr('data-supplier-id') }, function(data) {

                });
            });
        });

</script>

控制器：

public ActionResult Index()
{
   return View();
}

public ActionResult Test()
{
  return PartialView();
}

jqGrid：布局坏了吗？

0 个答案: