Question

我正在使用已经在表格中并排设置的DHTMLX网格，因为这是我似乎已经让它们走这条路的唯一方式。

我想在特定尺寸的显示器上以某种方式自动调整网格，因为我目前似乎无法弄清楚如何操作。它适用于我们的一些客户拥有的较小屏幕，但在更大的显示器上，它们具有更大的开放空间，看起来并不好看。我的代码如下：

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;"]);

有什么我缺少的或者我是否需要进行原型设置？

Answer 1

使用setInitWidthsP功能以百分比形式设置网格宽度。这将自动在更大的屏幕上扩展网格列。

如何在不同的监视器屏幕上自动调整dhtmlxgrid的大小

1 个答案: