jQuery MiniUI

标题: mini-grid的列等宽且无法调整 [打印本页]
作者: netjava    时间: 2016-11-1 14:01:31     标题: mini-grid的列等宽且无法调整

     在mini-layout里使用mini-grid,结果不管如何设置属性,表格的列都是自动等宽,并且显示后,也无法调整列的宽度.
不知道是什么原因?大致的代码结果如下:
  1. <div id="layout1" class="mini-layout" style="width:100%;height:100%;">
  2.    <div id="hometop" class="header" region="north" showSplit="false" showHeader="false" height="122">
  3.          ...
  4.    </div>
  5.    <div title="south" region="south" showSplit="false" showHeader="false" height="30">
  6.         ...
  7.    </div>
  8.    <div title="center" region="center" style="border:0;">
  9.        <div class="mini-toolbar" style="border-bottom: 0; padding: 0px;">
  10.           <table style="width: 100%;">
  11.               ...
  12.           </table>
  13.        </div>
  14.        <div class="mini-fit">
  15.           <div id="datagrid1" class="mini-datagrid" multiSelect="true" url="..." style="width:100%;height:100%;"
  16.                idField="id" data-options='{pkFied:"id"}' allowCellWrap="true" allowResizeColumn="true"
  17.                sizeList="[10,20,30,50,100]" pageSize="30">
  18.             <div property="columns">
  19.                 <div type="checkcolumn"></div>
  20.                 <div field="typeName" headerAlign="center">类型</div>
  21.                 <div field="opname" headerAlign="center">操作对象</div>
  22.                 <div field="opcontent" headerAlign="center"  width="100%">操作内容</div>
  23.                 <div field="userName" headerAlign="center">操作人</div>
  24.                 <div field="opip" headerAlign="center">操作者IP</div>
  25.                 <div field="createtime" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss">操作时间</div>
  26.             </div>
  27.         </div>
  28.       </div>
  29.   </div>       
  30. </div>
复制代码


作者: dforce    时间: 2016-11-1 16:27:48

因为你有列设置了100%的宽度
这种列的宽度会计算其余列的宽度，如果其余列的宽度没撑满表格宽度，那么这列负责撑满，
如果大于表格宽度，那么这列就看不见，也就无法调整其他列的列宽
作者: netjava    时间: 2016-11-1 17:56:08

dforce 发表于 2016-11-1 16:27
因为你有列设置了100%的宽度
这种列的宽度会计算其余列的宽度，如果其余列的宽度没撑满表格宽度，那么这列 ...

首先谢谢你的回复,不过不是这个原因,去掉这个设置,也是一样的效果.
作者: felt    时间: 2016-11-2 09:34:43

netjava 发表于 2016-11-1 17:56
首先谢谢你的回复,不过不是这个原因,去掉这个设置,也是一样的效果.

就你这代码，去掉100%那个宽度设置，是可以调整宽度的，但是实际宽度调整是内部计算，平均到其他各列上，所以看上去的效果和你预计的是略有不同的
如果想实现拉到哪就扩张到哪，表格需要设置fitColumns="false"
作者: netjava    时间: 2016-11-3 21:51:00

felt 发表于 2016-11-2 09:34
就你这代码，去掉100%那个宽度设置，是可以调整宽度的，但是实际宽度调整是内部计算，平均到其他各列上， ...

100%宽度那个设置,使不妨碍调整宽度的,我其他的页面都没有问题.
而且这个页面在ie11里是有问题的,在google浏览器中是没有问题的.
作者: felt    时间: 2016-11-4 09:34:30

netjava 发表于 2016-11-3 21:51
100%宽度那个设置,使不妨碍调整宽度的,我其他的页面都没有问题.
而且这个页面在ie11里是有问题的,在googl ...

本地测试你这代码ie11下是可以调整的
请注意这2点
1 doctype必须是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 ie只支持标准模式，请不要使用兼容模式。
作者: netjava    时间: 2016-11-11 18:04:51

felt 发表于 2016-11-4 09:34
本地测试你这代码ie11下是可以调整的
请注意这2点
1 doctype必须是

谢谢,是doctype的问题



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2