easyui datagrid点击开启tabs

. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500pxheight:250px">

<div title="Tab1" style="padding:20pxdisplay:none">

tab1

</div>

<div title="Tab2" data-options="closable:true" style="overflow:autopadding:20pxdisplay:none">

tab2

</div>

<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20pxdisplay:none">

tab3

</div>

</div>

<div id="tt" class="easyui-tabs" style="width:500pxheight:250px">

<div title="Tab1" style="padding:20pxdisplay:none">

tab1

</div>

<div title="Tab2" data-options="closable:true" style="overflow:autopadding:20pxdisplay:none">

tab2

</div>

<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20pxdisplay:none">

tab3

</div>

</div>

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({

border:false,

onSelect:function(title){

alert(title+' is selected')

}

})

JQuery easyUi dataGrid工具栏添加搜索输入框的方法：

1、使用tab，在每个tab上面都有一个datagrid，这样easyui给所有datagrid的toolbar生成的dom的class，所以用prependTo()会给所有的toolbar都加上要生成的dom。通过style来指定要prepend的toolbar，代码如下：

//tab初始化完毕之后

$("<table><tr><td style='padding:0 8px'><label>标题:</label></td><td><input id='sTitle' name='sTitle'></td></tr></table>").prependTo("#tabs .panel[style='display: block'] .datagrid-toolbar")

$('#sTitle').searchbox({

  width : 180,

  searcher : doSearch,

  prompt : '请输入标题'

})

function doSearch() {

  $("#grid").datagrid("load", {

  "sTitle" : $("#sTitle").val()

  })

}

2、效果如下图：

猜想你的做法：将标题分别绑定事件或者执行同一个函数但是参数不同，来进行切换datagrid的显示与隐藏；

<div id="div_1"><table id="tab1"></div>

<div id="div_2"><table id="tab2"></div>

猜想出现的原因：你切换标题的时候，datagrid 的id(<table id="tab1">)发生了变化并且将div1隐藏了所以才出现了这个问题

验证猜想出现的原因：F12打开控制台看有没有 没有对象的这个错

---