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");