2016-09-20 25 views
1

테이블에서 나란히 설정된 DHTMLX 격자를 사용하고 있습니다. 그런 식으로 이동하는 것처럼 보이는 유일한 방법이었습니다.다른 모니터 화면에서 dhtmlxgrid의 크기를 자동으로 조정하는 방법

현재 특정 크기의 모니터에있을 때 그리드를 자동 크기로 가져오고 싶습니다. 현재 방법을 알 수없는 것처럼 보입니다. 그것은 우리 고객의 일부가 가지고있는 작은 화면에서 작동하지만 더 큰 모니터에서는보기가 좋지 않은 넓은 열린 공간을 가지고 있습니다.

HTML : :

 <table class="table tblExp "> 
         <thead> 
          <tr> 
           <th>Business</th> 
           <th>Personal</th> 
          </tr> 
         </thead> 
         <tbody> 
         <tr> 
          <td > 
           <div id="grdBusExp" style= "width:100%;;height:400px;"></div> 
           <div class="btnBusGrp"> 
            <button class="btn btn-primary" id ="newBusiness" onclick ="addNewBusiness()">Add Expense </button> 
            <button class="btn btn-primary" onclick="busExpGrd.deleteSelectedItem()">Delete Expense</button> 
            </div> 
          </td> 
          <td><div id="grdPrslExp" style="width:100%;height:400px;overflow:auto;"></div> 
           <div class="btnpersGrp"> 
           <button class="btn btn-primary" id="newPersonal" onclick="addNewPersonal()">Add Expense</button> 
           <button class="btn btn-primary" onclick="prlsExpGrd.deleteSelectedItem()">Delete Expense</button> 
            </div> 
          </td> 
         </tr> 
          </tbody> 
        </table> 

the grids: 

    busExpGrd = new dhtmlXGridObject('grdBusExp'); 
       busExpGrd.setStyle("background:#7db9e8;color:white;"); 
       busExpGrd.setImagePath("/codebase36/imgs/"); 
       busExpGrd.setHeader("Id,CMAID,P_B,Description,Amount"); 
       busExpGrd.setInitWidths("50,50,5,375,230"); 
       busExpGrd.enableAutoWidth(true, 882, 500); 
       busExpGrd.setColAlign("center,center,left,left,left"); 
       busExpGrd.setColTypes("ed,ed,ed,ed,ed"); 
       busExpGrd.setColSorting("int,int,str,str,str"); 
       busExpGrd.enableAutoWidth(true); 
       busExpGrd.enableEditEvents(false, true, false); 
       busExpGrd.attachEvent("onEditCell", editBusiness); 
       busExpGrd.attachEvent("onSubAjaxLoad", addNewBusiness); 
       busExpGrd.attachEvent("onBeforeRowDeleted", deleteBusiness); 
       busExpGrd.setCustomSorting(sort_custom, 1); 
       busExpGrd.csv.cell = "|"; 
       busExpGrd.csv.row = "$"; 
       busExpGrd.setColumnHidden(0, true); 
       busExpGrd.setColumnHidden(1, true); 
       busExpGrd.setColumnHidden(2, true); 
       busExpGrd.init(); 
       busExpGrd.attachFooter("TOTAL,#cspan,#cspan,#cspan,{#stat_total}", ["font-weight:bold;", "", "", "", "font-weight:bold;"]); 

prlsExpGrd = new dhtmlXGridObject('grdPrslExp'); 
      prlsExpGrd.setImagePath("/codebase36/imgs/"); 
      prlsExpGrd.setStyle("background:#7db9e8;color:white;"); 
      prlsExpGrd.setHeader("Id,CMAID,P_B,Description, Amount"); 
      prlsExpGrd.setInitWidths("50,50,5,375,230"); 
      prlsExpGrd.enableAutoWidth(true, 1000, 500); 
      prlsExpGrd.setColAlign("left,left,left,left,left"); 
      prlsExpGrd.setColTypes("ed,ed,ed,ed,ed"); 
      prlsExpGrd.setColSorting("int,int,str,str,str"); 
      prlsExpGrd.enableAutoWidth(true); 
      prlsExpGrd.enableEditTabOnly(true); 
      prlsExpGrd.enableEditEvents(false, true, false); 
      prlsExpGrd.attachEvent("onEditCell", editPersonal); 
      prlsExpGrd.attachEvent("onSubAjaxLoad", addNewPersonal); 
      prlsExpGrd.attachEvent("onBeforeRowDeleted", deleteBusiness); 
      prlsExpGrd.setCustomSorting(sort_custom, 1); 
      prlsExpGrd.csv.cell = "|"; 
      prlsExpGrd.csv.row = "$"; 
      prlsExpGrd.setColumnHidden(0, true); 
      prlsExpGrd.setColumnHidden(1, true); 
      prlsExpGrd.setColumnHidden(2, true); 
      prlsExpGrd.init(); 
      prlsExpGrd.attachFooter("TOTAL,#cspan,#cspan,#cspan,{#stat_total}", ["font-weight:bold;", "", "", "", "font-weight:bold;"]); 

내가 놓친 거지 뭔가가 또는 내가 그것을 설정 programeticly해야 할 다음과 같이 내 코드는 간다?

답변

2

격자 크기를 백분율로 설정하려면 setInitWidthsP 함수를 사용하십시오. 그리드 열을 큰 화면에 자동으로 확장합니다.