0

我需要帮助来对齐这张桌子。我不知道设计工作。如何对齐和调整每列的大小，以及窗口中全尺寸的表格？

我想要所有自动对齐。宽度和高度（全尺寸）。我的代码：

$(document).ready(function () {
        source =
        {
            datatype: "xml",
            datafields: [
                { name: 'User', type: 'string' },
                { name: 'AccessGroup', type: 'string' },
                { name: 'FolderAccess', type: 'string' },
                { name: 'RequestDate', type: 'Date' },
                { name: 'SituationDesc', type: 'string' },
                { name: 'Approver', type: 'string' },
                { name: 'ApprovalDate', type: 'Date' },
                { name: 'BusinessJustification', type: 'string' },
                { name: 'AllBusinessJustification', type: 'string' },
                { name: 'UserRequestor', type: 'string' }
            ],
            async: false,
            record: 'Table',
            url: 'Tickets.aspx/GetTickets',
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
        contentType: 'application/json; charset=utf-8'}
        );
        $("#jqxgrid").jqxGrid(
        {
            width: 3000,
            source: dataAdapter,
            theme: 'classic',
            autoheight: true,
            columns: [
              { text: 'User', datafield: 'User', widht: 'auto' },
              { text: 'Access Group', datafield: 'AccessGroup', widht: 'auto' },
              { text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto' },
              { text: 'Request Date', datafield: 'RequestDate', widht: 'auto' },
              { text: 'Situation', datafield: 'SituationDesc', widht: 'auto' },
              { text: 'Approver', datafield: 'Approver', widht: 'auto' },
              { text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto' },
              { text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto' },
              { text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto' },
              { text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' },

            ]
        });
    });

<body>
<form id="form1" runat="server">
<div>
    <div align="center" style="width: 100%; height: 100%;">
        <img src="image/NdriveBanner.png" align="center" />
    </div>
    <br />
    <br />
    <div id="jqxgrid">
    </div>
    <br />
    <br />
    <div align="center" style="width: 100%; height: 100%;">
        <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/image/home_back_48.png"
            NavigateUrl="~/home.aspx">homepage</asp:HyperLink>
    </div>
</div>
</form>

4

2 回答 2

0

jqgrid 为每列提供 align 属性，以对齐标题，您需要在 jqgrid css 中更改为标题的相应调用。

对于列中的对齐，您可以像这样添加

$("#jqxgrid").jqxGrid(
        {
            width: 3000,
            source: dataAdapter,
            theme: 'classic',
            autoheight: true,
            columns: [
              { text: 'User', datafield: 'User', widht: 'auto',align="center" },
              { text: 'Access Group', datafield: 'AccessGroup', widht: 'auto',align="center" },
              { text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto',align="center" },
              { text: 'Request Date', datafield: 'RequestDate', widht: 'auto',align="center" },
              { text: 'Situation', datafield: 'SituationDesc', widht: 'auto',align="center" },
              { text: 'Approver', datafield: 'Approver', widht: 'auto' ,align="center"},
              { text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto',align="center" },
              { text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto',align="center" },
              { text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto',align="center" },
              { text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' ,align="center"},

            ]
        });
于 2013-07-04T05:30:20.637 回答
0

这是一个示例代码，它显示了如何以百分比设置网格的大小，以便自动调整大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample, the Grid's size is set in percentages. When you resize the browser's window, the Grid's Width and Height will be automatically adjusted. The "width" and "height" properties of jqxGrid in this sample are set to "50%"</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();

            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: '50%',
                height: '50%',
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                theme: theme,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox',  datafield: 'name', width: '20%' },
                  {
                      text: 'Product', datafield: 'productname', width: '35%'
                  },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', width: '15%',  cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>
于 2013-07-04T05:15:57.227 回答