0 0

jquery easyUI datagrid 的宽度能不能设置成百分比。3

datagrid 里的width:816 能不能设置100%,如果加一个fix:true的属性,datagrid 的表格会变形。如果是设置成像素,当收缩时,会出现附件里的样子。 datagrid 表格里的表格只有设置设置的width大小。加入了fix:true后,收缩时也会出现附件里的情况,不知道是怎么回事。。。
<table id="authListTableId" ></table>

<script type="text/javascript">
       $('#authListTableId').datagrid({
				title:'权限列表',
				iconCls:'icon-save',
				[color=red]width:816,[/color]				 
				height:470,
				nowrap: false,
				striped: true,
				url:'../jsontree/authdata',
				pageList:[10,15,20,30,40,50],
				remoteSort: false,
				idField:'authId',
				fix:false,
				
				frozenColumns:[[ 
				    
                ]],   
                columns:[[   
               
                   {field:'ck',checkbox:true} ,
                    {title:'权限ID',field:'authId',width:50,align:'center',sortable:true},
                    {title:'权限父ID',field:'authPid',width:50,align:'center',sortable:true},   
                    {title:'权限名称',field:'authName',width:150,sortable:true},
                    {title:'权限别名',field:'aliasName',width:150 ,sortable:true},
                    
                    {title:'权限URL',field:'authURL',width:150,sortable:true},
                    {title:'权限提示信息',field:'tips',width:150,sortable:true},   
                    {title:'打开目标',field:'target',width:150,sortable:true},
                    {title:'ICON图标',field:'icon',sortable:true},
                    
                    {title:'打开时ICON',field:'iconOpen',sortable:true},
                    {title:'关闭时ICON',field:'iconClose',sortable:true},   
                    {title:'权限级别',field:'authLevel',width:50,align:'center',sortable:true},
                    {title:'权限排序',field:'sortNo',width:50,align:'center',sortable:true},
                    
                       
                   {title:'是否叶子',field:'isLeaf',align:'center',sortable:true} 
                   
                   
                ]], 
				pagination:true,
				rownumbers:false,
				toolbar:[{
					id:'btnadd',
					text:'添加',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						//以下为添加的操作
			 
						//  $('#addAuthopenWindowId').window("open");   
						 
							window.open("../index/saveAuth2.jsp?nodeId=","","height=" + 400 + ",width=" + 600 + 
							",toolbar=no,menubar=no,scrollbars=no,resizable=no,status=no");	  
						//以上为添加的操作	
					}
				},'-',{
					id:'btndelete',
					text:'删除',
					iconCls:'icon-cancel',
					handler:function(){
						$('#btndelete').linkbutton('enable');
						//---
						    var idsstr ="";
						    
						    var ids = new Array();
							var rows = $('#authListTableId').datagrid('getSelections');
							if(rows.length<1){
							  $.messager.alert('信息窗口','请选择要删除的数据!','info');
							}else{
							   var cand = true;
							   for(var i=0;i<rows.length;i++){
								ids.push(rows[i].authId);
								idsstr += "ids="+rows[i].authId+"&";
								if(rows[i].authId == 0){
								 cand= false;
								 break;
								}
							   }
							  if(cand){
							     
							      $.messager.confirm('删除窗口', '注意:删除时会连同其子菜单也一起删除,你确定要删除吗?', function(r){
									if (r){
										//--s-执行删除操作	
													  
										  idsstr = idsstr.substring(0,(idsstr.length-1));
										  
										    $.ajax({
											   type: "POST",
											   url: "../jsontree/deleteauth.action"+"?"+idsstr,
											   data:null,
											   dataType:"json",
											   cache:false,
											   success: function(msg){   	 
											       if(msg.result){
											           var treeInfo = document.getElementById("treeInfoId").value;
												        if(!(treeInfo == ""||treeInfo==null)){
												            var info = treeInfo.split(",");
												            var tab = getSelTab(info[1]);
												             parent.frames["leftFrame"].location.href
												             ="../base/treesfrm!getTreeByNodeId.action?nodeId="+info[4];
												             if(tab){												             	             
												              closeTab(info[1]);
												              var title = info[1];
		              										  title = title.substring(2);
												              createTab(title,info[0],info[2],info[3],info[4]);	               
												             }
												        }
												        $.messager.alert('信息窗口','删除成功!','info');
											       }else{
											        	$.messager.alert('信息窗口','删除失败!','info');
											       }
											   }
											  });
											  
										//--e-执行删除操作						 
									}
								})
								 
							  }else{
							   $.messager.alert('信息窗口','你选择的数据中有ID为0的数据,此数据为系统数据,不能删除!','info');
							  } 
							   
							}
							
						//---
						
							
					}
				},'-',{
					id:'btnupdate',
					text:'修改',					 
					iconCls:'icon-edit2',
					handler:function(){
						$('#btnupdate').linkbutton('enable');
						//---
						  var rows = $('#authListTableId').datagrid('getSelections');
						  if(rows.length==1){
						      var authid = rows[0].authId;
						      if(authid != 0){
						         window.open("../base/authupdate!toUpdatePage.action?nodeId="+authid,"","height=" + 400 + ",width=" + 600 + 
							",toolbar=no,menubar=no,scrollbars=no,resizable=no,status=no");	
						      }else{
						       $.messager.alert('信息窗口','此节点数据不能修改!','info');
						      }
						    
						  }else if(rows.length < 1){
						    $.messager.alert('信息窗口','请选择要修改的数据!','info');
						  }else{
						    $.messager.alert('信息窗口','每次只能修改一条数据!','info');
						  }
						//---
					}
				}
					//-------------
					,'-',{
					id:'btnquery',
					text:'查询',					 
					iconCls:'icon-search',
					handler:function(){
						$('#btnquery').linkbutton('enable');
						alert('查询')
							
						}
					}
					//-------------
					//-------------
					,'-',{
					id:'btntest',
					text:'测试',					 
					iconCls:'icon-ok',
					handler:function(){
						$('#btntest').linkbutton('enable');
						alert("测试");
							
						}
					}
					//-------------
				
				]				
			}); 
		 
       </script> 



