Bootstrap modal整合 EasyUI DataGrid

首先明确一下我遇到的问题， 在页面点击按钮时， 弹出 Bootstrap 的 modal 框, 在 modal 框中有一个 EasyUI 的 DataGrid ， modal 弹出后, DataGrid 不显示(没有长宽, 设置了定长定宽数据不显示)

解决办法: 在 Bootstrap modal 的 CSS 动画结束后, 再加载 EasyUI 的 DataGrid, 代码如下:

clickMe

function initReloadDataGrid(){
 	$('#anaylisDeptModal').modal('toggle');
 	//modal 动画加载完成后执行以下事件
	//当模态框对用户可见时触发（将等待 CSS 过渡效果完成）
	$('#anaylisDeptModal').on('shown.bs.modal', function () {
		// 执行动画结束后的动作...
		// 重新加载 datagrid 
		jQuery('#gzgi_AnaylisDept_DataGrid').datagrid({
			toolbar:'#tb',
			width:800,
			height:480,
			fit: true,
			fitColumns: true,
			nowrap: true,
			striped: true,
			collapsible:true,
			url:'',//@ TODO   请添加 URL
			remoteSort: true,
			checkOnSelect: true,
			idField:'id',
			rownumbers:true,
			pagination:false, //关闭分页
			singleSelect:true,
			pageSize:5,
			onClickRow: onClickAnaylisRow,
			pageList: [5,10,15,20,25,50,100],
			columns:[[
				{title:'ck', field:'ck',checkbox:true, width:30},
				{title:'主键',field:'id', halign:'center', align:'left',sortable:true}，
				//列.......
			]]
		});
	});
})

此人很懒, 请根据自己需要谨慎修改代码

	

		

			

				×
				
选择解析部门
			
			

				

					

						

							

								

									 
									
									
选择辅解析部门
								
								

									

									

										

											
											

												
													
													
												
												
													
													
												
												
													
													
												
											
											

												
											
										
									
								
							
						
					
				
			
			

				
					确定
			
		
		
	
	

---

重要代码如下:

$('#modelId').on('shown.bs.modal', function () {
	//@ TODO
});