jQuery MiniUI

标题: tabs [打印本页]

作者: liyang1987ly 时间: 2013-2-18 16:57:45 标题: tabs

想问一下关于tabs的activechanged 事件的应用也没有个例子啊
比如有两个tabs 第一个有个datagrid 是在第一个tabs中第二个有个datagrid在第二个tabs中
我的意思是上来默认只加载第一个tabs中的数据当我点击第二个tab是的时候再去加载第二个datagrid中的数据

作者: niko 时间: 2013-2-18 17:36:00

onactivechanged="alert(1)"

作者: liyang1987ly 时间: 2013-2-18 17:38:50

niko 发表于 2013-2-18 17:36
onactivechanged="alert(1)"

什么玩意啊

作者: factory 时间: 2013-2-18 17:45:46

liyang1987ly 发表于 2013-2-18 17:38
什么玩意啊

你不是要onactivechanged事件么，就是这样写啊，然后在事件里面执行加载

作者: liyang1987ly 时间: 2013-2-21 09:57:29

factory 发表于 2013-2-18 17:45
你不是要onactivechanged事件么，就是这样写啊，然后在事件里面执行加载

div id="tabs1" class="mini-tabs" activeIndex="0" style="width:350px;height:200px;" onActivechanged="change"
>
<div name="first" title="Tab1">
      <datagrid id="grid1"></datagrid>
</div>
<div title="Tab2">
   <datagrid id="grid2"></datagrid>
</div>
<div title="Tab3">
      3
</div>
<div title="Tab4">
      4
</div>
<div title="Tab5">
      5
</div>
</div>
<script type="text/javascript">
mini.parse();
我的意思是当我单击tab2的时候去加载grid2的数据
是不是我用法不对啊
</script>

作者: factory 时间: 2013-2-21 11:20:37

liyang1987ly 发表于 2013-2-21 09:57
div id="tabs1" class="mini-tabs" activeIndex="0" style="width:350px;height:200px;" onActivechanged ...

onactivechanged(e){
e.sender //是事件激发者，也就是你点击的tab2，然后再去获取到内部的表格，执行grid.load()就好了
}

作者: liyang1987ly 时间: 2013-2-21 11:50:31

