dialog中显示datagrid的问题

yhwsyl 发布于 2016/05/01 16:05
阅读 2K+
收藏 1

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

思路:自己的想法是,将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');
}




加载中
0
weskergood
weskergood

把工具栏的div放到table

返回顶部
顶部