使用mvc3 razor的jqGrid水平滚动条/网格宽度

时间:2012-10-09 16:49:02

标签: asp.net-mvc-3 razor jqgrid scrollbar

Aplologies如果在某个地方之前发布过,我看不出描述这个问题的问题....

我正在使用mvc3 / razor和jqGrid,似乎它没有正确计算宽度 - 它正在切断Last列。

有人可以告诉我为什么吗?

我正在使用一个未更改的ui.jqgrid.css和jQueryUI themeroller主题,如果这有所不同!

我的Index.cshtml:

@{
    ViewBag.Title = "Index";
}

<h2>@ViewBag.Message</h2>
<div id="content">
    <div id="content-left">
        @Html.Partial("SearchPanel")
    </div>
    <div id="content-main">
        <table id="jpgCustomers" cellpadding="0" cellspacing="0"></table>
        <div id="jpgpCustomers" style="text-align:center;"></div>
        <div id="dlgCustomer"></div>
    </div>
</div>
<div id="CustomerEdit"></div>
@section JavaScript 
{
<script type="text/javascript">

    $(document).ready(function () 
    {
        $('#jpgCustomers').jqGrid({
            //url from wich data should be requested
            url: '@Url.Action("Customers")',
            //type of data
            datatype: 'json',
            //url access method type
            mtype: 'POST',
            //columns model
            //columns names
            colNames: ['No Of Banks','Name', 'FullName', 'Description', 'Enabled', 'Tranbase', 'Group ID', 'Email Address', 'Phone', 'Pager', 'Fax', 'Comments', ' '],
            colModel: [
                        //displayed Columns
                        { name: 'BankLinks', index: 'BankLinks', align: 'center', width:40, editable:false },
                        { name: 'LogonName', index: 'LogonName', align: 'left', width:80, editable:true },
                        { name: 'FullName', index: 'FullName', align: 'left', editable:true, width: 200 },
                        { name: 'Description', index: 'Description', align: 'left', width: 200, editable:true, edittype:'textarea'},
                        { name: 'Enabled', index: 'Enabled', align: 'center', width: 60, editable:true},
                        { name: 'IsTranbase', index: 'IsTranbase', align: 'center', width: 60, editable:true, formatter: YesNoFormatter, unformat:YesNoUnformatter, edittype:'checkbox', editoptions:{value:'1:0'}},

                        //Hidden Columns
                        { width: 60,name: 'GroupID', index: 'GroupID', hidden: true, editable:true, editrules:{required:false, edithidden:true} },
                        { width: 60,name: 'Email', index: 'Email', hidden: true, editable:true, editrules:{required:false, edithidden:true}, editype:'email' },
                        { width: 60,name: 'Phone', index: 'Phone', hidden: true, editable:true, editrules:{required:false, edithidden:true, number: true, minValue: 0 }, editype:'text'},
                        { width: 60,name: 'Pager', index: 'Pager', hidden: true, editable:true, editrules:{required:false, edithidden:true, number: true, minValue: 0 }, editype:'text'},
                        { width: 60,name: 'Fax', index: 'Fax', hidden: true, editable:true, editrules:{required:false, edithidden:true, number: true, minValue: 0 }, editype:'text'},
                        { width: 60,name: 'Comments', index: 'Comments', align: 'left', hidden: true, editable:true, edittype:'textarea'},

                        //Action column
                        { name: 'myac', width:80, fixed:true, sortable:false, resize:false, editable:false, formatter:'actions', formatoptions: { 
                                                                                                                    keys:true, 
                                                                                                                    delOptions: { url : encodeURI('@Url.Action("Delete")') } 
                                                                                                                 }
                        }
                      ],
            //pager for grid
            pager: $('#jpgpCustomers'),
            //number of rows per page
            rowNum: 10,
            //initial sorting column
            sortname: 'FullName',
            //initial sorting direction
            sortorder: 'asc',
            //we want to display total records count
            viewrecords: true,
            //grid height
            height: '100%',
            editurl: encodeURI('@Url.Action("Edit")'),
            //subgrid
            subGrid: true,
            //subrid model
            subGridRowExpanded: function(subgrid_id, row_id) {
                var subgrid_table_id, pager_id;
                subgrid_table_id = subgrid_id+"_t";
                pager_id = "p_"+subgrid_table_id;
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
                $("#"+subgrid_table_id).jqGrid({
                    url: encodeURI('@Url.Action("BankLinks")' + '?id=' + row_id),
                    datatype: 'json',
                    mtype: 'POST',
                    colNames: ['Bank', 'Folder', 'Enabled'],
                    colModel: 
                    [
                        {name:"Bank",index:"Bank",width:20,key:true},
                        {name:"Folder",index:"Folder",width:20},
                        {name:"Enabled",index:"Enabled",width:10,align:"left"}
                    ],
                    rowNum:20,
                    pager: pager_id,
                    sortname: 'Bank',
                    sortorder: "asc",
                    viewrecords: true,
                    height: '100%'
                });
                $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
            },
        });
        $("#jpgCustomers").jqGrid('navGrid', '#jpgpCustomers', 
                    { add: true, del: true, edit: true, search: false},
                    { width: 'auto', url: '@Url.Action("Edit")'},
                    { width: 'auto', url: '@Url.Action("Edit")' },
                    { width: 'auto', url: '@Url.Action("Delete")' });

    });

    function YesNoFormatter(cellvalue, options, rowObject) {
        var cellValueInt = parseInt(cellvalue);
        if (cellValueInt == 1)
            return "<img src='@Url.Content("~/Content/images/tick.gif")' title='"+ cellvalue + "' />";
        else 
            return "<img src='@Url.Content("~/Content/images/cross.gif")' title='"+ cellvalue + "' />";
    };

    function YesNoUnformatter (cellvalue, options, cell) {
        return $('img', cell).attr('title');
    };

    </script>
}