factory 发表于 2013-2-21 11:20
onactivechanged(e){
e.sender //是事件激发者，也就是你点击的tab2，然后再去获取到内部的表格，执 ...

一个表跟另一个表相关联查询所有出来的是对象套对象那要怎么获取绑定到datagrid上啊

作者: factory 时间: 2013-2-21 14:30:09

liyang1987ly 发表于 2013-2-21 11:50
一个表跟另一个表相关联查询所有出来的是对象套对象那要怎么获取绑定到datagrid上啊 ...

作者: liyang1987ly 时间: 2013-2-25 11:52:45

factory 发表于 2013-2-21 14:30

如果onActivechanged="change" 为什么 tab2的grid也加载了数据因为我加了lert 会执行弹出框我有点不明白

作者: factory 时间: 2013-2-25 14:23:12

liyang1987ly 发表于 2013-2-25 11:52
如果onActivechanged="change" 为什么 tab2的grid也加载了数据因为我加了lert 会执行弹出框我有点不明 ...

你的tabs是如何创建选项内容的？tabs页面上直接写的还是tabs通过url加载不同的tab的？
如果是通过url的话，我测试了，只有当点击切换tab的时候，才会执行页面的alert

作者: liyang1987ly 时间: 2013-2-27 10:48:37

factory 发表于 2013-2-25 14:23
你的tabs是如何创建选项内容的？tabs页面上直接写的还是tabs通过url加载不同的tab的？
如果是通过url的话 ...

div id="tabs1" class="mini-tabs" activeIndex="0"
style="width:100%;height:100%;">

<div title="类别维护">
<div class="mini-panel" title="类别维护" style="width:100%;height:100%;"
borderStyle="border:0" showToolbar="true" showCollapseButton="false"
showFooter="true" showHeader="true" bodyStyle="padding:0;">

<div property="toolbar" class="mini-toolbar"
style="padding:2px;border-top:0;border-left:0;border-right:0; height: 30px">
<div style="float:left;">
<span style="padding-left:5px;">类别名称：</span> <input type="text"
id="typeName" name="typeName" />
</div>
<div style="float:right;">
<a class="mini-button" iconCls="icon-add"
plain="true">添加</a><span class="separator"></span> <a
class="mini-button" iconCls="icon-save"
plain="true">保存</a> <span class="separator"></span><a
class="mini-button" iconCls="icon-remove"
plain="true">删除</a>
</div>
</div>

<div class="mini-fit" style="height:100%;">
<div id="datagrid1" class="mini-datagrid"
style="width:100%;height:100%;" url="product/getTypeList.do"
idField="typeId" allowResize="true" allowCellEdit="true"
allowCellSelect="true" multiSelect="true" allowCellValid="true"
oncellvalidation="onCellValidation" sizeList=[5,10,20,50,100]
loadingMSG="数据加载中.....">
<div property="columns">
<div type="checkcolumn" width="10"></div>
<div field="typeName" width="120" headerAlign="center"
allowSort="true">
类别名称 <input property="editor" class="mini-textbox"
style="width:100%;" />
</div>
</div>
</div>
</div>

</div>
</div>
<div title="商品维护">
<div class="mini-panel" title="住院费用" style="width:100%;height:100%;"
borderStyle="border:0" showToolbar="true" showCollapseButton="false"
showFooter="true" showHeader="true" bodyStyle="padding:0;">

<div class="mini-fit" style="height:100%;">
<div id="datagrid2" class="mini-datagrid"
style="width:100%;height:100%;" borderStyle="border:0"
url="product/getProList.do" idField="proId" allowResize="true"
allowCellEdit="true" allowCellSelect="true" multiSelect="true"
allowAlternating="true" showFooter="false" loadingMSG="数据加载中.....">
<div property="columns">


<div field="typeName" name="typename" width="20"
headerAlign="center" align="center">类别</div>
<div field="uName" width="20" headerAlign="center" align="center">单位</div>
<div field="userName" name="username" width="20"
headerAlign="center" align="center">消费者</div>
<div field="proName" width="40" headerAlign="center"
align="center">商品名称</div>
<div field="proDate" width="40" headerAlign="center"
align="center" dateFormat="yyyy-MM-dd hh">购买日期</div>
<div field="proAddress" width="60" headerAlign="center"
align="center">购买地址</div>
<div field="proUnitPrice" width="10" align="center"
headerAlign="center">单价</div>
<div field="proAmount" width="10" headerAlign="center"
align="center">数量</div>
<div field="proTotalPrice" width="10" headerAlign="center"
align="center">总价</div>
<div name="action" width="50" headerAlign="center" align="center"
renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
</div>
</div>
</div>
</div>
</div>
</div>
这个是我的代码我的意思是当这个页面加载默认值加载“类别维护”下的datagrid1，然后当我点击“商品维护” 标签时再去加载商品维护下面的datagrid2 的数据但是不行

作者: factory 时间: 2013-2-27 11:51:00

liyang1987ly 发表于 2013-2-27 10:48
div id="tabs1" class="mini-tabs" activeIndex="0"
style="width:100%;height:100%;">

监听下activechanged事件

function activechanged(){
if(e.tab......){
grid2.load();
}
}

这样试试

作者: liyang1987ly 时间: 2013-2-27 11:55:28

factory 发表于 2013-2-27 11:51
监听下activechanged事件

function activechanged(){

您仔细看我的代码了吗？也许您很忙，我这个只有一个tabs

作者: factory 时间: 2013-2-27 13:52:49

liyang1987ly 发表于 2013-2-27 11:55
您仔细看我的代码了吗？也许您很忙，我这个只有一个tabs

不好意思，看错了。如果动态区控制表格加载数据的话，你在你需要加载数据的代码上执行下grid.load()就可以了

作者: jl_wang 时间: 2013-3-28 11:44:28

factory 发表于 2013-2-25 14:23
你的tabs是如何创建选项内容的？tabs页面上直接写的还是tabs通过url加载不同的tab的？
如果是通过url的话 ...

tabs页面上直接写的一开始就会加载，纠结啊，我也遇到与楼主相同的问题

作者: jl_wang 时间: 2013-3-28 11:57:49

jl_wang 发表于 2013-3-28 11:44
tabs页面上直接写的一开始就会加载，纠结啊，我也遇到与楼主相同的问题

再补充一点我要如何获得当前tab底下的grid？

作者: factory 时间: 2013-3-28 13:28:51

jl_wang 发表于 2013-3-28 11:57
再补充一点我要如何获得当前tab底下的grid？

你的tab是写死的啊
如果tab项都是写死，写在同一页面下的，那直接给datagrid一个id，id获取就好了啊

作者: jl_wang 时间: 2013-3-28 14:02:22

factory 发表于 2013-3-28 13:28
你的tab是写死的啊
如果tab项都是写死，写在同一页面下的，那直接给datagrid一个id，id获取就好了啊 ...

哥哥我这个页面有N个tab，虽说每个tab里面只有一个grid，但是我要怎么获取到我当前点击tab下的grid呢？

作者: factory 时间: 2013-3-28 15:48:44

jl_wang 发表于 2013-3-28 14:02
哥哥我这个页面有N个tab，虽说每个tab里面只有一个grid，但是我要怎么获取到我当前点击tab下的grid呢？ ...

你的另一个帖子已经回复你了，另外，N个tab不要全部写死，动态加载不好吗？
你那么多tab，页面搞得代码又多又复杂，易于维护吗？

作者: jl_wang 时间: 2013-3-28 16:05:18

factory 发表于 2013-3-28 15:48
你的另一个帖子已经回复你了，另外，N个tab不要全部写死，动态加载不好吗？
你那么多tab，页面搞得代码又 ...

这个块是固定的业务，不会不需要用到动态的tab，老大你还解决的我们的问题吧，至于用什么形式的，你我说的都不算，有业务决定

作者: factory 时间: 2013-3-28 17:06:17

jl_wang 发表于 2013-3-28 16:05
这个块是固定的业务，不会不需要用到动态的tab，老大你还解决的我们的问题吧，至于用什么形式的，你我说 ...

已经回复你了，写死的话，就是同一页面上的，实时给你创建好的，可以直接通过ID来获取。
你可以用tab的title来关联下面的grid的id，通过判断当前tab的titl，来获取获取对应id的grid
var datagrid = mini.get("datagrid的id")

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)