easyui动态修改列宽度

最新推荐文章于 2024-07-12 02:57:57 发布

原创最新推荐文章于 2024-07-12 02:57:57 发布 · 置顶 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid

本文介绍了如何在EasyUI的Datagrid中动态修改列的宽度，以及如何解决由此可能导致的表格重载问题。通过在onLoadSuccess回调中调整列宽并利用onBeforeLoad函数确保请求正常提交，保证了表格样式的完整性和功能的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我的datagrid的columns属性:

<%--列字段，field对应后台pojo类属性--%>
	var columns = [ [ {
		field : '',
		checkbox :true	
	},{
		field : 'id',
		title : '邮箱',
		align : 'center',
		resizable :true
	},{
		field : 'nickName',
		title : '昵称',
		align : 'center',
		resizable :true
	}]];

然后是定义datagrid的属性对象（json）：

        
        var firstUrl;        //全局变量,也就是默认配置的datagrid的url属性
        var times=0;         //全局变量，判断加载第几次,默认为0
        
        //加载虚拟表格
	$(function(){
            firstUrl='${pageContext.request.contextPath}/xxx.action';
            $('#grid').datagrid( {
                    iconCls : 'icon-forward',
                    fit : true,
                    border : false,
                    rownumbers : true,
                    striped : true,
                    pageList: [5,10,20],
                    pagination : true,
                    nowrap :true,
                    toolbar : toolbar,
                    url : firstUrl,
                    idField : 'id',
                    columns : columns,
                    onLoadSuccess :changeWidth,
                    onBeforeLoad: ckTimes,
                    onDblClickRow : doDblClickRow
                });   
    });

onLoadSuccess : 加载成功执行的函数;

onBeforeLoad：加载之前的函数

onDblClickRow：双击表格执行的函数(与本文无关)

onLoadSuccess之后执行的函数,至于为什么放在加载成功的回调函数中，是因为当datagrid加载时候，可能表格渲染还未完成，或者表格的数据还未加载完毕，此时更改datagrid地列的width，则可能会造成表格样式被破坏。

改变列宽度的代码如下:

       
       /**
	 * 改变datagrid宽度
	 * 1.获取表格对象
	 * 2.判断是否是第二次加载,如果是则改变datagrid的url和data属性
	 * 3.如果是第一次加载会获取到当前网页的宽度,并且根据字段数,设置相应长度
	 * 4.不发起url请求,将本地数据再次加载,但是列数组使用改变了width之后的
	 * 5.times++;
	 * @returns
	 */
	function changeWidth(){
		var dg = $('#grid');
		if(times==1){
			dg.datagrid('options').url = firstUrl;        //代表是第二次加载重新设置datagrid的url(此时会重新发起请求)
			dg.datagrid('options').data ='';              //设置本地data加载为空
		}
                //第一次加载执行
                if(times==0){
                        // 1.$(document).width()获取当前页面的宽度                    
                        // 因为columns定义的是一个二维json对象数组,所以columns[0]获取到的就是列列属性地json对象数组,
                        // 用当前页面宽度除以列的个数,得到的是每个列本该占据的宽度,当前,后面会根据判断，将宽度作调整
                        // 2.接下来是循环,获取每个列的field字段,并且通过datagrid('getColumnOption'，field)函数获取列的属性对象
                        // 3.获取到了属性对象即可获取到width。
                        // 4.判断当前列的width是否比elementWidth小,若是除以elementWidth<=1则代表这个列小于分配的宽度,那么就分配.
      
                        
                        var elementWidth=$(document).width()/columns[0].length;
			for (var i = 0; i < columns[0].length ;i++) {
				var field=columns[0][i].field;
				if(field != ''){
					var col = dg.datagrid('getColumnOption', field);
					var width=col.width;
					if(width/elementWidth<=1){
						columns[0][i].width=elementWidth;
					}
				}
			}
                        //6.分配好了宽度,并且设置到了columnsjson对象中,此时应该是让datagrid重载了,但是问题在于设置url                    
                        //    例如,去除以下的data和url属性,确实可以做到直接重载,并且更改了列的宽度。但是问题出现了,查看后台,发现更改url
                        //    会重新加载datagrid,也就是重新发起了一次请求.这当然不是我们想要的(为了样式降低性能)
                        //7.作者冥思苦想想通过其他方式改变datagrid的列宽度却没有结果，最终只能通过重设columns属性并且重载
                        //  （可以在定义columns的时候计算好百分比，但是是不准确的,因为后台数据还没发送过来,你也不知道其宽度）
                        //   最终只能通过这个办法了，必须先发起请求加载完数据，easyui会分配每个列宽度,然后在去根据自己的公式，重新分配
                        //8. 调用datagrid('getData')方法获取加载完成的数据
                        //9. 将加载次数++
                        //10.重新设置datagrid属性,调用datagrid({columns: columns ,data: data,url,''}),此时设置url为''，则不发起请求
                        //11.因为每次调用datagrid(options)方法都会重新发起请求，所以将url设置为'',并且加载本地data，前台可以看到列宽度设置成功   
                        
                        var data=dg.datagrid('getData');
			times++;
			dg.datagrid({
				columns :columns,
				data :data,
				url : ''
			});
		}
	}

虽然以上代码可以成功改变datagrid的样式,但是会造成datagrid的url为''，导致以后的重载或者请求无法提交,此时可以通过onBeforeLoad来判断，并且解决重载问题,代码如下:

        /**
	 * 每次发起请求之前判断times
	 * 如果times==1代表是设置datagrid的url,并且想发起请求,此时拒绝请求加载,并且times++
	 * 之后的每次请求因为url更改了,也会去找更嘎url之后的地址,并且times不为1,请求允许通过
	 * @returns
	 */
	function ckTimes(){
		if(times==1){
			times++;
			return false;    //返回false，阻止发起请求
		}
		return true;            //除了第二次加载是改变url发起的请求之外，其他的请求都放行
	}

后台显示一次请求，并且列宽度完成改变。