我的x-editable是结合BootstrapTable一起使用的,如需要将x-editable和BootstrapTable整合,请参考 BootstrapTable结合x-editable实现单元格编辑。
使用x-editable进行编辑时候,其编辑框太小了,如图

于是想办法将其设置大一点,首先想到的是通过css进行修改,于是用浏览器检查了编辑框元素,发现了如下补齐:

当时就想这大概是使用JS生成出来的,于是全局搜索了一下JS源代码,最后从bootstrap-editable.js找到了如下源代码:

图中inputclass: 'input-large',以及rows: 7都是前面检查元素时候出现过的,因此可以联想到是这个地方配置了这些参数,那么我们可以通过配置来实现样式的改变,于是在编辑框配置中加入两句就好了

最终效果如图:

网友评论