easyui 之 datagrid动态列与列宽自适应

一、easyui datagrid 简单描述

easyui是一个基于jquery的开发ui控件，使用起来比较简单。想要深入了解的话可以去官看研究api。datagrid的初始化代码如下：

$("#id").datagrid(

{

url
:
'url'
,

columns
:[[

{
field
:
'code'
,
title
:
'Code'
,
width
:
100
},

{
field
:
'name'
,
title
:
'Name'
,
width
:
100
},

{
field
:
'price'
,
title
:
'Price'
,
width
:
100
,
align
:
'right'
}

]]

}

//...其他属性

)

其实就是给初始化函数传一个json格式的数据过去。url的值请求的服务器地址，columns是代表所有列的一个json。field对应服务器返回来的需要展示的数据的属性（名称要相同），title是页面展示的名称，width：列宽。

二、实现方式

遍历后台返回的数据，根据内容计算出每列的像素，重组columns 需要的数据，来初始化datagrid

三、代码

var AutoColDatagrid = function () {

//对外公布的函数
return {
initAutoColDatagrid:function (url, param, id) {
$.post(url, param, function (data) {
var showData = parse(data);
initDataGrid(showData);
})
}
};

// 私有的函数--start

//初始化datagrid
initDataGrid : function (id, showData) {
$("#" + id).datagrid({
pagination:false,
data:showData.content, //showData.content 为datagrid可以识别的json数据格式，showData.column也是同理
columns:showData.column
})
}
/**
*json格式：
*{fields_cn：中文名称数组,fields:英文名称数组(顺序要和中文名称要一一对应),records：datagrid能识别的json数据格式}
*/
parser : function (responeData) {
}
{
var titlesCN = this['fields_cn'];
var titlesEN = this['fields'];
var contentJson = this['records'];
var column = [];
for (var j in titlesCN) {
//定义Field的长度 -- start
var fieldName = titlesEN[j],
titleName = titlesCN[j];
var strLen = getFieldLongestStr(fieldName, contentJson);
var titleLen = getStrLen(titleName);
//根据 titleName 或者 fieldValue来取像素
var fieldWidth = getPixelByStrLen(strLen > titleLen ? strLen : titleLen);
//--end
var tn = {
title:titleName,
field:fieldName,
width:fieldWidth
};
column.push(tn);
}
return {content:contentJson, column:column };
};
/**
* 获取字符串长度
* @return {Number}
*/
getStrLen : function(obj) {
var len = 0;
//将数字类型转换为字符串类型
if (typeof(str) == 'number') {
str = str.toString()
}
for (var i = 0; i < str.length; i++) {
var c = str.charCodeAt(i);
//单字节加1
if (c >= 0 && c <= 128) {
len++;
} else {
len += 2;
}
}
return len;
};

/**
* 在data中去的属性名为field的值的最长字符串
* @param field
* @param data （josnArray格式）
*/
getFieldLongestStr : function(field, data) {
var rt = 0;
$(data).each(function (i) {
var temp = getStrLen(this[field]);
if (temp > rt) {
rt = temp;
}
})
return rt;
};

/**
* 根据strLen来定义field的像素
* @param strLen
* @return {Number}
*/
getPixelByStrLen : function (strLen) {
var rtWith = strLen * 7;
//设置最短最长长度
rtWith = rtWith < 80 ? 80 : (rtWith > 370 ? 370 : rtWith);
return rtWith;
};
//AutoColDatagrid 私有的函数--end

}

四、使用例子

在一个页面里写js，

var demo = new AutoColDatagrid ();

demo.initAutoColDatagrid("url","queryParam","div_id");