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

问题描述

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 写道

解决方案

我这钟方法可以,只是你的设置应该这样:将width和height都设置为auto $('#authListTableId').datagrid({ title:'权限列表', iconCls:'icon-save', width:auto, height:auto, nowrap: false, 在加上我的那个就行了
解决方案二:
//做取宽度调整 function getWidth(percent) { //return document.body.clientWidth * percent ; return $("#父divID").css("width") * percent ;} 加上 datagrid({ width:'auto'}可以解决。
解决方案三:
它部提供百分比支持,但是你知道百分比支持的原理吗?不就是通过百分比,然后再计算出大小吗。所以我们下面来做转换。写个方法;function fixWidth(percent){ return document.body.clientWidth * percent ; //这里你可以自己做调整}然后在 Column中加入这个方法: {title:'权限URL',field:'authURL',width:fixWidth(0.2),sortable:true}, 这样就可以充分利用百分比,然后来适应浏览器的分辨率。

时间: 2016-10-12
Tags: Web综合

jquery easyUI datagrid 的宽度能不能设置成百分比。的相关文章

jquery easyui datagrid 滚动条

问题描述 jquery easyui datagrid 滚动条 easyui版本:1.4.1 问题:datagrid中有好多好多列,且有数据.但是它只显示部分列.不出现滚动条,其他列看不见.我没有设置列的宽度,fitColumns的值是false. 我把宽度设成很小,才会出现滚动条.比如300px.但是这样太小了. 怎么解决啊. 解决方案 设置一个height值试试. 另外可参考中文api: http://www.zi-han.net/case/easyui/datagrid&tree.html

jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码_jquery

1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); S

jQuery easyui datagrid 分頁 - (前端分頁求教)

问题描述 菜鳥求解答 目前網上能找到的 jQuery easyui datagrid 分頁實例,全部使用的後端分頁. 此分頁功能會造成數據庫連接很頻繁,項目裏面要避免此塊 不知道是否有哪位高人,知道或者做過,使用前端實現分頁的實例,鄙人求教!!! 是結合jQuery easyui datagrid 實現的 感謝感謝!!!! 问题补充:283433775 写道 解决方案 后端分页,这是大不分项目所必须的,不妨想一想,算一算,如果千万条甚至亿条数据一起加载到前端,一个页面的容易是多少,加载速度呢.这

jquery easyui datagrid 某列的数据为0或空时,这个列不显示

问题描述 jquery easyui datagrid 某列的数据为0或空时,这个列不显示 jquery easyui datagrid 某列的数据为0或空时,怎么让这个列不显示. 解决方案 问题是你所有行的此列都是0没有..要是有些列不是0那不是也被隐藏了, 如果是只要有0或者为空就隐藏,自己遍历下返回的数据,然后调用hideColumn执行隐藏此列$('#dg').datagrid('hideColumn','列名称') 解决方案二: jquery easyui datagrid 列宽按百分

jquery easyui datagrid 只有部分列的单元格调用单击单元格事件

问题描述 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件. 比如有姓名,年龄,性别3列.我要点击姓名下的单元格执行一些方法,但点击年龄和性别下的单元格则不执行方法 解决方案 http://www.cnblogs.com/youring2/archive/2013/03/01/2938661.html 解决方案二: EasyUI Datagrid 自定义列.Foolter及单元格

jquery easyui datagrid新增 java后台参数接收

问题描述 jquery easyui datagrid新增 java后台参数接收 js部分: var editRow = undefined; var dategrid; $(function() { dategrid = $('#userListTable').datagrid({ url : 'loadSalesmanList', idField : 'userCode', columns : [ [ { title : '姓名', field : 'voUserName', width :

jQuery EasyUI datagrid实现本地分页的方法_jquery

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

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

在datagrid的onLoadSuccess事件增加代码处理. <style type="text/css"> .subtotal { font-weight: bold; }/*合计单元格样式*/ </style> <script type="text/javascript"> function onLoadSuccess() { //添加"合计"列 $('#table').datagrid('append

jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果_jquery

1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-index属性等. 1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等.将来保存的时候,就是通过取这个属性值找某一行的数据的. function