-
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
3个答案 按时间排序 按投票排序
-
采纳的答案
我这钟方法可以,只是你的设置应该这样:将width和height都设置为auto
$('#authListTableId').datagrid({ title:'权限列表', iconCls:'icon-save', width:auto, height:auto, nowrap: false,
在加上我的那个就行了
2010年8月03日 12:36
-
//做取宽度调整
function getWidth(percent)
{
//return document.body.clientWidth * percent ;
return $("#父divID").css("width") * percent ;
}
加上
datagrid({
width:'auto'
}
可以解决。2013年11月07日 13:36
-
还好遇到高手我了,以前用的时候我也发现这个问题,但是我自己写个方法解决了。
是这样滴:它部提供百分比支持,但是你知道百分比支持的原理吗?不就是通过百分比,然后再计算出大小吗。所以我们下面来做转换。写个方法;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 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui datagrid demo 详解 增删改查
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
easyUI datagrid 自动调整行号大小
jquery easyui datagrid 教程的部分应用。
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
datagrid添加tooltip及超出宽度添加省略号
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
JS EasyUI DataGrid动态加载数据
解决EasyUIdataGrid列比较多,无数据,列展现不全
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
EasyUI DataGrid过滤用法实例
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下