Выровнять сетку JQuery

Мне нужна помощь для выравнивания этой таблицы. Я не знаю, как работать с дизайном. Как я могу выровнять и приспособить размер к каждому столбцу и таблицу в полном размере в моем окне?Выровнять сетку JQuery

Я хочу все авто выставить. Ширина и высота (полный размер). Мой код:

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

источник

2013-07-03 CaioVJesus89

Вот пример кода, который показывает, как установить размер сетке в в процентах, так что будет автоматически изменен.

<!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-04 05:15:57 scripto

jqgrid обеспечивает выравнивать свойство каждого столбца, чтобы выровнять заголовок вам нужно изменить в 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-04 05:30:20 Manish

Выровнять сетку JQuery

ответ

Смежные вопросы