easyui tab 的使用


在表格中显示多位人的信息,但是由于表格中显示的只是人的部分信息,若要查看该人的详细信息,则可以以easyui 中的tab 形式进行展现。easyui tab 的使用如下:表格中每个人的信息后都有一个显示详细信息按钮,当点击显示详细按钮时:

<script type="text/javascript">

function personQuery(index, id){    // 这里的index 可以忽略,id 是该人信息的id 值

if(index==1){

$('#w1').window('open');

//$('#w2').window('close');

$('#tt').tabs({  

    border:false,  

    onSelect:function(title){

if(title="人口基本信息"){

var tab = $('#tt').tabs("getTab","人口基本信息");

$('#tt').tabs('update',{  

tab:tab,

options: {

href:"personEnteringManage!jibenxinxi.c?id="+id ,

cache:false}

});

}

if(title="户籍信息"){

var tab = $('#tt').tabs("getTab","户籍信息");

$('#tt').tabs('update',{  

tab:tab,

options: {

href:"personEnteringManage!hujixinx.c?id="+id,  

cache:false}

});

}

    }

});

}



<div id="w1" class="easyui-window" title='详细信息'" style="width:1000px;height:500px;padding:5px;">

<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="fit: true">

<div title="人口基本信息" data-options="tools:'#p-tools'" style="padding:0px;overflow:auto;"> </div>

<div title="户籍信息" data-options="tools:'#p-tools'" style="padding:0px;overflow:auto;"> </div>

</div>

</div>


你可能感兴趣的:(easyui,tab)