jQWidget - jqxGrid 여러 헤더 행 (예 : jqGrid)

상위 머리글 행 그룹이 낮은 머리글 행 열 이름 세트에 걸쳐 있도록 여러 헤더 행을 표시하려고합니다. 나는 당신이 jqGrid에서 이것을 할 수 있다는 것을 알고있다. 그 예는 다음과 같습니다.jQWidget - jqxGrid 여러 헤더 행 (예 : jqGrid)

jQuery("#samples").jqGrid('setGroupHeaders', { 
useColSpanStyle: true, 
groupHeaders:[ 
    {startColumnName: 'totalweight', numberOfColumns: 6, titleText: 'Count'}, 
    {startColumnName: 'bellyburst', numberOfColumns: 3, titleText: 'Damaged'}, 
    {startColumnName: 'a', numberOfColumns: 6, titleText: 'Weight'}, 
    {startColumnName: 'fish', numberOfColumns: 2, titleText: 'Quality'}, 
] 
});

출처

2013-02-12 Larry

Triand jqgrid는 JQWidget JQXGrid와 같은가요? 나는 둘 사이에 혼란 스럽다. – CleanBold

@cleanbold 둘 다 다른 도구가 아닙니다. jQGrid와 JQX Grid는 같지 않습니다. –

jqxGrid에서 이러한 기능을 보지 않았습니다. 그리드가 꽤 정적이라면 그 행을 수동으로 추가 할 수 있지만 번거로운 솔루션이 될 수 있습니다. 당신이 그것을 시도한다면, 너무 많은 것이 그 div 안에서 움직이기 때문에 jqxGrid div 밖에 html을 넣어야한다. 그것들은 당신의 HTML을 스킨으로 그리드의 일부분 인 것처럼 보입니다.

다른 해결책은 서브 제목을 사용할 수 있습니다. 열을 정의 할 때이를 아카이브 할 수 있습니다. 헤더를 반환하는 렌더러를 추가 할 수 있습니다. 시도하지는 않았지만 헤더에 HTML을 반환하고 자막을 만들 수 있다고 확신합니다.

출처

2014-01-10 15:28:13 NLemay

jQWidget JQX 그리드에 도입 된 컬럼 계층 구조 옵션을 사용할 수 있다고 생각합니다. 아래의 예를 참조하십시오.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title id='Description'>This sample illustrates the Columns Hierarchy feature of jqxGrid. 
    </title> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript" src="../../scripts/jquery-1.11.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/jqxmenu.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.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/jqxcheckbox.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="../../scripts/demos.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      // prepare the data 
      var source = 
      { 
       datatype: "xml", 
       datafields: [ 
        { name: 'SupplierName', type: 'string' }, 
        { name: 'Quantity', type: 'number' }, 
        { name: 'OrderDate', type: 'date' }, 
        { name: 'OrderAddress', type: 'string' }, 
        { name: 'Freight', type: 'number' }, 
        { name: 'Price', type: 'number' }, 
        { name: 'City', type: 'string' }, 
        { name: 'ProductName', type: 'string' }, 
        { name: 'Address', type: 'string' } 
       ], 
       url: '../sampledata/orderdetailsextended.xml', 
       root: 'DATA', 
       record: 'ROW' 
      }; 
      var dataAdapter = new $.jqx.dataAdapter(source, { 
       loadComplete: function() { 
       } 
      }); 
      // create jqxgrid. 
      $("#jqxgrid").jqxGrid(
      { 
       width: 850, 
       source: dataAdapter, 
       pageable: true, 
       autorowheight: true, 
       altrows: true, 
       columnsresize: true, 
       columns: [ 
        { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 }, 
        { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 }, 
        { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 }, 
        { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 }, 
        { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 }, 
        { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 }, 
        { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 }, 
        { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 }, 
        { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 } 
       ], 
       columngroups: 
       [ 
        { text: 'Product Details', align: 'center', name: 'ProductDetails' }, 
        { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' }, 
        { text: 'Location', align: 'center', name: 'Location' } 
       ] 
      }); 
     }); 
    </script> 
</head> 
<body class='default'> 
    <div id="jqxgrid"> 
    </div> 
</body> 
</html>

출처

2016-02-09 06:58:03

jQWidget - jqxGrid 여러 헤더 행 (예 : jqGrid)

답변

관련 문제