jQuery MiniUI
标题:
tab页中包含datagrid的问题
[打印本页]
作者:
julianzhu1117
时间:
2014-5-15 12:42:16
标题:
tab页中包含datagrid的问题
本帖最后由 julianzhu1117 于 2014-5-15 12:45 编辑
只要是tab页中包含datagrid，就会导致tab页被datagrid右边撑开，哪怕把datagrid的sytle里width设置50%连一半屏幕都没的话右边也会把tab页撑开来。只要tab1里的datagrid数据加载成功，右边就边框线就没了，tab标签页被datagrid撑开
<div id="tabsBottom" class="mini-tabs" activeIndex="0" style="height:auto;width:auto">
<div title="tab1">
<a id="btKbAdd" href="javascript:void(0)" class="mini-button" iconCls="icon-add" plain="true">增加</a>
<span class="separator"></span>
<a id="btKbDel" href="javascript:void(0)" class="mini-button" iconCls="icon-remove" plain="true">删除</a>
<span class="separator"></span>
<a id="btKbModify" href="javascript:void(0)" class="mini-button" iconCls="icon-edit" plain="true">修改</a>
<div id="dgKb" class="mini-datagrid"
url="test.aspx" showPager="false" idField="id">
<div property="columns">
<div field="id" width="20" headerAlign="center" >id</div>
</div>
</div>
<div title="tab2">
</div>
</div>
作者:
felt
时间:
2014-5-15 13:22:56
1.确保页面doctype完整
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 IE的话请使用标准模式
3 排除以上2点还有问题的话，请更新至最新版本
4 排除以上3点还有问题的话，请做一个重现问题的html页面，高级模式可以上传文件
作者:
julianzhu1117
时间:
2014-5-15 14:04:35
felt 发表于 2014-5-15 13:22
1.确保页面doctype完整
2 IE的话请使用标准模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>test</title>
<script src="/Scripts/boot.js"></script>
<style>
body{
margin:0;padding:0;border:0;width:100%;height:100%;overflow-y:auto;
}
</style>
</head>
<body style="margin:0;padding:5px">
<div class="mini-toolbar" style="padding-left:5px;margin-right:10px;margin-top:5px">
<div style="height:30px;line-height:30px">
aa：<input id="cblx" class="mini-combobox" style="width:100px" textField="text" valueField="id" emptyText="" allowInput="true" data="[{ id: 1, text: 'a1' }, { id: 2, text: 'a2' }, { id: 3, text: 'a3' }]" />
bb：<input class="mini-textbox" value="" style="width:100px" />
cc：<input id="tbVslCnName" class="mini-textbox" style="width:100px" />
dd：<input class="mini-textbox" value="" style="width:50px" />
ee：<input class="mini-textbox" value="" style="width:50px" />
</div>
<div style="height:30px;line-height:30px">
aa1：<div id="dateStart" format="yyyy/MM/dd" class="mini-datepicker" value="" ></div> - <div id="dateEnd" format="yyyy/MM/dd" class="mini-datepicker" value="" ></div>
bb1：<input id="ykmt" class="mini-combobox" style="width:100px" textField="text" valueField="id" emptyText="" allowInput="true" data="[{ id: 1, text: 'a1' }, { id: 2, text: 'a2' }, { id: 3, text: 'a3' }]" />
cc：<input id="zdl" class="mini-combobox" style="width:100px" textField="text" valueField="id" emptyText="" allowInput="true" data="[{ id: 1, text: 'cc1' }, { id: 2, text: 'cc2' }, { id: 3, text: 'cc3' }]" />
</div>
</div>
<div class="mini-toolbar" style="padding:0;border:none;margin-right:10px;margin-top:5px;">
<div id="dg" class="mini-datagrid" style="height:290px;"
url="/NearPlan/GetSchedules" idField="id" sizeList="[10,20,50]" pageSize="10">
<div property="columns">
<div field="id" width="50" headerAlign="center" >id</div>
<div field="agtName" width="80" headerAlign="center" >a</div>
<div field="vslEnName" width="70" headerAlign="center" >a</div>
<div field="vslCnName" width="70" headerAlign="center" >a</div>
<div field="vslVtpName" width="60" headerAlign="center" >a</div>
<div field="ivoyage" width="60" headerAlign="center" >a</div>
<div field="evoyage" width="60" headerAlign="center" >a</div>
<div field="serLineName" width="90" headerAlign="center" >a</div>
<div field="eta" width="55" headerAlign="center" >a</div>
<div field="etd" width="55" headerAlign="center" >a</div>
<div field="fcDockName" width="60" headerAlign="center" >a</div>
<div field="dockName" width="60" headerAlign="center" >a</div>
<div field="status" width="60" headerAlign="center" >a</div>
<div field="fcLocation" width="60" headerAlign="center" >a</div>
<div field="pilotage" width="60" headerAlign="center" >a</div>
<div field="prePortName" width="70" headerAlign="center" >a</div>
<div field="nextPortName" width="70" headerAlign="center" >a</div>
</div>
</div>
</div>
<div class="mini-toolbar" style="padding:0;border:none;background:#fff;margin-right:10px;margin-top:5px">
<div id="tabsBottom" class="mini-tabs" activeIndex="0" style="height:auto">
<div title="test">
test操作：
<a id="btKbAdd" href="javascript:void(0)" class="mini-button" iconCls="icon-add" plain="true">增加</a>
<span class="separator"></span>
<a id="btKbDel" href="javascript:void(0)" class="mini-button" iconCls="icon-remove" plain="true">删除</a>
<span class="separator"></span>
<a id="btKbModify" href="javascript:void(0)" class="mini-button" iconCls="icon-edit" plain="true">修改</a>
<div id="dgKb" class="mini-datagrid" style="height:auto"
url="/NearPlan/GetKb" showPager="false" idField="id">
<div property="columns">
<div field="id" width="20" headerAlign="center" >id</div>
<div field="ykmt" width="30" headerAlign="center" >a</div>
<div field="vslEnName" width="30" headerAlign="center" >a</div>
<div field="vslCnName" width="30" headerAlign="center" >a</div>
<div field="jhkb" width="30" headerAlign="center" >a</div>
<div field="jhlb" width="30" headerAlign="center" >a</div>
<div field="zxbz" width="30" headerAlign="center" >a</div>
<div field="kbzt" width="30" headerAlign="center" >a</div>
<div field="dgqcs" width="30" headerAlign="center" >a</div>
<div field="dgpcs" width="30" headerAlign="center" >a</div>
<div field="dghcs" width="30" headerAlign="center" >a</div>
<div field="lgqcs" width="30" headerAlign="center" >a</div>
<div field="lgpcs" width="30" headerAlign="center" >a</div>
<div field="lghcs" width="30" headerAlign="center" >a</div>
<div field="zsh" width="30" headerAlign="center" >a</div>
<div field="jzx" width="30" headerAlign="center" >a</div>
<div field="cz" width="30" headerAlign="center" >操作</div>
</div>
</div>
</div>
<div title="test">
test操作：
<a id="btHcAdd" href="javascript:void(0)" class="mini-button" iconCls="icon-add" plain="true">增加</a>
<span class="separator"></span>
<a id="btHcDel" href="javascript:void(0)" class="mini-button" iconCls="icon-remove" plain="true">删除</a>
<span class="separator"></span>
<a id="btHcModify" href="javascript:void(0)" class="mini-button" iconCls="icon-edit" plain="true">修改</a>
<div id="dgHc" class="mini-datagrid" style="height:auto;width:auto;margin-bottom:3px"
url="/NearPlan/GetHc" showPager="false" idField="id">
<div property="columns">
<div field="ie" width="60" headerAlign="center" >b</div>
<div field="vslEnName" width="60" headerAlign="center">b</div>
<div field="vslCnName" width="60" headerAlign="center">b</div>
<div field="hc" width="60" headerAlign="center" >b</div>
<div field="hb" width="60" headerAlign="center" >b</div>
<div field="fwhx" width="60" headerAlign="center" >b</div>
<div field="cgs" width="60" headerAlign="center" >b</div>
<div field="cdl" width="60" headerAlign="center" >b</div>
<div field="sh" width="60" headerAlign="center" >b</div>
<div field="jzxteu" width="60" headerAlign="center" >b</div>
<div field="jzx" width="60" headerAlign="center" >b</div>
<div field="cz" width="60" headerAlign="center" >操作</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
mini.parse();
var grid = mini.get("dg");
grid.load();
function search() {
var vslCnName = mini.get("tbVslCnName");
grid.load({ vslCnName: vslCnName.value });
}
$("#btOptSearch").on("click", function (e) {
search();
});
var gridKb = mini.get("dgKb");
gridKb.load();
var gridHc = mini.get("dgHc");
gridHc.load();
</script>
作者:
felt
时间:
2014-5-15 14:44:56
julianzhu1117 发表于 2014-5-15 14:04
test
在另一贴上回了，你跑下我改的例子
另外，论坛高级模式可以上传文件，不要一下子贴那么多代码
欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)
Powered by Discuz! X2