我的控制器操作:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Customers(JqGridRequest request)
    {
        ISession session = NHibernateHelper.GetCurrentSession();
        try
        {
            IEnumerable<Customer> customers = session.QueryOver<Customer>().List().Skip<Customer>(0).Take<Customer>(request.RecordsCount);

            int totalRecords = customers.Count();

            //Prepare JqGridData instance
            JqGridResponse response = new JqGridResponse()
            {
                //Total pages count
                TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
                //Page number
                PageIndex = request.PageIndex,
                //Total records count
                TotalRecordsCount = totalRecords
            };
            //Table with rows data
            foreach (Customer customer in customers)
            {
                response.Records.Add(new JqGridRecord(Convert.ToString(customer.Id), new List<object>()
            {
                customer.Banks.Count(),
                customer.LogonName,
                customer.FullName,
                customer.Description,
                customer.Enabled,
                customer.IsTB,
                customer.GroupID,
                customer.Email,
                customer.Phone,
                customer.Pager,
                customer.Fax,
                customer.Comments
            }));
            }

            //Return data as json
            return new JqGridJsonResult() { Data = response };

        }
        catch (Exception ex)
        {
            return HttpNotFound();
        }

    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult BankLinks(int Id, JqGridRequest request)
    {
        ISession session = NHibernateHelper.GetCurrentSession();

        Customer customer = session.Get<Customer>(Id);

        int totalRecords = customer.Banks.Count();

        //Prepare JqGridData instance
        JqGridResponse response = new JqGridResponse()
        {
            //Total pages count
            TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
            //Page number
            PageIndex = request.PageIndex,
            //Total records count
            TotalRecordsCount = totalRecords
        };

        foreach (Bank bank in customer.Banks.ToList<Bank>())
        {
            //IEnumerable<CustomerBank> bankLink = session.CreateQuery("from CustomerBank where Bank_ID = :bankId").SetParameter("bankId", bank.Id).List<CustomerBank>();
            CustomerBank bankLink = session.QueryOver<CustomerBank>().Where(x => x.BankId == bank.Id).Where(y => y.CustomerId == customer.Id).List<CustomerBank>().FirstOrDefault();
            //IEnumerable<CustomerBank> bankLink2 = session.QueryOver<CustomerBank>().List<CustomerBank>();

            response.Records.Add(new JqGridRecord(null, new List<object>()
            {
                bank.BankCode,
                bank.Folder,
                bankLink.Enabled 
            }));
        }

        return new JqGridJsonResult() { Data = response };
    }

1 个答案:

答案 0 :(得分:0)

在寻找其他东西时找到答案(调整导航栏上的页面编辑框的大小)

请参阅Resize the jqGrid page edit box

这里有一些样式表调整(对于MVC),Oleg已经添加了哪些以及整理了水平滚动条问题,还整理了页面编辑框Sixing问题! - 谢谢Oleg!