问题补充:
283433775 写道
还好遇到高手我了,以前用的时候我也发现这个问题,但是我自己写个方法解决了。

是这样滴:它部提供百分比支持,但是你知道百分比支持的原理吗?不就是通过百分比,然后再计算出大小吗。所以我们下面来做转换。写个方法;
function fixWidth(percent)
{
    return document.body.clientWidth * percent ; //这里你可以自己做调整
}


然后在 Column中加入这个方法:
    {title:'权限URL',field:'authURL',width:fixWidth(0.2),sortable:true},  


这样就可以充分利用百分比,然后来适应浏览器的分辨率。



谢谢,思路不错,不过图中的情况还是未能解决,原因是当收缩窗口时,在datagrid  中的父容器panel  的大小已经改变,而datagrid 的table 大小还是最初初始化时的大小,如果能监听datagrid 父容器panel 的大小变化,然后再改变datagrid 的table 的大小,我想,这样子就能实现了。

如果是加载时让datagrid 充满屏幕,加载时我可以求出datagrid 父容器panel 的大小 然后计算出datagrid 的table 大小呀。

现在的问题是不知道怎么监听datagrid 父容器panel 的大小变化。。。
2010年8月02日 16:58
  • 大小: 98.1 KB

3个答案 按时间排序 按投票排序

0 0

采纳的答案

我这钟方法可以,只是你的设置应该这样:将width和height都设置为auto


       $('#authListTableId').datagrid({  
                title:'权限列表',  
                iconCls:'icon-save',  
width:auto,            
height:auto,  
                nowrap: false, 


在加上我的那个就行了

2010年8月03日 12:36
0 0



//做取宽度调整
function getWidth(percent) 

    //return document.body.clientWidth * percent ; 
       return $("#父divID").css("width") * percent ;


加上
datagrid({
   width:'auto'
}


可以解决。

2013年11月07日 13:36
0 0

还好遇到高手我了,以前用的时候我也发现这个问题,但是我自己写个方法解决了。

是这样滴:它部提供百分比支持,但是你知道百分比支持的原理吗?不就是通过百分比,然后再计算出大小吗。所以我们下面来做转换。写个方法;

function fixWidth(percent)
{
    return document.body.clientWidth * percent ; //这里你可以自己做调整
}


然后在 Column中加入这个方法:
    {title:'权限URL',field:'authURL',width:fixWidth(0.2),sortable:true},  


这样就可以充分利用百分比,然后来适应浏览器的分辨率。

2010年8月03日 10:05

相关推荐

    jQuery easyUI datagrid 增加求和统计行的实现代码

    在本文中,将会介绍如何在使用jQuery easyUI datagrid组件的数据网格中增加一个专门用于统计的求和行,该行会显示数据网格中某列数据的总和。easyUI datagrid是一个流行的前端用户界面框架,它可以帮助开发者更加...

    JQueryEasyUI之DataGrid数据显示

    JQueryEasyUI是一个基于jQuery的前端UI解决方案,它提供了一系列的组件,包括DataGrid、Tabs、Menu等,让开发者可以更加容易地构建具有现代化风格的网页界面。DataGrid组件是JQueryEasyUI中用于展示数据表格的组件,...

    jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    datagrid:允许用户设置百分比宽度的列(该功能真是千呼万唤始出来啊 ); form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是...

    jquery-easyui

    **jQuery EasyUI 知识详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了丰富的组件和功能,使得构建交互式Web应用变得更加简单。这个框架的核心是将JavaScript库jQuery与一组精心设计的UI组件...

    jQuery EasyUI 1.4 离线简体中文API文档

    datagrid:允许用户设置百分比宽度的列(该功能真是千呼万唤始出来啊 ); form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是...

    jQuery EasyUI 1.4.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.4.4版本更新内容: Bug(修复) filebox:修复“clear”和“reset”方法在IE9下无法正常工作的问题; messager:修复调用无参的$.messager.progress()方法之后,再调用$.messager.progress('...

    EasyUi datagrid 实现表格分页

    此外,我们还看到了`fixWidth`函数,它根据浏览器窗口的宽度动态计算百分比宽度,以及`endEdit`函数,用于结束datagrid中的编辑状态。 总的来说,实现EasyUI datagrid的分页功能涉及以下几个步骤: 1. 引入EasyUI的...

    jquery EasyUI的formatter格式化函数代码

    在jQuery EasyUI框架中,`formatter`是一个非常重要的功能,用于自定义数据显示的方式,特别是在数据表格(`datagrid`)中。这个功能允许开发者根据实际需求对数据进行格式化处理,如颜色、样式或者内容的转换。在给出...

    easyui第一行过宽解决方案

    在使用EasyUI开发Web应用程序时,我们可能会遇到一个常见的问题:第一行元素的宽度超过容器的宽度,导致布局出现不协调的情况。这个问题主要是由于EasyUI的默认样式或配置与我们的实际需求不符所引起的。本文将深入...

    遮罩easyui

    **EasyUI** 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用程序。其中,“遮罩”功能是一种非常实用的功能,它可以在页面上显示一个半透明的覆盖层,通常用于...

Global site tag (gtag.js) - Google Analytics