javascript - jqxgrid复选框列大小

Question

我有一个jqxgrid，其中有一列的columntype:'checkbox'。我想让复选框的大小更大。我尝试使用 javascript 来实现类似

$(".jqx-checkbox-default").children().css("width","19px");

但它不能像我应该的那样工作，因为当我选中一个框时，网格中的所有复选框都会再次变小。我也尝试过使用 cellrenderer:

<div style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; cursor: auto;" id="jqxWidget3d79f0d1" tabindex="0" class="jqx-widget jqx-checkbox">
    <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
        <div style="width: 19px; height: 19px;">
            <span style="width: 19px; height: 19px;"></span>
        </div>
    </div>
    <div style="clear: both;">
    </div>
</div>

但是我无法检查(小部件 ID 也存在问题)。 有更“正常”的解决方案吗？

谢谢，亚历克斯

Answer 1

您可以覆盖网格使用的样式

.jqx-checkbox-default > div, .jqx-checkbox-default > div > span {
    width: 19px !important;
    height: 19px !important;
}

.jqx-checkbox-check-checked {
    background-size: 19px 19px;
}

第一个 block 是调整复选框容器的大小，第二个 block 是调整用于检查状态的图像的大小。

我在网格复选框选择演示 ( http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/checkboxselection.htm?arctic ) 上对此进行了测试，并将这些样式注入(inject)到 Chrome 使用的页面样式中。