对齐网格JQuery

Align Grid JQuery

本文关键字：JQuery 网格 对齐      更新时间：2023-09-26

我需要帮助来对齐这个表。我不懂设计。我如何在窗口中对齐并调整每一列的大小以及表格的大小？

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

$(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>

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

<!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>

jqgrid为每列提供align属性，要对齐页眉，您需要在jqgridcss中更改为相应的页眉调用。

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

$("#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"},
            ]
        });
相关文章：