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

グリッドのサイズをパーセンテージで設定して自動サイズ変更する方法を示すサンプル コードを次に示します。

<!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 に答える
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 に答える