dialog中显示datagrid的问题

Question

需求：点击“员工选择”按钮，弹出“员工资料”的列表窗口，选中取回后，在对应文本筐内显示。

思路：自己的想法是，将datagrid的部分，放在dialog里，页面一打开，初始化生成dialog，先隐藏，当点击按钮后，设置dagagrid的Url、columns部分。

困难：

（1）如果按照我下面的示例，datagrid部分，通过按钮点击事件后，去触发会产生一个问题：这个页面是通过Tabs加载进来的，所以页面的关闭、打开，并无整个页面的刷新，导致，我弹出窗口后，关闭，将该页面的Tab关闭，再重新打开该页面的Tab,点击按钮弹出这个选择框，此时，Toolbar进行了重复加载，每重复一次这个动作，都会重复加载一个Toolbar。（想不明白，但是现象如此）

怀疑是放在按钮点击事件，里设置Toolbar的缘故，导致重复（也有疑问，如果是按钮影响，应该我每次点击按钮，都会重复加载一次，可事实不会，要这个页面的Tab关闭，重新打开加载页面，再点击按钮触发才会）

于是，将datagrid里toolbar绑定的部分，提到按钮点击事件外面，也就是，此页面一加载，就进行了datagrid的toolbar绑定，每次点击，只是显示和设置url相关信息。

这么设置后，确实解决了每次点击，都会加载一个新的toolbar的问题，但是，出现了一个新问题是，用我这种生成方法，toolbar中的按钮，是没有样式的，就是iconCls没有生效

怀疑是我顺序的缘故，datagrid被放在dialog里，就设置不到了。

这个问题研究了好久，还是没有解决，求助了：

怎么既不会重复加载， 又能正确初始化按钮样式？是不是我大思路的设计就是错误的？

（由于项目关系，整个项目的页面全是由tabs加载页面的，也不想用iframe这些）

示例：

（HTML部分）

<!--Toolbar工具栏部分-->
<div id="staffer_list_select_tool">
	<div>
		<a href="#" class="easyui-linkbutton" iconCls="icon-add-new" plain="true"  onclick="staffer_list_select.get();">取回</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" onclick="staffer_list_select.close();">关闭</a>
	</div>
</div>
<!--弹出员工资料的dialog-->	
<div id="staffer_list_select_dialog">
	<!--员工资料列表的datagrid-->
	<table id="staffer_list_select_table"></table>
</div>
<!--点击弹出按钮，显示员工资料dialog-->
<input type="button" id="staffer_list_select_btn" value="员工选择" />

（JS  dialog初始化部分部分）

//初始化弹出框选择数据时用到的dialog
	$('#staffer_list_select_dialog').dialog({
		width:700,
		height:450,
		modal : true,
		closed : true,
		iconCls : 'icon-user',
		buttons : [{
			text : '关闭',
			iconCls : 'icon-redo',
			handler : function () {
				$('#myleave_list_select_dialog').dialog('close');
			},
		}],
		onOpen:function(){
			$(this).window('center');
		}
	});

（JS 按钮弹出datagrid部分）

$('#staffer_list_select_btn').click(function(){
    $('#staffer_list_select_dialog').panel('setTitle','选择员工');
    $('#staffer_list_select_table').datagrid({
        url:'action/selectStaffer.php?tm='+Math.random(),
        fit : true,
        fitColumns : true,
        striped : true,
        border : false,
        singleSelect:true,
        columns : [],//此处字段太多，省略
        toolbar:'#myleave_list_select_tool',
        onDblClickRow:function(rowIndex,rowData) {

            $('#myleave_search_leavetype').val(rowData.typename);
            $('#myleave_search_leavetype_val').val(rowData.id);
            $('#myleave_list_select_dialog').dialog('close');
        }
    });
    $('#myleave_list_select_dialog').dialog('open');
}

Answer 1

把工具栏的div放到table